Meilleures pratiques de typographie Web pour un site Web moderne

Un guide pour une typographie Web réactive couvrant toutes les meilleures pratiques & règles de taille de style de police pour garantir la lisibilité du contenu de votre site & une joie à voir.


Bonnes pratiques de typographie

Les peintres ont leurs pinceaux. Les sculpteurs ont leur argile. Les concepteurs Web ont leurs… polices? Comme Oliver Richenstein l’a maintenant célèbre écrit: «95% des informations sur le Web sont écrites.» Après tout le soin que vous avez accordé aux graphiques personnalisés, aux icônes, aux jolis menus et aux interfaces propres de votre site, ce serait un péché de passer sous silence le composant essentiel de la typographie Web.

Ne vous inquiétez pas, vous n’avez pas besoin d’être un maître designer pour créer un texte élégant et efficace. En adhérant à certaines directives et principes fiables, votre typographie Web transmettra les informations recherchées par les utilisateurs d’une manière facilement lisible et soigneusement conçue..

Établir une hiérarchie visuelle

L’objectif le plus important d’une bonne typographie Web est de créer un hiérarchie de contenu qui passe visuellement d’un élément à l’autre. Une bonne distinction entre vos titres, sous-titres et corps de texte, une variété de polices et de styles de police, et le fait d’avoir suffisamment d’espace blanc entre les blocs de texte sont tous des facteurs qui favorisent une expérience de lecture sans effort.

Exemple de hiérarchie visuelle de typographie

Construire un corps fort

Votre premier ordre du jour consiste à définir les principaux éléments de votre site Corps texte, car c’est ce que vos visiteurs passeront la plupart de leur temps à lire. Votre objectif est de créer un texte qui coule naturellement à travers de grands paragraphes, inspirant un rythme sain pour de longues périodes de lecture.

  • La taille de police la plus courante pour le texte du corps est 16px—Ou, mieux encore, 1em (plus à ce sujet plus tard).
  • Évitez d’aligner votre texte au centre, car les bords inégaux des deux côtés rendront la vue peu attrayante. Au lieu de cela, définissez la gauche et la droite marge du conteneur de texte à auto pour obtenir un effet plus souhaitable.
  • Justifié le texte fonctionne très bien pour les journaux, pas pour les pages Web. La nature des dispositions fluides peut créer des écarts d’espacement imprévisibles entre les mots.
  • Choisir faible contraste polices sur les hautes. Des polices comme Didot fonctionne bien pour les gros titres ou pour l’impression grand format, mais son contraste élevé entre les lignes de trait épaisses et fines rend la lecture difficile à petite taille sur les sites Web.
  • Soyez conscient de lisibilité. Dans de nombreuses polices sans empattement, les majuscules «I» et les minuscules «l» se ressemblent exactement, ce qui peut créer une confusion inutile.
  • L’optimale hauteur de la ligne du texte du paragraphe se situe entre 1,25 et 1,5 × la taille de police. Ajustez en fonction de la police choisie.

Rubriques pour réussir

Pour le meilleur ou pour le pire, la plupart des lecteurs parcourront probablement les pages de votre page. Rubriques sans même se soucier du texte principal. Par conséquent, il est essentiel d’attirer leur attention et de les encourager à poursuivre la lecture en veillant à ce que la typographie de vos titres soit remarquable..

  • La taille moyenne de la police pour le texte de l’en-tête se situe quelque part 36px—Ou, mieux encore, autour 2.25em (nous allons y arriver).
  • Il faut toujours porter attention à la rubrique devant le corps. Assurez-vous que le texte de votre titre n’est pas maîtrisé par un poids de police trop épais dans le corps.
  • Assurez-vous que vos titres répondent aux attentes des lecteurs. Un texte considérablement plus grand avec un espacement suffisant entre son paragraphe enfant signifie un changement de sujet, tandis que des titres plus petits beaucoup plus proches des paragraphes impliquent que le contenu est lié.
  • Dans le cas où votre titre devrait passer à la ligne suivante, sachez que la valeur optimale hauteur de la ligne pour les rubriques est Moins que ce que c’est pour le corps du texte.

L’espace entre

La quantité d’espace séparant les éléments de votre page en dit long sur leur relation les uns avec les autres, et c’est un principe de conception qui ne peut être ignoré. Les en-têtes dominants entourés d’un océan de blanc offrent un contexte très différent de celui des en-têtes plus petits attachés de près aux paragraphes (rappelez-vous que hiérarchie visuelle).

En règle générale, il vaut mieux préférer avoir trop d’espace blanc que pas assez. Les mises en page propres avec un espace blanc généreux sont ce qui est préféré sur le Web moderne.

Falling in Line

Imaginez que vous lisez du texte sur votre moniteur haute résolution de 27 pouces qui s’étend tout au long des deux bords de l’écran. Vos yeux seraient fatigués après un seul paragraphe!

Il est important de limiter chaque ligne de votre texte principal à un certain nombre de caractères afin que les yeux restent concentrés sur un point central. Le consensus populaire est que cette mesure magique pour ordinateurs de bureau est 60 à 75 caractères. Pour écrans mobiles, où nous voulons éviter de plisser les yeux et de texte trop condensé, ce nombre se trouve autour 35 à 40 caractères par ligne.

Faire pencher la balance

Beaucoup a été écrit sur le sujet de la mise à l’échelle entre la taille de la police Body et Heading. Quelle est exactement cette taille H2 parfaite si votre texte Body est, disons, 1em? La détermination des proportions les plus esthétiques entre le texte du corps et les en-têtes H1 à H6 est heureusement quelque chose que de nombreux typographes ont déjà décodé. De plus, ces proportions mathématiques doivent également s’adapter en fonction de la taille de l’écran de l’utilisateur.

Le concepteur Jason Pamental fournit un tableau utile pour ce qu’il pense être les tailles de police les plus optimales sur divers appareils multimédias – et j’ai tendance à être d’accord avec lui. Essentiellement, même si la taille H1 idéale sur un ordinateur de bureau peut être 3 × la taille du corps, sur un écran mobile, cela apparaîtra trop exagéré – il doit donc être réduit pour s’adapter à la zone de visualisation plus petite.

Graphique des tailles de police optimales sur divers appareils multimédias

NOTE RAPIDE: Comment savoir si vous avez une bonne hiérarchie visuelle? Squint à votre écran jusqu’à ce que tout le texte devienne flou. Si la mise en page apparaît comme un blob amorphe sans distinction entre les sections, votre hiérarchie peut échouer. Si, cependant, vous pouvez facilement discerner les séparations entre les blocs de texte, les titres et savoir clairement où les yeux doivent voyager, alors vous êtes en grande forme!

Garder le texte réactif

La conception de sites Web réactifs est une pratique essentielle de nos jours, d’autant plus que de plus en plus de personnes utilisent les appareils mobiles comme principal moyen de naviguer sur Internet. Alors que la conception avec des pourcentages plutôt que des pixels a révolutionné la façon dont les images et les marges s’adaptent aux largeurs fluides, la typographie Web réactive est malheureusement restée un œuf plus difficile à casser..

L’optimisation de la taille des polices sur plusieurs appareils peut devenir écrasante car vous devez parcourir plusieurs requêtes multimédias pour cibler tout le texte de votre site Web. Cependant, avec un ajustement rapide à votre unité de choix, vous découvrirez plus facilement les bonnes tailles de police à utiliser pour tout type d’écran.

Ems Over Pixels

Pour simplifier la typographie de votre site, abandonnez le pixel et commencez à utiliser ems. Ems permet une compréhension plus facile de la mise à l’échelle entre les tailles de police de votre site, et leurs unités plus petites sont plus faciles à gérer que le nombre de pixels à deux chiffres.

Plus important encore, avec ems, tout est relatif au conteneur parent. Si vous définissez hauteur de la ligne d’un conteneur à 1,5 em, même si vous modifiez la taille de police de ce conteneur, la hauteur de ligne restera dans la bonne proportion. Avec les pixels, vous devez constamment ajuster la propriété de hauteur de ligne du conteneur pour chaque modification de sa taille de police afin de maintenir la cohérence visuelle.

Ce principe vaut pour marge, rembourrage, l’espacement des lettres, et la plupart des autres styles que vous appliquez au texte de votre site. Plus de bricolage de pixels sur le remplissage de votre contenu pour chaque requête multimédia – il suffit de définir son état initial en ems et il s’ajustera automatiquement avec les proportions d’origine!

Utilisation d’Ems

La première chose à faire est de définir la référence de base de la taille de police de votre site. Dans ton feuille de style, entrez ceci:

corps {
taille de police: 100%;
}

Cela établit une taille de police relative du contenu de votre site à 1em, que la plupart des navigateurs interprètent comme 16px. Maintenant, toutes vos tailles de titre – 2,25 em, 1,5 em, etc. – sont des multiples directs de la ligne de base 1em.

NOTE IMPORTANTE: Ems sont en cascade—La signification de leur taille est relative à la valeur établie de son parent. Par exemple: si vous définissez la taille de police de votre corps à 1,25em, puis la taille de police d’un conteneur enfant à 1,25em, les deux polices ne seront pas de la même taille! Au contraire, le texte du conteneur enfant sera 1,25 × la taille parent 1.25em d’origine.

Plus de conseils pour une excellente typographie Web

Voici quelques conseils supplémentaires pour une excellente typographie Web:

N’en faites pas trop

Vous devez limiter la typographie de votre site Web à 2 à 3 polices au plus. Il s’agit généralement d’une police pour vos en-têtes, d’une police pour votre texte principal et peut-être d’une police de sous-titre si nécessaire. L’utilisation de trop de polices peut créer une mise en page désordonnée et floue. Le temps de chargement de votre site peut également être affecté, comme expliqué par le point suivant.

Intégrez uniquement ce dont vous avez besoin

Considérez uniquement ce qui est le plus nécessaire pour votre site et laissez le reste de côté. Si vous savez que vous allez avoir besoin ordinaire, audacieux et italique styliser pour une police donnée, puis incorporer uniquement ces choix et exclure le mince, lumière et noir modes. Le chargement de plus de styles que nécessaire peut affecter considérablement les ressources de votre site, car chaque style individuel est une demande de serveur distincte..

Si vous ne voulez pas limiter votre créativité pendant la phase de conception, allez-y et intégrez tout; n’oubliez pas de supprimer les styles excédentaires avant la mise en ligne de votre site.

Si vous ne pouvez pas le lire, ne l’utilisez pas

Celui-ci est un biggie. Alors que le fleuri police manuscrite peut être tentant d’utiliser, s’il y a même la moindre confusion que ce soit un “g” ou un “y”, alors ne l’utilisez pas! Rien n’est plus frustrant pour un lecteur que d’avoir du mal à déchiffrer une police illisible.

Privilégiez le texte réel à «Lorem Ipsum»

Chaque designer compte sur lorem ipsum texte factice pour remplir les zones de contenu vides lors de la planification de la mise en page d’un projet. Cependant, vous serez peut-être surpris de voir à quel point l’impact de l’utilisation du contenu réel peut avoir une incidence sur l’apparence de votre typographie. «Lorem ipsum» est complètement sans émotion et intellectuellement creux; il ne fournit aucun indice réel sur la façon dont vos mots et votre personnalité seront exprimés à l’aide de caractères. Par conséquent, branchez le contenu réel sur votre site dès que possible avant de finaliser la conception de votre site.

Contraste avec les arrière-plans

Une police sombre sur un fond blanc uni offrira toujours la meilleure lisibilité. Le texte blanc contre une image sombre ou floue devient également populaire ces jours-ci. N’oubliez pas que votre arrière-plan n’est pas trop complexe ou détaillé, ce qui dominera le texte de premier plan.

Exemple de mauvaise typographie de texte sur fond de texteUn exemple d’une mauvaise pratique de typographie utilisant un arrière-plan «texte sur texte».

Association de polices – Like Attire Like

L’association de polices avec des personnalités complètement différentes provoquera des signaux confus. Les deux peuvent être contrastés stylistiquement, mais émotionnellement, ils devraient servir le même message.

Association de polices – Gardez-la dans la famille

La solution la plus simple est souvent la meilleure. Parfois, les meilleurs appariements proviennent de l’utilisation de variations (empattement, poids alternatif, dalle) au sein de la même famille de polices.

Hyperliens

La pratique courante et attendue consiste à souligner liens et supprimer le soulignement sur les événements de survol. Lorsque vous suivez cette route, assurez-vous que votre texte souligné est en italique ou en gras plutôt que souligné pour éviter toute confusion.

De nos jours, cependant, le texte ancré est généralement coloré à la place, avec un effet de transition appliqué lorsqu’il est survolé. Du point de vue de la conception, c’est indéniablement la meilleure option, mais n’oubliez pas de la garder cohérente!

Quelques CSS à connaître

Cela affecte la distance entre les lettres. Utile pour souligner les titres.

espacement des lettres: x.xxem;

Cela affecte la distance entre les mots:

espacement des mots: x.xxem;

Cela fournit une alternative aux majuscules pour l’accentuation. Utile aussi pour les abréviations.

variante de police: petites majuscules;

Cela CAPITALISERA TOUT VOTRE TEXTE.

transformation de texte: majuscule;

Cela mettra en majuscule la première lettre de texte.

transformation de texte: capitaliser;

Cela mettra un barré sur le texte.

décoration de texte: accès direct;

Cela améliore l’affichage des polices dans les navigateurs modernes:

rendu de texte: OptimizeLegibility

Comprendre les types de fichiers de polices

C’est une bonne idée d’incorporer plusieurs types de fichiers pour vous assurer que les polices se chargeront correctement dans un large éventail de navigateurs. Ce sont ceux qui devraient vous préoccuper le plus:

Vrai type

TTF est le format le plus courant pour Mac et Windows, et il est pris en charge dans tous les principaux navigateurs.

Type ouvert

OTF est également largement pris en charge, et il permet des modules complémentaires comme les petites majuscules et les caractères alternatifs sans avoir besoin d’incorporer une police distincte.

Type ouvert intégré

EOT n’est pris en charge que par Internet Explorer. À moins que vous ne vous inquiétiez pour les utilisateurs des anciennes versions d’IE, il est probablement préférable de ne pas utiliser celui-ci..

Format de police Web Open

WOFF – et son successeur, WOFF2 – sont les nouveaux rois de la ville. Leur prise en charge dans les principaux navigateurs et leur capacité de compression en font le type de fichier moderne de choix.

Besoin de convertir un type de fichier?

Vous rencontrerez probablement une situation dans laquelle vous n’avez qu’un seul type de fichier de police et devez en quelque sorte le convertir en un autre. FontSquirrel et Font2Web offrir des outils en ligne qui feront exactement cela.

Conclusion

Tu le savais déjà contenu est l’aspect le plus important de votre site Web. Un contenu bien conçu mérite une typographie bien conçue; ne décevez pas les visiteurs du site avec un texte difficile à lire ou à confondre dans la structure. Avec une hiérarchie visuelle soigneusement planifiée qui respecte les meilleures pratiques typographiques, vos pensées créatives peuvent également être présentées de manière créative. Bonne frappe!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map