[Webdesign] 21 fontes « sûres » pour le web


Les termes « Web Safe Fonts » ou en français « fontes sûres pour le web » désignent les fontes pour lesquelles il y a de grandes chances qu’elles soient installées sur une majorité de machines.

Autrement dit, en utilisant une « Web Safe Font » pour votre site, vous êtes quasiment sûr qu’elle sera affichée telle que définie, sur le navigateur d’une majorité d’internautes.

Car il faut savoir que toutes les fontes ne sont pas installées sur tous les OS. Il en existe des spécifiques sur les Mac, Linux et autres Windows. Si vous les utilisez, vous prenez le risque qu’elles ne puissent être affichées, et donc qu’elles soient remplacées par une autre.

 
Les feuilles de styles CSS définissent les types de fontes et leurs priorités dans l’utilisation :

font-family: Arial, Helvetica, Verdana, sans-serif;

Ici, la police Arial sera utilisée en priorité, puis si elle n’existe pas, Helvetica sera essayée, et enfin Verdana. En cas d’échec, une police sans-serif sera utilisée.

 
Voici une sélection de 21 fontes dites sûres pour le web.
 

Serif

Les fontes avec « sérifs » sont des polices dont les caractères présentent des empattements, de petites terminaisons pointues.

 
Georgia
font-family:’Georgia’, serif;
 

 
Palatino Linotype
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
 

 
Times New Roman
font-family: ‘Times New Roman’, Times, serif;
 

 
MS Serif
font-family: ‘MS Serif’, ‘New York’, sans-serif;
 

 
Garamond
font-family: Garamond, serif;
 

 
Bookman Old Style
font-family: ‘Bookman Old Style’, serif;
 

Sans-Serif

Les fontes sans sérifs comportent des caractères lisses et droits, sans empattements.

 
Verdana
font-family: Verdana, Geneva, sans-serif;
 

 
Arial
font-family: Arial, Helvetica, sans-serif;
 

 
ArialBlack
font-family: ‘Arial Black’, Gadget, sans-serif;
 

 
ArialNarrow
font-family: ‘Arial Narrow’, sans-serif;
 

 
Symbol
font-family: Symbol, sans-serif;
 

 
Impact
font-family: Impact, Charcoal, sans-serif;
 

 
Tahoma
font-family: Tahoma, Geneva, sans-serif;
 

 
Century Gothic
font-family: Century Gothic, sans-serif;
 

 
Lucida Sans Unicode
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
 

 
Trebuchet MS
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
 

 
MS Sans Serif
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
 

Monospace

Les fontes monospaces proposent des caractères dont la largeur est la même, quel que soit le caractère. très pratique pour maitriser l’espace.

 
Courier New
font-family: ‘Courier New’, Courier, monospace;
 

 
Courier
font-family: Courier, monospace;
 

 
Lucida Console
font-family: ‘Lucida Console’, Monaco, monospace;
 

Cursive

Les fontes cursives désignent les polices qui reproduisent l’écriture manuscrite.

 
Comic Sans MS
font-family: ‘Comic Sans MS’, cursive;
 
 
 
En utilisant l’une de ces fontes, vous avez 9 chances sur 10 (à la louche) que votre site s’affiche de la même manière, quel que soit l’OS.

Sinon, vous pouvez utiliser CSS3 et son fameux @font-face. Là plus de problème puisque la fonte est téléchargée directement sur votre ordinateur si vous ne l’avez pas. Pas contre, pour en profiter, il faut un navigateur compatible CSS3.

crédits : webhostingsearch