Le Blog

Le blog laboratoire de F.L.D. Studio
0

La puissance de la Font

Quelle typographie pour mon site ?

A cette question il existe à présent deux réponses :

Soit on privilégie les temps de réponses et on continu d'utiliser la technique du "safe web" soit on cherche un peux d'originalité et on utilise la propriété CSS @font-face (Voir article de Alsacreation).

Le "safe Web"

Sous ce terme on désigne une police de caractères qui à toute les chances d'être installée sur le poste de l'utilisateur. C'est pour cela que tant et tant de site on été conçu en Arial ou Time New Roman.  En réalité il en exitent d'autre que l'on peut aussi prender en compte. Cette technique doit aussi être accompagnée d'une solution de secours au cas ou la police par défaut n'est pas installée. Pour cela on crée aussi une Font stack.

Les polices avec empatements (Serif)

1. Baskerville (Windows 60.3% – Mac 93.3%)

Font stack :  font-family: Baskerville, "Baskerville Old Face", "Goudy Old Style", Garamond, "Times New Roman", serif;

2. Palantino (Windows 99.3% – Mac 83.1%)

Font stack : font-family: Palatino, "Palatino LT STD", "Palatino Linotype", "Book Antiqua", Georgia, serif;

3. Bodoni (Windows 55.8% – Mac 0%) et Didot (Windows 0% – Mac 93.5%)

Font stack:  font-family: "Bodoni MT", Didot, "Didot LT STD", "Book Antiqua", Garamond, "Times New Roman", serif;

4. Georgia (Windows 99.4% – Mac 97.5%)

Font stak:  font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;

Les polices sans empatements (Sans-Serif)

5. Century Gothic (Windows 87.6% – Mac 53.2%)

Font stak: font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;

6.Tahoma (Windows 97.8% – Mac 91.7%)

Font stak: font-family: Tahoma, Verdana, Segoe, sans-serif;

7. Arial Narrow (Windows 99.7% – Mac 97.1%)

Font stak: font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;

8. Trebuchet MS (Windows 99.7% – Mac 97.1%)

Font stak: font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;

Les polices à espacements fixes

9. Consolas (Windows 83% – Mac 34.8%)

Font stak: font-family: Consolas, monaco, monospace;

10.  Lucida Sans Typewriter (Windows 74.8% – Mac 99.6%)

Font stak: font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;

Polices @Font-face

Si on souhaite sortir des polices "safe Web" on utilisera la technique CSS du @font-face qui permettent d'utiliser (enfin) des polices qui ne sont pas installées sur le poste des utilisateurs. Cela permet une plus grande liberté mais cela pése sur le temps de chargement de la page car les polices sont téléchargées.

Le principe consiste à sélectionner une police à l'aide d'une instruction CSS. La police peut être stockée en local ou en distant (Google Font,...) En fonction du naviguateur on aura besoin de charger la fonte dans différents formats (.eot, .ttf, .woff, .svg)

Exemple, dans le <head> avant le chargement du css . C'est la méthode recommandée par Google. (ici plusieurs polices, situées chez Google) 

<link href='http://fonts.googleapis.com/css?family=family1|family2..' rel='stylesheet' type='text/css'>

Mode d'emploi pour les Fonts Google : https://developers.google.com/fonts/docs/getting_started

On peut aussi la déclarer dans sa feuille de style :

Dans ce nouvel exemple la police icomoon est hébergée en local dans tous ces formats (dans le dossier /fonts)

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot');
    src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.woff') format('woff'),
        url('../fonts/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

A savoir :  Il est déconseillé d'importer une feuille de style distante dans le document .CSS L'instruction @import(...) va certe télécharger la police mais surtout bloquer la lecture de la feuille de style jusqu'a importation de la font.

Trouver des polices (liste non exhaustive)
Outils

Catégories: Typographie, Développement WEB

Tags: Ressource, CSS, Outil

Commentaires: Pas de commentaires

Envoyer un commentaire