Typographie Web : Établir un système typographique solide

La mise en place de la typographie pour tout nouveau projet est toujours une tâche complexe. Il existe littéralement des centaines de variables modifiables et il est très facile de passer des heures interminables à ajuster la taille, la hauteur des lignes, les marges et les poids. La meilleure façon de sauver votre santé mentale est d’avoir un système de conception qui peut générer des réponses rapides à la plupart des petites questions, ce qui vous permet de vous concentrer sur les décisions « globales ».

Comme les lecteurs consommeront plus de corps de texte que toute autre taille de texte, notre première décision critique en matière de typographie consiste souvent à définir la taille de la police du corps pour notre mise en page par défaut (mettons de côté la conception réactive pour l’instant). Pendant de nombreuses années, 16 pixels ont été considérés comme la taille corporelle par défaut du Web.

Cependant, avec les écrans plus grands d’aujourd’hui, les sites contenant beaucoup de texte tels que les blogs et les services d’actualités choisissent généralement des tailles de police de corps de 18 à 21 pixels. Les applications de médias sociaux et de commerce électronique qui utilisent des unités d’interface utilisateur plus occupées et plus modulaires ont eu tendance à utiliser des polices de corps de 14 pixels à 16 pixels. Évidemment, ce sont des tendances générales, et non des règles strictes, mais vous pouvez voir ces tendances générales dans la liste ci-dessous.

Tailles de police typiques du corps

N’oubliez pas que ces grandes propriétés Internet effectuent de nombreux tests utilisateur, alors réfléchissez à la place de votre application par rapport à cette liste. Lorsque vous avez défini vos tailles de texte de base, testez-les sur de vrais écrans, tablettes et téléphones jusqu’à ce que vous en soyez satisfait comme point de départ.

Mise à l’échelle de votre type

Donc, maintenant vous avez défini la taille de la police de votre corps. Comment décidez-vous de la taille de vos titres, titres de section, sous-titres, listes et citations ?

Pour moi, la réponse était, « Umm… ajustez-le jusqu’à ce qu’il ait l’air… un peu correct.« J’augmentais un cap, j’augmentais un peu le poids, je le poussais d’un pixel vers le haut,… je le poussais vers le bas,… et je le rehaussais à nouveau. Franchement, c’était épuisant, car il y avait tellement de petites décisions capricieuses et très peu de réponses totalement fausses.

Mise à l’échelle des types -appelé quelques fois mise à l’échelle modulaire – permet d’utiliser Facile maths à te donner Facile réponses typographiques. Il nous permet de définir un seul rapport de mise à l’échelle pour générer toutes nos tailles de police tout en les gardant en harmonie. C’est comme une échelle musicale pour la taille des caractères.

Mise à l’échelle des types en pratique

Commençons avec une taille de police de corps de 18px. Cela rend notre taille de paragraphe par défaut 1em (ou 18px):

body{font-size: 18px;}
p   {font-size: 1em; /* (or 18px) */ }

Je vais définir une échelle de type de 1.25. Pour calculer mon h5 taille de la police, je multiplie simplement la taille de la police de mon paragraphe par 1.25. que c’est 1em * 1.25ou 1.25em:

h5 = p * 1.25 = 1.25em

Notre h4 les titres seraient les h5 taille multipliée par 1.25 (1.25em * 1.25) ou 1.563em. La poursuite du processus nous donne quelque chose comme ceci :

/* Using a type scale of 1.25 */
h5 {font-size: 1.25em;}  /* 22.50px */
h4 {font-size: 1.563em;} /* 28.13px */
h3 {font-size: 1.953em;} /* 35.16px */
h2 {font-size: 2.441em;} /* 43.95px */
h1 {font-size: 3.052em;} /* 54.93px */

Si je décidais que mon h1 les titres semblaient un peu surdimensionnés à cette échelle, je pouvais réduire mon échelle de caractères à 1.2 pour obtenir ce résultat :

h5 {font-size: 1.2em;}   /* 21.60px */
h4 {font-size: 1.44em;}  /* 25.92px */
h3 {font-size: 1.728em;} /* 31.10px */
h2 {font-size: 2.074em;} /* 37.32px */
h1 {font-size: 2.488em;} /* 44.79px */

D’accord, j’ai donc besoin d’une calculatrice de poche pour dimensionner mon texte ? Heureusement, non. Il existe d’excellents outils qui vous permettent de modifier et de tester les échelles de type dans le CSS généré en temps réel. Mon préféré est celui de Jeremy Church Type-scale.com (ci-dessous), un outil qui vous permet de tester rapidement différentes échelles de type et de générer du CSS fonctionnel. Il y a même une mise en page factice sur le panneau de droite pour tester votre travail et une option d’exportation CodePen. C’est une excellente base pour votre typographie CSS.

Un rapport d’échelle de type unique fonctionne-t-il pour toutes les tailles d’appareil ?

La réponse est non, souvent non. Nous pouvons apprendre des formats d’impression traditionnels ici. Si vous comparez la typographie d’un journal typique à celle d’un roman de poche classique (ci-dessous), vous remarquerez des différences intéressantes au-delà des formats de papier évidents.

Bien que leurs tailles de police de corps puissent être assez similaires, il existe une grande variation dans la taille des titres dans le journal. Le bon sens vous dit ces gros titres dans Les temps ne vont tout simplement pas convenir comme titres de chapitre pour Le magicien d’Oz. En règle générale, les formats plus petits (tels que les téléphones et les romans) nécessiteront des échelles de caractères moins profondes.

Notez que cette différence dans les échelles de type n’a pas besoin d’être grande. Comme le montre l’image ci-dessus, une petite augmentation de l’échelle des caractères – de 1.125 jusqu’à 1.25 — se propage à travers l’échelle pour générer un en-tête de niveau supérieur beaucoup plus grand. Alors que h1 titre semble bien sur un ordinateur portable, il mâcherait beaucoup trop de biens immobiliers sur un appareil mobile.

En bref, il est sage d’utiliser CSS @media requêtes pour servir deux échelles de type : une échelle de type plus raide pour les grands écrans et une échelle de type plus compressée pour les écrans plus petits. Nous aborderons cela plus tard dans le projet.

Donc, maintenant que nous avons un processus fiable et reproductible pour mettre à l’échelle le type dans nos conceptions, regardons les espaces entre ce genre.

Qu’est-ce qu’un rythme de base vertical ?

Rythme de base vertical — parfois appelé le mesure verticale — est une grille de lignes horizontales que vous pouvez utiliser pour « accrocher votre typographie ». Ce n’est pas sans rappeler les manuels scolaires lignés en bleu dans lesquels beaucoup d’entre nous ont appris à écrire.

L’astuce consiste à faire en sorte que vos unités de type plus grandes s’intègrent dans la même grille que votre corps de texte. Dans une simple lettre manuscrite (ci-dessous), EG Webb autorise une ligne supplémentaire pour sa signature. Il utilise probablement un rythme de base sans même savoir comment il s’appelle.

Dans Les éléments du style typographique appliqués au WebRichard Rutter décrit le rythme de base comme ceci :

Les titres, les sous-titres, les blocs de citations, les notes de bas de page, les illustrations, les légendes et autres intrusions dans le texte créent des syncopes et des variations contre le rythme de base des lignes régulières. Ces variations peuvent et doivent ajouter de la vie à la page, mais le texte principal doit également revenir après chaque variation précisément sur le rythme et en phase.

Comment ça marche sur le web ? Regardons un exemple concret. L’excellent Colossal magazine utilise une disposition très ouverte et aérée, mais il parvient toujours à se sentir fort et structurel. Comment fait-il cela ? Il s’avère que si l’on superpose un 21px quadrillage vertical sur l’ensemble du tracé (voir ci-dessous), on voit émerger une structure jusqu’alors cachée. Pour cet exemple, je vais appeler une ligne de cette grille une « unité ».

Vous remarquerez que :

• la marque du site s’intègre parfaitement dans une boîte de cinq unités de haut
• la navigation principale est haute de trois unités
• les titres des articles ont une hauteur de deux unités
• la navigation secondaire et les liens sociaux sont d’une unité de haut

En fait, la plupart des éléments de l’interface utilisateur « se suspendent » à cette grille sous-jacente comme des chaussettes épinglées sur une corde à linge invisible. Même si nous ne pouvons pas voir la grille sous-jacente, nous en sommes conscients à travers un sentiment d’équilibre et d’harmonie. Il se sent juste bien.

Notez que nous ne parlons pas seulement de la taille de la police, mais plutôt tout l’espace occupé par le texte — y compris la hauteur de ligne et les marges. Ainsi dans le Colossal exemple, le titre de l’article aurait une hauteur de ligne de 42pxou deux unités pour chaque ligne.

Cependant, vous remarquerez que pas tout l’élément est verrouillé sur cette grille. Les concepteurs ont choisi de décaler des éléments comme les photos de la grille. C’est bien aussi. La grille est un excellent point de départ, pas la loi martiale.

Utilisation des grilles de mise en page dans vos conceptions d’interface utilisateur

La plupart des outils de mise en page graphique modernes (tels que Sketch, Figma ou Adobe XD) facilitent l’ajout d’une ligne de base verticale à n’importe quelle toile/cadre. Dans cet exemple Figma (voir ci-dessous), j’ai sélectionné le cadre du document et utilisé le + pour ajouter des lignes et des colonnes séparées dans le panneau Grille de mise en page.

Ces couches de grille peuvent être activées et désactivées à l’aide de l’icône en forme d’œil. Je trouve qu’avec une grille en place et l’activation de l’alignement sur la grille, il devient simplement plus facile de dimensionner les éléments avec la grille que sans. Et cela vous facilite la vie.

