Design numérique

Une courte introduction à la gestion typographique en web.

Les fonts par défaut

Lorsqu’aucune font n’est spécifiée, est appliquée à tous les éléments d’une page html une typographie dite par défaut. Il s’agit toujours de la typographie serif (avec empattements) par défaut, qui est définie non pas par le navigateur mais par le système d’exploitation. Ainsi, suivant les OS et les versions de ces OS, la font appliquée change. Par exemple, de nombreuses verisons de Mac OS utilisent le Times, alors que la distribution Debian de Linux applique la Deja Vu.

Plusieurs fonts par défaut sont définies par le système d’exploitation en plus de la serif. Il est possible de les appliquer grâce à la commande font-family. Celles-ci accepte d’autres types génériques, tel que sans-serif, monospace, fantasy... La propriété font-family est également utilisée pour donner un nom utilisable dans la feuille de style à une fonte importée, ainsi que pour appliquer cette font à un élément (cf partie suivante).

body{

    font-family: sans-serif;
}

Il est également possible d’utiliser les types génériques comme fallbacks, solutions de rechange, au cas ou la font importée ne chargerait pas pour une quelconque raison, en la séparant par une virgule.

body{

    font-family: "custom", sans-serif;
}

Import des fonts dans le fichier css

Pour pouvoir utiliser une font dans un site web, il faut commencer par intégrer les fichiers sources au contenu du site, généralement dans un dossier voisin des feuilles de style. On ajoute généralement trois formats du même fichier font, ce qui permet d’assurer la lecture de la typographie par l’ordinateur récepteur du site web. Les formats de type Woff sont les plus adaptés à l’utilisation de typographies sur le web, en raison de leur faible poids qui garantit un chargement rapide. Ceux-ci sont le woff2 (recommandé par W3C depuis 2018) et le woff (recommandé par le W3C depuis 2012). Tous deux sont supportés par 96% des navigateurs selon le site caniuse.com, ce qui peut être considéré comme suffisant. Néanmoins, il est possible de garantir un peu plus le support, en ajoutant un fichier de type Open Type, avec un format otf ou ttf (plus ancien, et toujours utilisé dans le contexte de l’imprimé).

La commande css src, présente dans l’appel d’une typographie, permet de spécifier plusieurs fichier-sources. Concrètement, le navigateur téléchargera le premier format qu’il supporte, selon l’ordre spécifié par le développeur. C’est ce qu’on appelle un fallback ou solution de rechange. Il faut donc bien veillé à ajouter les liens vers les fichiers de fonts dans l’ordre de préférence, du plus léger au plus lourd.

site/
    assets/
        css/
            reset.css
            style.css
        fonts/
            custom-font.otf
            custom-font.woff
            custom-font.woff2
    index.html

@font-face{

    font-family: "custom"; 
    src:    url("../fonts/custom-font.woff2") format("woff2"),
            url("../fonts/custom-font.woff") format("woff"),
            url("../fonts/custom-font.otf") format("opentype");
}

body{

    font-family: "custom";
}

Les propriétés typographiques

Plusieurs propriétés css permettent de gérer la typographie.

• font-family, applique une font (générique ou non) à un élément.
• font-size, applique un corps à un élément.
• line-height, applique un interlignage à un élément.
• font-features-settings, permet d’appliquer des features Open Type (utiliser ou non des ligatures, choisir le type de chiffres, désactiver le kerning...)
• font-variation-settings, permet de manipuler des fonts variables.
• webkit-font-smoothing, moz-font-smoothing, font-smooth permettent d’appliquer l’anti-aliasing, c’est-à-dire de ne pas rendre la limite des lettres au pixel près (le comportement par défaut) mais d’appliquer un dégradé de gris aux pixels environants, lorsqu’un vecteur traverse un pixel. Lorsqu’elle n’est utilisée, les fonts paraissent plus grasses qu’elles ne sont, car les pixels traversés par les vecteurs deviennent entierement noirs. Fonctionne seulement sur Mac OS selon CanIUse.
• letter-spacing, permet de modifier l’interlettrage.
• font-stretch, permet de condenser ou d’étendre un caractère brutalement.

Gestion des paragraphes & micro-typo

• text-align, permet de ferrer un texte à droite, à gauche, ou de le centrer.
• text-wrap, contrôle la manière dont les drapeaux sont crées par le navigateur. Limité, et pas complètement supporté (et coûteux en calcul).
• orphans, permet de définir un nombre minimal de mots sur la dernière ligne de texte d’un élément. Pas supporté par tous les navigteurs, voir CanIUse.
• word-break, permet de briser un mot trop long pour la taille du bloc sur plusieurs lignes. Ne crée pas de césures, brise le mot sans caractère de liaison. Voir le guide MDN Wrapping and Breaking Text pour plus d’information sur la gestion des mots longs.
  hyphens, permet de gérer les césures en html (automatiquement, manuellement grâce au caractère de césure ­ ou pas du tout).
• word-spacing, permet de modifier la taille du caractère espace.

Les caractères spéciaux

En web, ou tout du moins en "web dur", il n’y pas de remplacement automatique des caractères comme sur InDesign. Il faut donc faire attention à bien utiliser les bons glyphes, ce qui n’est pas toujours le cas à cause de nos chers et imparfaits claviers. Quelques glyphes à risque&nsbp;:

1. Les apostrophes. Veiller à bien avoir les bons glyphes en place des apostrophes et pas des guillemets droits simples ouvrants, qui sont par défaut le glyphe utilisé par les claviers.
2. Les guillemets. Pareil pour eux, les glyphes par défaut du clavier sont les guillemets droits doubles, qui ne sont pas les guillemets français.
3. Les e-dans-l’o.

Les caractères d’espaces

Commençons par un caractère très important: l’espace insécable. En html, l’espace insécable correspond à la chaine de caractères suivante :   (nbsp == non-breaking space). Cette espace possède la même taille que l’espace standard.

En html, il est théoriquement possible d’utiliser tous les types d’espaces. Ici, quelques espaces très utilisés :

• L’espace insécable >  
• L’espace fine >  
• L’espace très fine >  
  
  

La liste complète des caractères d’espace et leurs valeurs html est disponible ici. Note : pour qu’un certain type d’espace fonctionne, il faut avant tout que le caractère soit défini dans la font.

Malheursement, tous les espaces dont la taille diffère de celle de l’espace classique ne sont pas insécables, ce qui signifie qui faut ajouter une balise inline autour de l’espace, à lauqelle on applique la propriété css text-wrap: no wrap; pour le rendre insécable.

Bonjour<span style="white-space: no wrap">&thinsp;</span>!

Ici, une discussion stackoverflow concernant une méthode alternative (et bien plus élégante) pour rendre insécable les autres types d’espace. Malheursement, pas complètement supportée (mais à garder en tête).

Quelques conseils de gestion typographique en web (et ailleurs)

1. Commencer par définir le corps de labeur et l’interlignage. L’appliquer au body (et ainsi à tous les éléments enfants).
2. Pour l’interlignage des corps de titrages ou de notes supplémentaires, toujours utiliser des multiples de l’interlignage du corps de labeur. L’idée est de maintenir une grille de ligne de base. Les corps eux, n’ont pas forcément à être proportionnels. Les régler à l’œil.
3. Même chose pour les marges qui séparent les blocs: utiliser des mutltiples de la valeur d’interlignage de labeur.
4. Pour les formats d’écrans très grands (au-dessus de 2000px), associer les corps à la largeur de la fenêtre.
5. Ne pas utiliser la justification en web, à moins de vouloir créer un effet "bad design on purpose". Les algorithmes de justification des navigateurs ne sont pas très performants, et surtout, étant donné que la taille de l’écran receveur n’est pas connue, il est impossible de faire les réglages typographiques appropriés.
6. Veiller à conerver des longueurs maximales de lignes agréables à lire.