Du bon usage de la police

Du bon usage de la police

A la lecture de ce titre, vous penserez peut-être que je vais donner les trucs et astuces pour taper le plus vite possible le 17 sur votre téléphone. Il n’en est rien je vais tenter d’aborder de manière synthétique les différents usages des styles d’écriture dans un site web.

Les grandes familles de police de caractère.

  • Sans-serif : police sans empattement destiné à la lecture à l’écran,
  • Serif : police avec empattement destiné à la lecture papier,
  • Monospace : police permettant d’aligner les caractères de ligne destinée principalement à la présentation de données,
  • Cursive : police imitant l’écriture manuscrite,
  • Fantasy : police décorative.

Exemple de polices

Sans-serif : Polices sans empattement

  • Arial,
  • Helvetica,
  • ‘Lucida Sans’,
  • Verdana,
  • Geneva.

Serif : Polices avec empattement

  • Garamond,
  • ‘Times New Roman’,
  • Times,
  • Georgia.

Monospace : Polices à chasse fixe

  • ‘Courier New’,
  • Courier.

Cursive : Polices cursives

  • script

Fantasy :

  • ‘Arial Black’,
  • Impact

Utilisation dans un site web.

Nombre de police sur une page web.

On préconise de ne pas trop multiplier le nombre de police sur une page web comme sur un document papier. On pourrait considérer qu’une police pour les titres (Hn) et une police pour les paragraphes serait suffisant. Cependant, vous pouvez utiliser des polices afin de mettre en exergue un élément de votre site web.
Enfin, la convention recommande de ne pas mélanger les différentes familles de police.

Polices standards

Toutes les polices ne sont présentent sur les navigateurs et les systèmes d’exploitation Quand vous désirez utiliser une police, vous vous devez d’indiquer au navigateur les police de caractère à utiliser dans le fichier CSS :

font-family : « Lucida Grande », Verdana, sans-serif;

Dans cet exemple, nous utiliserons en priorité « Lucida Grande » (notez les guillemets pour les noms de polices composés) puis Verdana. Si ces polices ne sont pas présentes alors nous utiliserons la police par défaut Sans-serif présente sur le système d’exploitation.
Il est important de bien considérer la taille des caractères dans votre choix de police afin de ne pas déformer votre design si une police alternative est définie.

Polices non standards

Vous pouvez utiliser une police spécifique non présente pas les navigateur en utilisant la déclaration

@font-face

Exemple de déclaration CSS

 

@font-face{ font-family : « maPolice »;

src : url(‘ maPolice.eot’);

src : url(‘ maPolice.eot?’) format(‘eot) url(‘ maPolice.woff’) format(‘woff’), url(‘ maPolice.svg#ancre’) format(‘svg’), url(‘ maPolice.ttf’) format(‘truetype’);

 

Le format .eot est destiné à Internet explorer 9.
Le format ‘eot ?’ est destiné aux versions antérieur de IE9
Le format : ‘woff’ est destiné au navigateur Firefox, Chrome et Opéra
Le format : ‘svg’ est destiné au navigateur Safari d’Apple
Le format : ‘truetype’ est destiné aux versions antérieures de IE9

La virgule est présente pour la déclaration multiple.

L’ordre de ces déclarations est important car certains navigateurs savent utiliser plusieurs de ces formats. Donc, on mettra de préférence le format le plus léger en premier et le plus lourd en dernier.
Car comme l’indique la déclaration scr, il faudra installer le fichier de la police dans le répertoire indiqué ce qui aura tendance à alourdir le temps de chargement de la page.
Toujours dans l’optique de ne pas trop alourdir le chargement de votre site web, pensez à n’utiliser que les styles et les graisses dont vous avez besoin quitte à faire une déclaration :

@font-face{ font-family : « maPoliceGras »; url(‘ maPoliceGras.eot?’) format(‘eot) url(‘ maPoliceGras.woff’) format(‘woff’), url(‘ maPoliceGras.svg#ancre’) format(‘svg’), url(‘ maPoliceGras.ttf’) format(‘truetype’);

Ou trouvez des polices.

Il est à noter tout d’abord que les polices sont des créations et tout comme les créations artistiques, elles sont soumises au droit d’auteur. Donc, il vous faudra lire en détail les conditions d’utilisations si vous désirez les utiliser.
Voici quelques sites qui vous permettrons de télécharger des polices de caractères :
http://www.fontslive.com/
http://www.google.com/webfonts
https://typekit.com/
http://www.fontsquirrel.com/

Source et liens utiles:

http://www.alsacreations.com/article/lire/631-quelles-polices-pour-un-site-web.html
http://typographisme.net/post/Bonnes-pratiques-pour-les-d%C3%A9clarations-%40font-face#maj
http://cerig.efpg.inpg.fr/ICG/Dossiers/Typo/chap3.htm
http://fr.wikipedia.org/wiki/Famille_de_polices_%28CSS%29

Qui suis-je ? David Roubertoux

Depuis plus de dix ans dans les métiers de l’informatique, j’ai a exercé la mission de formateur informatique et technicien dans des écoles primaires de l’Aveyron puis j’ai créée la société AFI Aveyron, organisme de formation professionnelle spécialisée dans le domaine des nouvelles technologies.