Typographie

Police de caractères

• Une police = un set de glyphes ou de caractères

Optimisation d'une police

• Optimiser la taille du fichier avec unicode-range
• Subsetting une font : diviser la font en différents fichiers, chacun qui contient un sous set de glyphes.
• Utiliser une font multi script
• Ou utiliser FontTools (outil Python)

Rythme vertical du texte

Rythme vertical = répétition de l'espace sur l'axe vertical. On souhaite généralement une consistance dans l'espacement et les hauteurs de chaque ligne de texte, et entre les paragraphes (ainsi que les contenus enrichis qui sont insérés dans un paragraphe, une image,...)

Espacement intra-paragraphe

(= espacement entre les lignes d'un paragraphe)

• Chaque font a : une font-size, un leading, et une baseline qui lui est propre
• Leading = La plupart des fonts ont un espace au dessus du texte automatiquement, pour avoir de la place pour les caractères spéciaux, accents,... => donc quand on met un texte de taille 10px, la hauteur par défaut ne sera pas forcément égale à 10px, mais souvent un peu plus
• line-height
  • permet de normaliser et contrôler la hauteur de ligne
  • prend une valeur sans unité
  • la line-height inclus la hauteur de la font + l'espacement inclus pour les caractères spéciaux (le leading)
  • Exemple : avec une line-height: 1.5; (= 1.5 x font-size), pour une font-size de 1em on aura une line-height de 1.5em
• line-height: normal => pas prédictible, car on prend en compte le fait qu'on doive potentiellement faire un fallback sur une autre font, et du coup il fait en sorte que la line box soit assez grande pour tous les caractères qui pourraient rentrer dedans. Pas terrible pour le "rythme", mais bien si on veut être sûr que les lignes ne se chevauchent jamais.

Espacement inter-paragraphe

Pour gérer les espacements entre les paragraphes, on peut :

• Ajouter des margins
• Utiliser l'unité line-height lh (attention expérimental, pas encore supporté par safari/firefox)

Alignement vertical

• On peut venir aligner les différents textes sur la baseline.
• Il existe plusieurs baselines différentes (au moins 6) : alphabetic (la plus connue, juste en dessous de la lettre), math (centrée sur les symboles mathématiques tel que le + et -) , middle, over-edge (tout en haut)
• Propriété CSS dominant-baseline : qui permet de dire quel baseline je souhaite utiliser (à ne setter qu'une fois sur le root)
• Propriété CSS vertical-align: <'alignment-baseline'> || <'baseline-shift'> : par défaut l'alignement vertical correspond à la baseline par défaut, puis décalée.

Gérer les tailles de fonts en CSS

• La meilleure "font-size" par défaut est celle qui n'est pas définie (= il ne faut pas définir de taille de police de base.)
  • Si on est obligé de setter une taille de police (linter,...), plutôt mettre une font-size: 100%;
  • L'avantage = toujours hériter de la taille de font préférée de l'utilisateur. (Celle qu'il choisit dans son navigateur ou système)
• Toutes les autres tailles de font doivent ensuite utiliser des unités relatives, idéalement en n'étant pas plus petites que la taille par défaut.

Sources

• CSS Line Layout and Vertical Rhythm (CSS Day 2019) d'Elika J. Etemad (fantasai)