Mettre en forme un texte en CSS

Avant de choisir sa, ou plutôt ses, polices de caractères pour sa page web, il faut bien connaître certaines contraintes :

• Toutes les polices de caractères n'existent pas sur tous les ordinateurs.
  Conséquence : si l'ordinateur de votre visiteur ne possède pas la police que vous avez choisie, une autre s'affichera ruinant probablement le design que vous espériez ;
• Mac et PC ne possèdent pas toujours les mêmes noms de polices, ni même la même résolution.
  Conséquence : bien vérifier les équivalences entre Mac et PC ;
• Tous les navigateurs ne gèrent pas le rendu des polices de la même façon.
  Conséquence : là encore, n'espérez pas avoir le même rendu partout.

Maintenant que je vous ai bien cassé le moral... Voyons comment gérer au mieux toutes ces contraintes !

I-B-1. Polices génériques▲

Il existe 5 familles de polices de caractères dites 'génériques' :

• Serif ;
• Sans-serif ;
• Monospace ;
• Cursive ;
• Fantasy.

Je ne sais pas ce que vous obtenez sur votre écran, mais voici 4 captures d'écran réalisées sur mon propre ordinateur avec 4 navigateurs différents :

Et puis une cinquième sur Safari (Mac) :

Vous constatez que s'il n'y a pas de grosses différences avec les familles serif, sans-serif et monospace, cursive n'a pas le même aspect sous PC et sous Mac. Quant à fantasy, c'est plutôt... fantaisiste ! (oui, oui, je sais, elle est plutôt facile celle-là :p).

Il vaut mieux donc se contenter des familles serif et sans-serif, les sans-serif étant les plus lisibles à l'écran.

Les familles de polices se déclarent à l'aide de l'attribut font-family, à déclarer dans le body pour que toute la page en bénéficie (c'est la notion d'héritage). On finit toujours la liste de fontes déclarées par sa famille générique à laquelle elle appartient. Ainsi, si la police déclarée n'existe pas sur l'ordinateur de votre visiteur, le navigateur affichera la police appartenant à la même famille.

I-B-2. Famille Serif▲

body {
    font-family:"times new roman", times, serif;
}
body {
    font-family:georgia, serif;
}
body {
    font-family:"palatino linotype", palatino, serif;
}

I-B-3. Famille sans-serif▲

body {
    font-family:arial, sans-serif;
}
body {
    font-family:verdana, sans-serif;
}
body {
    font-family:trebuchet, helvetica, sans-serif;
}
body {
    font-family:tahoma, geneva, sans-serif;
}

I-B-4. Outils▲

1. On n'utilise pas de tailles de caractères fixes comme les points (pt), les picas (pc) ou les centimètres (cm). Celles-ci ne sont pas redimensionnables à l'écran, or on doit toujours laisser la possibilité au visiteur de zoomer la page.
   Pensez que même si vous avez de bons yeux actuellement, ça ne durera pas. Un jour, vous aussi, deviendrez presbyte, et vous serez content de pouvoir zoomer un texte. Et je ne parle pas de toutes les autres déficiences oculaires...
2. On évite aussi d'utiliser les pixels (px) car Internet Explorer les considèrent comme une unité de taille de caractère fixe, on se retrouve donc avec le même problème que précédemment.

Il faut donc utiliser des unités relatives, telles que les em ou les %. Ces unités sont proportionnelles à la taille en pixels déclarée dans le navigateur. Par défaut, ceux-ci sont en général réglés à 16px. C'est donc une taille qui peut être modifiée par l'utilisateur... On n'a aucun pouvoir là-dessus.

La taille des caractères se déclare par l'attribut font-size.

I-C-1. L'héritage▲

body {
    font-family:arial, sans-serif;
    font-size:90%;
}
p {
    font-size:90%;
}

body {
    font-family:arial, sans-serif;
    font-size:100%;
}
h1 {
    font-size:200%;
}
#footer p {
    font-size:90%;
}

I-C-2. Lien utile▲

On peut éviter des choses comme ça :

Que ce soit l'un ou l'autre choix, surtout avec des tailles de polices aussi petites, c'est vraiment très très pénible à lire, car pas assez contrasté.

Là encore, ayez à l'esprit que tout le monde n'a pas les yeux de superman et un super écran super lumineux et super contrasté. La lecture à l'écran, c'est déjà moins facile que sur papier, alors avec des choix comme ça... C'est peut-être très "design", mais ça ne met pas les internautes dans les meilleures dispositions de lecture.

Ce genre d'association n'est peut-être pas non plus des plus heureuses :

Bref ! les couleurs se déclarent grâce à l'attribut color, et à l'aide de codes hexadécimaux ou rvb (on évite les noms).

body {
    font-family:arial, sans-serif;
    font-size:100%;
    color:#000000; /*code hexadécimal du noir*/
}

I-D-1. Liens utiles▲

• font-style: normal | italic : normale | italique ;
• font-variant: normal | small-caps : normale | petites capitales ;
• font-weight: normal | bold : normal ou gras.

• text-align: left | right | center | justify : aligné à gauche | aligné à droite | centré | texte justifié ;
• text-decoration: none | underline | overline | line-through | blink : rien | souligné | surligné | rayé | clignotant ;
• text-transform: none | capitalize | uppercase | lowercase : met en majuscule la 1ère lettre d'un mot | met en majuscules | met en minuscules.

• line-height: normal | nombre | %

• Titrez bien vos différentes sections avec des h1, h2, h3, etc. en veillant à respecter la hiérarchie (pas de h3 si pas de h2 ; pas de h2 si pas de h1, etc.) ;
• Utilisez les balises <p></p> pour faire des paragraphes. Pas des div !
• N'utilisez pas la balise blockquote pour faire des retraits, elle est faite pour des blocs de citations ;
• etc.

La limitation du choix des polices de caractère, évoquée au début de ce tutoriel, peut être résolue par la propriété @font-face. Elle permet en effet de faire visualiser à l'écran une police de caractère définie, même si elle n'est pas installée sur l'ordinateur du visiteur. Hélas, peu de navigateurs l'implémentent...

• Firefox 3.5 ;
• Opéra 10 ;
• Safari 3.1 et +.

Pour être parfaitement honnête, ça marche aussi avec Internet Explorer, et ce depuis sa version 4. Mais uniquement avec des polices de caractère de format EOT. Et pour obtenir du format eot, il faut passer par un convertisseur qui ne fonctionne pas très bien. Bref, c'est tellement pratique que ça n'a jamais pris.

Voyons néanmoins comment ça marche avec les formats courants.

Il faut préablement transférer sur son serveur la police de caractère (comme pour une image). J'ai choisi pour mon exemple la fonte "chopin.ttf", en licence GNU/GPL, disponible sur le site Dafont.

I-F-1. Code (X)HTML▲

<h4 class="chopin">Mammouthland</h4>

I-F-2. Code CSS▲

On définit d'abord le nom de la fonte qui sera déclarée avec un banal font-family (ici "majoliefonte", mais j'aurais pu mettre "chopin" tout simplement) et son emplacement sur le serveur à l'aide d'un src.
Puis on l'appelle dans un sélecteur quelconque de façon classique (ici un class, voir le cours suivant pour plus de détails).

 

Sélectionnez

@font-face {
    font-family:majoliefonte;
    src:url(fonts/chopin.ttf) format("truetype");
}
.chopin {
    font-family:majoliefonte, sans-serif;
    font-size:4em;
    color:#000000;
}

Résultat attendu :

Voir le résultat obtenu.

C'est chouette hein ? (quand ça marche...)

I-F-3. Lectures complémentaires▲