Mettre en forme un texte en CSS

Date de publication : 25/06/2010 , Date de mise à jour : 24/11/2010

Par Pascale Lambert (mammouthland) (Blog)
 

Il est très important de bien choisir le formatage des polices de caractères utilisées sur une page web. En effet, pour une majorité de sites, le principal contenu est sous forme textuelle. Si ce texte est mal adapté, peu lisible, le message ne peut évidemment pas passer, quelque soit sa qualité.

Comment mettre en forme un texte grâce au CSS, quels sont les pièges à éviter ?

N'hésitez pas à nous faire part de votre avis sur cet article : Commentez

I. Mettre en forme un texte en CSS

• Tous les navigateurs graphiques

• font, font-family, font-weight, font-variant, font-style ;
• color ;
• text-align, text-decoration, text-transform ;
• line-height.

I-A. Notions importantes

• 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.

I-B. Choix des polices de caractères (font-family)

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

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

I-B-2. Famille Serif

• Times new roman (PC) ;
• Times (Mac) ;
• Georgia (Mac/PC) ;
• Palatino Linotype (PC) ;
• Palatino (Mac).

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

• Verdana (Mac/PC) ;
• Arial (Mac/PC) ;
• Trebuchet (PC) ;
• Helvetica (Mac) ;
• Tahoma (PC) ;
• Geneva (Mac).

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;
}
					

Page de visualisation des différentes polices de caractères

I-B-4. Outils

• Equivalences polices de caractères MAC/PC
• Type Tester, pour tester en ligne le rendu des polices.

I-C. Unités de taille de caractères (font-size)

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.

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

I-D. Choix des couleurs (color)

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

I-D-1. Liens utiles

• Color Vision qui permet de visualiser le choix de couleur de fond et de texte, avec une vision normale ou déficiente ;
• Code-couleur pour avoir les codes hexadécimaux et rvb ainsi que des propositions de choix de palettes de couleurs.

I-E. Autres attributs

• 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.

I-F. Propriété @font-face (CSS3)

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

I-F-1. Code (X)HTML

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

I-F-2. Code CSS

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

Voir le résultat obtenu.

I-F-3. Lectures complémentaires

• Sites à calques ! (à la bonne soupe de div) ;
• Tests et critiques de @font-face dans différents navigateurs (CoverPrestige) ;
• Open Font Library (en).

Liste de mes articles :

Principe des feuilles de style CSS - Commentez

Balises (X)HTML de base - Commentez

Feuille de style CSS de base - Commentez

Mettre en forme un texte en CSS - Commentez

Gérer les marges en CSS - 5 commentaires

Résoudre les problèmes de marges en CSS - Commentez

Sélecteurs class et id - 3 commentaires

Mise en page full CSS - 4 commentaires

Bordures en CSS - 2 commentaires

Image de fond en CSS - 3 commentaires

Effets Rollover à l'aide de :hover - 2 commentaires

Aligner une image et du texte à l'aide de la propriété float - 1 commentaire

Listes à puces en image - 2 commentaires

Citations et retraits - Commentez

Concevez des boutons graphiques avec du CSS - 11 commentaires

Positionnez des images aux quatre coins d'une page web - 16 commentaires

Appliquez un effet de zoom sur une image avec les CSS - 1 commentaire

Zoomer une image façon thumbnail en CSS - 3 commentaires

Tableaux à bordures fines avec les CSS - 1 commentaire