Comprendre la typographie pour le Web

Dans Web Design, le sujet de la typographie est important pour tous les domaines de l'expérience utilisateur. Chaque site Web a besoin de texte et vous pouvez suivre certaines directives pour créer des mises en page exceptionnelles. Les quadrillages, les lettres, la hauteur de police, l'espacement des textes, les combinaisons de couleurs et autres propriétés similaires doivent tous être pris en compte..

Dans cet article, j'aimerais approfondir le domaine de la typographie Web. Nous allons examiner idées populaires derrière la conception de textes de pages Web crédibles. En cours de route, je présenterai quelques propriétés CSS3 utiles que les concepteurs oublient souvent.

J'ai essayé de mettre davantage l'accent sur la théorie et les idéologies pour le Web. Cela donne une vision plus large du texte numérique en général et vous, le concepteur Web, pouvez ensuite choisir les styles à appliquer et dans quel but. Le contexte est toujours essentiel et vous devez le déterminer de manière appropriée pour chaque projet sur lequel vous travaillez. Considérez ce guide comme un paquet de référence regorgeant de tendances Web modernes, créées par des innovateurs typographiques de la planète..

Mesurer vos paragraphes

Vous n'aurez pas besoin de casser le bâton pour ce genre de mesure. En réalité, la mesure relative à la typographie fait référence à la largeur (horizontale) d’un paragraphe donné sur votre page. Ce n'est pas un sujet qui fait toujours l'objet de discussions, mais cela influence la lisibilité de votre contenu. En règle générale, vous voulez limiter toute ligne à environ 75-85 caractères (sans inclure nécessairement les espaces)..

Maintenant, cela peut sembler un peu exagéré pour certaines dispositions plus larges. Surtout si votre conception est fluide et destinée à s'adapter lorsque l'utilisateur redimensionne la fenêtre de son navigateur. Vous pouvez toujours définir un CSS largeur maximale propriété sur votre contenu principal div. Le codage des marges et des tailles de police en unités évolutives (pourcentages, ems) plutôt qu'en pixels permettra une telle flexibilité dans n'importe quelle présentation.

Il n'y a pas d'unité de mesure maximale à laquelle il faut se méfier. La manière dont vous écrivez le contenu et transformez les mots en phrases est beaucoup plus importante que la largeur de chaque ligne. Mais gardez à l'esprit que les phrases plus longues sont beaucoup plus difficiles à lire que les déclarations concises et plus courtes.

Leading expliqué

Lors de la conception, avec votre mesure de paragraphe, vous devez également prendre en compte l’idée de de premier plan. Le mot se prononce “ledd-ing”, comme le plomb utilisé dans les crayons. Ce nom provient des anciens jours de composition mécanique où des bandes de plomb étaient placées entre des lignes de texte..

Diriger est encore un concept très important dans la conception Web et va de pair avec les mesures de paragraphe. Au fur et à mesure que la largeur de votre paragraphe augmente, vous devez appliquer une augmentation égale à la quantité de espace entre les lignes de texte. Cet espace supplémentaire rend la lecture beaucoup plus facile pour vos yeux.

Si vous parcourez un texte très serré, il vous sera peut-être difficile de vous concentrer sur une seule ligne. Si tel est le cas, essayez d'augmenter le nombre de lead avec le CSS hauteur de la ligne propriété. Vous voulez toujours plus d'espace entre les lignes de texte qu'entre les mots. Sinon, vos blocs de texte peuvent apparaître sous forme d’impression de journal et ne seront pas très faciles à parcourir..

Une technique solide consiste à appliquer plus d’espace que nécessaire et à le réduire au besoin. Tous les textes ne sont pas créés égaux et vous aurez sûrement besoin de paragraphes avec une mise en forme interne différente, tels que des mots en gras, des liens d'ancrage, des soulignements, etc. Avec une longueur supplémentaire, ces changements ne seront pas aussi déséquilibrés par rapport à l'autre texte..

Utiliser des tailles de police naturelles

Il existe encore une poignée de sites Web qui choisissent de s'en tenir à des tailles de police plus petites que la moyenne. 11px-12px peut sembler être beaucoup plus du “professionnel standard” pour les mises en page d'affaires. Mais ces tailles n'aident pas la majorité des visiteurs à la recherche d'informations spécifiques.

Généralement, les navigateurs Web ont une valeur par défaut de 16 pixels si vous n'appliquez aucune règle CSS. Même cela peut sembler un peu petit si vous avez suffisamment de place dans votre mise en page pour permettre un texte plus volumineux. Les tailles de police plus grandes sont simplement plus jolies et sont beaucoup plus faciles à parcourir pour les mots-clés relatifs. Les polices Serif ne sont pas souvent choisies comme paragraphes, mais vous pouvez toujours vous en tirer. Je suggère d'utiliser des tailles de texte beaucoup plus grandes pour les polices serif afin d'améliorer la lisibilité et d'attirer l'attention..

Répondre à l'environnement de l'utilisateur

Au fur et à mesure que vous testez différentes familles et tailles de polices, votre zone de contenu devra s'adapter en conséquence. L'unité standard que je colle est ems car ils peuvent facilement redimensionner en fonction de l'espace disponible et de la résolution de l'écran. Ceci optimise les performances du côté utilisateur, ce qui est le plus important..

Mais lorsque vous avez un contenu aussi flexible, votre mise en page est sujette à des résultats erronés. Le contenu de votre pied de page ou de votre barre latérale peut être déséquilibré ou déséquilibré dans certains navigateurs. Vous pouvez également avoir des difficultés à aligner des images ou d’autres formes de support dans votre texte principal. Si vous avez besoin d'une mise en page de style fixe, il existe d'autres alternatives à l'utilisation de ems, mais essayez les deux pour voir laquelle vous préférez..

N'oubliez pas que des largeurs fixes et des tailles de paragraphe verrouillent de nombreux paramètres de votre conception. Il est idéal pour les contenus comportant de nombreux effets esthétiques fixes - pensez à des images d’arrière-plan ou à de nombreux widgets de barre latérale. Il s'agit également d'un processus simple pour créer une zone de contenu fluide dans la colonne de gauche avec des barres latérales fixes à droite..

Style basé sur le contexte

Quelques autres astuces CSS vraiment bien nettes ont été cachées du design traditionnel. Plus précisément, il existe des tendances copiées à partir de travaux d'impression qui peuvent être appliquées dans le contexte approprié.

De nombreux concepteurs Web n'ont même jamais utilisé la propriété CSS text-indent. Vous fournissez une valeur pour indenter la première ligne de tout paragraphe visé par cette règle. Les unités suivent les options de texte standard telles que les pixels, les points, les em, les pourcentages… Ce n'est certainement pas une tendance que vous trouverez dans la plupart des blogs. Mais cela donne un bon rythme de page lors de la lecture de gros blocs de texte.

Il existe un autre type de sélecteur CSS connu sous le nom de pseudo élément. Cela peut cibler une partie spécifique de tout sélecteur de contenu. Le pseudo sélecteur de première lettre CSS3: est idéal pour créer des styles sophistiqués sur des paragraphes importants. Vous pouvez égayer la lettre d’ouverture de chaque paragraphe - semblable à un livre de contes assez narratif - en utilisant des caractères gras, en italique ou même en changeant de police. Découvrez ce bel exemple de lettrine qui inclut du code CSS supplémentaire que vous pouvez utiliser..

Jouer avec l'espacement des lettres

Je suis sûr que beaucoup d’entre nous ont entendu parler du terme suivi mais n’avaient jamais réalisé que c’était la même idée que la propriété d’espacement des lettres CSS. Ces deux concepts ne font qu'un, liés entre la typographie imprimée et numérique. L'unité concerne l'espace entre les lettres d'une même ligne de texte. C'est un très bon effet à appliquer sur les en-têtes et même certains blocs de contenu plus petits au sein de votre site..

Il est important de ne pas confondre les termes espacement des lettres et crénage. Les deux sont liés à la typographie et à la distance entre les lettres. Cependant, le crénage fait spécifiquement référence à la distance entre 2 lettres individuelles d'un mot. La propriété d'espacement des lettres s'appliquera à un élément entier de texte, que ce soit un mot ou un paragraphe ou un en-tête ou un lien d'ancrage. Gardez cela à l'esprit lorsque vous jouez avec de nouvelles idées de styles.

J'utilise souvent quelques pixels / points d'espacement des lettres dans les en-têtes avec toutes les majuscules. Cela sépare les caractères individuels avec un espace supplémentaire et apparaît également comme un très défini “titre” Regardez. L'espacement négatif des lettres fonctionne également très bien dans le bon contexte. Je m'en tiens généralement à des unités plus petites, peut-être -0,03em ou -0,1em au plus.

Combinaison et correspondance de polices

Les concepts de conception derrière la typographie Web sont certainement une forme d'art, pas tellement de science. Il existe des directives que vous pouvez suivre, mais il n'y a pas de règles inébranlables auxquelles vous êtes limité. Cela signifie que vous avez une énorme liberté pour expérimenter le mélange et la correspondance des différentes polices auxquelles vous avez accès..

De loin, la combinaison de polices la plus populaire comprend une division serif / sans-serif pour le contenu de l'en-tête et du paragraphe. J'aime changer les deux, mais le plus souvent, je vais utiliser des polices empattées dans les sections d'en-tête. Les marques et les traits supplémentaires sur chaque lettre les rendent plus flatteuses que le texte de page dominant..

De plus, les polices sans empattement sont plus propres et plus faciles à regrouper en phrases. Cela ne veut pas dire que les polices empattées ne fonctionneront pas dans les paragraphes. En fait, il y a beaucoup d'excellents exemples! Mais un concept peu connu appelé x-height est d’une importance cruciale pour distinguer la complexité d’une police de caractères. En examinant la base de quelques mots, vous découvrirez comment de telles polices “s'intégrer” avec l'un l'autre.

Il convient également de noter l'importance de l'espace entre ces différents éléments. Vous utiliserez probablement 2 ou 3 styles d'en-tête différents, donc chacun d'eux aura une apparence différente. J'ai tendance à garder mes éléments h2 / h3 un peu plus près du bloc de paragraphe suivant, car cela implique une corrélation entre le contenu..

Cette corrélation est particulièrement utile lorsque vous utilisez deux polices de caractères complètement différentes, l'une à côté de l'autre. Je ne recommande pas plus de 3 familles de polices différentes par ensemble de contenu. Après trop de personnalisations, vos mots sont mélangés et la page entière apparaît comme un mélange de polices mal interprétées..

Conclusion

J'espère que ces concepts permettront de mieux comprendre le sujet complexe de la typographie numérique. En tant que designer, il peut être difficile d'entrer dans le travail, surtout si tout le sujet vous est étranger. Mais continuez à étudier et assurez-vous de pratiquer tout un tas!

Prochaine semaine: Restez à l'écoute car nous examinerons certains outils et ressources utiles pour une meilleure typographie web.

Plus…

Voici plus de messages liés à la typographie:

• Vitrine de conceptions Web avec une belle typographie
• Une meilleure typographie pour les sites Web modernes
• Guide rapide de la typographie: apprendre et être inspiré