Il existe même un outil pour vous aider à travailler sur le CSS. Gridlover.net (ci-dessous) est un excellent outil gratuit qui vous permet d’expérimenter différentes tailles de police de base, hauteurs de ligne et mises à l’échelle de type, le tout verrouillé sur une ligne de base verticale. Si vous essayez d’ajuster l’une des hauteurs de ligne ou des marges sur le panneau CSS de droite, vous remarquerez que le nombre ne change que d’une « unité de grille » complète à chaque fois.

Vous remarquerez peut-être également que l’outil évite d’utiliser le rembourrage CSS dans sa typographie. J’ai trouvé que c’était généralement une bonne politique lorsque je travaillais avec un système de ligne de base verticale. Utilisez le rembourrage librement sur vos unités de conteneur, mais jamais sur la typographie. Même les boutons de texte peuvent avoir une hauteur avec un paramètre de hauteur de ligne plutôt qu’une hauteur CSS ou un rembourrage.

Amoureux de la grille non seulement écrit du CSS utile, mais cela m’a vraiment aidé à comprendre comment la ligne de base verticale et la mise à l’échelle du type peuvent fonctionner dans le monde réel. Je pense que c’est un excellent endroit pour commencer votre typographie CSS.

Archétype est un autre outil conçu pour vous aider à créer des systèmes de type intégrés bien planifiés. Il offre des commandes pour l’échelle de type et le rythme de base dans une interface utilisateur très bien conçue. Il vous encourage même à définir différentes échelles de type pour mobile et ordinateur de bureau. Je crois que c’est l’outil le plus sophistiqué dans ce domaine.

La seule mise en garde à Archetype est qu’il en coûte actuellement 59 $ par an pour déverrouiller l’option « Exporter en CSS ». C’est clairement une dépense plus importante que Gridlover (gratuit), mais si vous passez beaucoup de temps à créer des systèmes de type, cela pourrait vous faire économiser beaucoup de temps (et d’argent). Archétype est très bien.

Le rythme de base vertical est un outil – pas une religion

Les lignes de base verticales sont un outil très utile, mais elles ne doivent pas devenir l’objectif final de votre conception. Je dois admettre qu’il fut un temps où je passais trop de temps à essayer de plier chaque élément de la page pour obéir à mes puissantes règles de grille. J’étais en train de lutter contre les pourcentages et les marges typographiques, et « atteindre la grille » est devenu un objectif en soi, plutôt qu’un simple outil pour m’aider à mieux concevoir.

Ce n’est ni amusant ni utile.

Aujourd’hui, je pense qu’il est préférable de considérer les lignes de base verticales comme une grosse caisse forte dans un groupe – un rythme régulier qui aide à mesurer l’espace dans lequel le reste du groupe peut jouer. Configurez un joli backbeat que tout le monde peut ressentir, mais n’ayez pas peur de lâcher de petites fioritures décalées. Souvent, ils peuvent ajouter de l’énergie et de la saveur à une composition (visuelle ou musicale).

Personnellement, j’aime commencer avec une grille solide. S’il y a des espaces entre les titres ou les paragraphes, il peut aussi bien s’agir d’une, deux ou trois « unités verticales » entières, plutôt que 1.3 ou 2.75 unités. Et cela invariablement se sent immédiatement équilibré et harmonieux.

De même, votre image de héros pourrait tout aussi bien être exactement 12 unités de hauteur, plutôt que 11.8 ou 12.3, car maintenant le bord inférieur de l’image est plus susceptible de s’aligner correctement avec le bord inférieur de tout texte qui le borde. C’est « l’auto-nettoyage ».

Mais si, d’un autre côté, la légende de vos images semble trop spatiale lorsqu’elle est répartie sur des hauteurs de ligne de 25 pixels, c’est bien. Oubliez la grille là-bas. Faites en sorte qu’il ait l’air bien.

Les plats à emporter

En fin de compte, la plupart des travaux de conception ne sont qu’une longue, longue liste de réponses à des questions « pourquoi ».

• Pourquoi avez-vous créé ce titre principal de 49 pixels de haut ?
• Pourquoi cette marge inférieure est-elle de 17 pixels ?
• Pourquoi le h3 avoir une hauteur de ligne de 1.7778?

Etc.

Il y a potentiellement des centaines de ces petites questions dans même un petit projet. Et vous avez probablement assez d' »instinct naturel de designer » pour y répondre éventuellement. Le problème c’est que c’est épuisant.

Cependant, si vous pouvez proposer un système reproductible qui fournit des réponses viables à la plupart des petites questions ennuyeuses, vous pouvez conserver votre instinct de concepteur pour les questions plus importantes et plus importantes.

Ce qui est généralement la partie amusante de toute façon.

Articles Liés

Extrait de: Les principes d’une belle conception Web : 4e édition