5 polices pour agrémenter votre typographie

Comment mettre en valeur les titres et accroches de son site internet ? J’ai décidé de partager avec vous 5 des polices qui m’ont le plus séduit lors de la refonte de mon site. Au passage, on en profitera pour parler de l’utilisation d’@font-face…ça mange pas de pain.

Les critères de sélection

Première contrainte : l’usage. En effet mon objectif était de mettre en valeur mes titres et mes phrases d’accroches, j’ai donc fait mes tests sur une taille de police minimum de 20 pixels, qui correspond à la taille de mes titres de niveau 3 (H3). Je descend assez rarement en dessous.

Il a ensuite été nécessaire de filtrer les polices compatibles avec la majorité des navigateurs (Firefox, Chrome, Safari, Opera et Internet Explorer 6, 7 et 8 ainsi que les navigateurs mobile de l’iPhone et l’iPad). Pour cela je devais trouver une police de caractère comprenant les formats TTF, EOT, WOFF et SVG. Je vous expliquerai pourquoi plus bas.

Enfin, j’ai affiné ma sélection en choisissant des polices concordantes avec ma police de corps de texte (Arial,Helvetica,Verdana,sans-serif).

La méthode @font-face

Différentes méthodes existent pour intégrer de nouvelles polices à votre site. En créant une image (avec un attribut « alt » renseigné), mais au delà de la lourdeur de la procédure, c’est celle de vos pages qui risque de grimper.

Il existe aussi des scripts dédiés, sIFR et Cufon en tête…

La méthode que je préfère a été remise au goûts du jour grâce à l’émergence de CSS 3, il s’agit de @font-face.

Le principe est assez simple. Puisque vous ne pouvez garantir que l’internaute possède votre police sur son terminal (ordinateur, portable, etc…), vous l’embarquez sur votre serveur.

Pour que votre police soit restituée correctement sur la majorité des navigateurs, vous aurez besoin de plusieurs formats :

• Le True Type Fonts (TTF) : Pour la plupart des navigateurs, sauf IE et iPhone,
• Le Embedded OpenType (EOT) : pour Internet Explorer,
• Le Web Open Font Format (WOFF) : une version compressée de la police, qui se veut un futur standard,
• Le Scalable Vector Graphics (SVG) : pour iPhone et iPad.

Il vous faut donc copier ces fichiers sur votre serveur, soit à la racine de votre feuille de style soit dans un sous répertoire intitulé « police » ou « fonts ». Ensuite c’est assez simple, dans votre feuille de style (styles.css) vous déclarez le chemin d’accès aux polices sur votre serveur.

Vous pouvez en déclarer plusieurs mais je déconseille d’en utiliser plus de 2 si vous les hébergez sur votre serveur, cela alourdit le temps de chargement de la page. Ci dessous un code « pare-balles » pour que votre police soit interprétée convenablement par tous les navigateurs. On dira merci à Smashing Magazine

	@font-face {
	font-family: 'MaPolice';
	src: url('MaPolice.eot'); /* Mode de compatibilité IE9 */
	src: url('MaPolice.eot?iefix') format('eot'), /* IE6-IE8 */
	     url('MaPolice.woff') format('woff'), /* Navigateurs modernes...sans IE :x */
	     url('MaPolice.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('MaPolice.svg#svgMaPolice') format('svg'); /* Legacy iOS */
	}

Récapitulons : nous attribuons un nom à notre police avec « font-family: », il est conseillé d’utiliser le nom original de votre police, mais vous pouvez tout aussi bien l’appeler « toto » ou « tata ».

Nous appelons ensuite le format EOT en premier pour ne pas froisser notre ami IE et une deuxième fois pour plaire à toutes les versions de ce navigateur. Ensuite, on déroule tous les formats en précisant bien au navigateur de quel format on parle.

Les polices sont déclarées, il ne reste plus qu’à les appliquer à un élément ou à une classe. Dans notre exemple, nous allons affecter la police PT Sans aux titres H1, H2 et H3 et la police Lobster à une classe « accroche » :

h1, h2, h3 {font-family: 'PT Sans', Arial, Helvetica, Verdana, sans-serif;
}
p.accroche {font-family: "Lobster1.3Regular", Georgia, Times New Roman, serif;}

Vous noterez que nous déclarons des polices de « secours ». En effet, si pour une raison ou pour une autre votre police n’est pas interprétée, il faut indiquer au navigateur par quelle police la remplacer. Voilà pour la partie technique. Maintenant passons aux résultats.

Quelques exemples

PT Sans

• PT Sans sur Font Squirrell
• PT Sans sur Google Web Font
• PT Serif sur Font Squirrell
• PT Serif sur Google Web Font

Bevan

• Bevan sur Font Squirrell
• Bevan sur Google Web Font

Lobster

• Lobster sur Font Squirrell
• Lobster sur Google Web Font
• Une alternative intéressante mais à tester : Marketing Script

Crimson text

• Crimson Text sur Font Squirrell
• Crimson Text sur Google Web Font

Droid Sans

• Droid Sans sur Font Squirrell
• Droid Sans sur Google Web Font
• Droid Serif sur Font Squirrell
• Droid Serif sur Google Web Font

Pour en savoir plus

• Trouver des kits de polices gratuits (y compris pour un usage commercial) : Font Squirrel
• Google propose un service du même acabit : Google Web Font
• Un excellent article sur pompage.net traitant de la typographie (justification, interlignage, emphase, échelle, etc…) : consulter l’article
• Toujours dans l’excellence, un article très détaillé d’Aurélien sur son blog All For Design : test de lisibilité des polices de Google.
• Une mine d’information sur Web design, lisibilité, typographie et rédaction web

Vous avez d’autres sources, des polices exotiques qui vous plaisent (par pitié pas de Comic Sans MS) ? N’hésitez pas à les partager.