Typographies

Bien choisir ses polices : Standards et compatibles ? Ou bien exotiques et originales ?

La typographie est l’un des aspects essentiels de la direction artistique web, malheureusement elle se heurte à bien des contraintes : les polices ne sont pas standards suivants les utilisateurs et systèmes, il faut donc apprendre à composer avec les attentes du client, le souhait du DA et les impératifs techniques.

1 – Les polices standards

Les polices systèmes les plus utilisées, que l’on retrouve sur la majorité des machines Windows et Mac sont les suivantes :

A) POLICES SERIF LATINES
Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit

B) POLICES SANS-SERIF LATINES
MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica

Notre source ? Le W3C : http://www.w3.org/TR/CSS21/fonts.html#sans-serif-def

Ces polices ne sont toutefois pas implantées à 100% sur l’ensemble des machines PC & MAC, il convient donc de croiser ces informations avec la liste du site Code Style, qui répertorie précisément les installations de chaque police (exemple pour Windows : http://www.codestyle.org/css/font-family/sampler-WindowsResults.shtml )

Ceci permettra de définir une liste de polices, qui sera bien visible sur l’ensemble des systèmes.
Malheureusement ces polices systèmes restent sages et bien sobres, il existe heureusement des solutions pour des typographies plus exotiques.

2 – Utiliser des polices exotiques

Pour une police qui corresponde exactement à la charte du client, il faut souvent sortir des classiques pour mettre en place une typographie originale ! Cela se fait facilement avec le système CUFON : http://cufon.shoqolate.com/generate/

En passant par le service CUFON, vous allez générer un fichier Javascript à inclure sur votre site, qui comprendra la police de votre choix. Ce système permet de générer un texte accessible et lisible par les moteurs de recherche, idéal pour le référencement, contrairement aux alternatives qui génèrent des images ou du flash comme sIFR ou typeface.js .

3 – Dans le futur

A surveiller de près, la fonction @font-face de CSS3 qui permettra de définir de manière totalement transparente la police de son choix, sans limitation ! Il va falloir être patient, car le CSS3 n’est pas encore supporté par l’ensemble des navigateurs …
Plus d’informations sur l’utilisation des polices en CSS3 : http://www.w3.org/TR/css3-webfonts/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *