Pour les typographies sur le web, vous pouvez utiliser les typographies que vos visiteurs possèdent sur leur ordinateur, ou bien des polices de caractères que vous embarquez vous même via des services externes comme Google fonts et autre.

L’avantage des typos déjà existantes sur le poste client : aucun chargement additionnel (c’est déjà sur le poste). Les inconvéneits : en fonction de l’OS (windows, linux, mac…), vous ne les aurez pas forcément toutes.

Si néanmoins vous souhaitez faire appel à ces typographies et ne pas avoir recours à des services externes (par exemple pour des sites Intranet coupés du web extérieur, ou simplement pour des questions de rapidité / simplicité, ou bien encore si vous avez réussi à tuer votre designer), voici 6 familles de typographies qui sont considérées « web safe« . C’est à dire que ces typographies pourront être utilisées sans trop de risque et avoir un rendu assez similaire sur la majorité des OS et navigateurs récents.

Je vous les regroupe en 3 familles, pour vous simplifier la tache : sans-serif, serif et monospace.
Chaque famille comporte en dernier recours la typo qui pourra se trouver par défaut sur l’OS en question et qui correspondra à votre besoin.

Typos web safe sans serif

Ces fonts sont sans empattement, assimilables à des typographies « baton », sans fioriture :

font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

Typos web safe serif

Ces fonts comportent des empattements

font-family: Times, "Times New Roman", "Liberation Serif", FreeSerif, serif;
font-family: Georgia, "DejaVu Serif", Norasi, serif;

Typos web safe monospace

Chaque caractère prend la même largeur/heuteur. Pratique pour afficher du code par exemple.

font-family: Courier, "Courier New", FreeMono, "Liberation Mono", monospace;
font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace;