Le langage CSS/Texte

Dans ce chapitre nous détaillons les différentes propriétés CSS relatives au traitement des caractères : police, taille, variante, espacement des lignes, etc. Le balayage des standards du W3C est accompagné de conseils pour bien exploiter le potentiel de traitement des caractères en CSS en évitant les écueils courants des navigateurs et des plates-formes. Alors que les Internautes sont nombreux à parcourir très rapidement les pages web, l'objectif est d'obtenir un texte lisible et, surtout, agréable à lire afin de retenir le lecteur plus que sur les autres sites...

Le langage CSS

1. Introduction
   • Premier exemple
   • Structure et syntaxe
   • Les sélecteurs
   • Valeurs et unités utilisées
2. Mise en forme
   • Texte
   • Fonds, bordures, marges et espacements
   • Listes
   • Tableaux
   • Héritage
3. Mise en page
   • Le positionnement des éléments
   • Le modèle de boîte
   • Transformation géométrique
4. Pour aller plus loin
   • Techniques avancées
   • Navigateurs et débogage
   • CSS 3
   • Bootstrap
5. Annexes
   • Glossaire
   • Mots réservés
   • Notions de design et de colorimétrie
   • Interface HTML

Si vous êtes pressé consultez en priorité :

• font-size : taille des caractères
• color : couleur des caractères
• Gras et italique
• Alignement du texte
• line-height (espacement des lignes)

Les caractères

font-size : taille des caractères

La propriété font-size permet de modifier la taille des caractères. On peut utiliser une unité de distance ou un mot clef se référant à une taille prédéfinie dans le navigateur web ou modifiant une taille héritée d'un élément parent. Les unités utilisables sont répertoriées dans le chapitre Valeurs et unités, les mot-clefs sont listés plus bas.

Par exemple ces styles :

p#t1 { font-size: 12px; }
p#t2 { font-size: 1.5em; }
p#t3 { font-size: 175%; }

avec le code HTML suivant :

<p id="t1">Paragraphe avec style #t1</p>
<p id="t2">Paragraphe avec style #t2</p>
<p id="t3">Paragraphe avec style #t3</p>

produisent ceci :

Paragraphe avec style #t1

Paragraphe avec style #t2

Paragraphe avec style #t3

On peut aussi utiliser des mot-clefs décrivant la taille de la police :

• de manière relative avec larger (plus grand) ou smaller (plus petit),
• de manière absolue avec xx-small, x-small, small, medium, large, x-large, xx-large, dans l'ordre du plus petit au plus grand.

Dans le premier cas la taille est relative à celle spécifiée pour un parent et dans le second cas la taille correspond à une valeur prédéfinie dans le navigateur.

Exemple, ces styles :

div { font-size: medium; }
p { font-size: smaller; }

produisent ceci lorsqu'on imbrique le p dans le div :

<div>
    Texte hors du paragraphe
    <p>Texte dans le paragraphe<p>
</div>

Texte hors du paragraphe

Texte dans le paragraphe

Spécificités à connaître

1. Les Internet Explorer 5.0 à 7.0 de Microsoft ne permettent pas à l'utilisateur de modifier la taille de la police affichée lorsque l'unité utilisée est le pixel. De ce fait il est recommandé pour des raisons d'accessibilité de ne jamais spécifier de tailles de police en pixels pour permettre d'agrandir le texte.
2. La taille relative small correspond généralement à 16 pixels dans Internet Explorer et à 12 pixels dans les autres navigateurs. Il est donc peu recommandé à nouveau d'utiliser ce genre de spécification, à moins d'utiliser une feuille de style spéciale pour Internet Explorer.

color : couleur des caractères

La propriété color définit la couleur des caractères. Par défaut celle-ci est héritée du parent. Pour la changer, il faut utiliser une valeur de couleur selon les possibilités indiquées dans le chapitre Valeurs et unités.

Exemple :

em {color: #c00;}
span {color: #0085c0;}

Rend ces couleurs :

<em>Texte em</em> et <span>texte span</span>

Texte em et texte span

Gras, italique

font-style

La propriété font-style permet de passer en texte italique ou de revenir en texte droit, lorsqu'on est déjà dans un passage en italique. Les différentes valeurs possibles sont les suivantes :

• normal, texte normal
• italic, texte en italique
• oblique

La police utilisée doit avoir une variante correspondant à chaque valeur de cette propriété. Aussi, comme bien souvent la variante oblique n'existe pas, on se contentera des deux premières valeurs.

Par exemple ceci :

strong {font-style: italic;}
em {font-style: normal;}

donne :

<strong>Texte strong</strong> et <em>texte em</em>

Texte strong et texte em

NB: le style standard de strong est caractères gras et celui de em est caractères en italique.

font-weight

La propriété font-weight définit la graisse de la police. Les valeurs possibles sont :

• normal, texte normal
• bold, texte gras
• bolder
• lighter
• une valeur entre 100 et 900 par pas de 100 (ex : 500 = normal, 600 = semi-bold, 700 = bold).

À nouveau, seules les deux premières valeurs sont utiles car les navigateurs ne proposent aujourd'hui pas de graisse relative.

Par exemple ceci :

strong {font-weight: normal;}
em {font-weight: bold;}

donne :

Texte strong et texte em

NB : le style standard de strong est caractères gras et celui de em est caractères en italique.

text-decoration : souligné, surligné, barré

La propriété text-decoration permet d'ajouter un trait au texte. Les valeurs possibles sont :

• none : texte normal,
• underline : texte souligné,
• overline : texte surligné,
• line-through : texte barré.

Cette propriété est très utile pour styliser les liens qui sont par défaut soulignés dans les navigateurs. Il est en effet assez courant de nos jours ne plus les souligner mais de seulement les colorer.

Exemple :

strong { text-decoration: underline; }
em { text-decoration: overline; }
span { text-decoration: line-through; }

Donne ceci :

Texte strong, texte em et texte span

N. B. : le style standard de strong est caractères gras, celui de em est caractères en italique, enfin span est du texte normal.

Cette propriété permet en fait de rassembler quatre sous-propriétés :

text-decoration-line

La position du trait :

• none : texte normal (par défaut),
• underline : texte souligné,
• overline : texte surligné,
• line-through : texte barré.

Plusieurs valeurs peuvent être spécifiées pour produire une combinaison ; par exemple souligné et surligné.

<span style="text-decoration-line: underline;">Souligné</span>	Souligné
<span style="text-decoration-line: overline;">Surligné</span>	Surligné
<span style="text-decoration-line: overline underline;">Surligné et souligné</span>	Surligné et souligné

text-decoration-style

Le style de trait :

• solid : trait continu (par défaut),
• dotted : ligne de points,
• dashed : tirets,
• double : trait double,
• wavy : vague.

<span style="text-decoration-line: underline; text-decoration-style: solid;">Souligné continu</span>	Souligné continu
<span style="text-decoration-line: underline; text-decoration-style: dotted;">Souligné en pointillé</span>	Souligné en pointillé
<span style="text-decoration-line: underline; text-decoration-style: dashed;">Souligné de tirets</span>	Souligné de tirets
<span style="text-decoration-line: underline; text-decoration-style: double;">Souligné double</span>	Souligné double
<span style="text-decoration-line: underline; text-decoration-style: wavy;">Souligné par une vague</span>	Souligné par une vague

text-decoration-thickness

Épaisseur de trait :

• auto : automatique (par défaut),
• from-font : selon les indications d'épaisseur de la police de caractères,
• valeur : épaisseur explicite (px, cm, ...).

<span style="text-decoration-line: underline; text-decoration-thickness: from-font;">Souligné</span>	Souligné
<span style="text-decoration-line: underline; text-decoration-thickness: 3px;">Souligné de 3 pixels d'épaisseur</span>	Souligné de 3 pixels d'épaisseur

text-decoration-color

Couleur du trait, voir la section « Les couleurs » du chapitre « Valeurs et unités ».

<span style="text-decoration-line: underline; text-decoration-color: #00aaff;">Souligné en bleu</span>	Souligné en bleu
<span style="text-decoration-line: underline; text-decoration-color: red;">Souligné en rouge</span>	Souligné en rouge

Il est courant de souligner des erreurs par une vague rouge :

<span style="text-decoration: underline wavy red;">Souligné par une vague rouge</span>

Souligné par une vague rouge

Majuscules et minuscules

font-variant

La propriété font-variant permet de basculer les caractères en petites capitales d'imprimerie. Il faut pour cela lui donner la valeur small-caps, la valeur normal permettant de revenir à des lettres minuscules. Par exemple ce code CSS :

p {font-variant: small-caps;}

appliqué au texte « Texte du paragraphe. Nouvelle phrase. » donne ceci :

Texte du paragraphe. Nouvelle phrase.

Cet effet peut être intéressant dans les titres ou dans les menus. Par contre sur un texte complet, il est rare d'utiliser des petites majuscules.

text-transform

La propriété text-transform contrôle la casse du texte. Elle accepte les valeurs suivantes :

• capitalize met une majuscule à chaque début de mot ;
• uppercase passe tout en (grandes) majuscules ;
• lowercase passe tout en minuscules ;
• none aucun des effets précédents.

Par exemple ces styles CSS :

strong { text-transform: capitalize; }
em     { text-transform: uppercase;  }
tt     { text-transform: lowercase;  }

appliqués au texte « minuscules, MAJUSCULES dans ... » donnent ceci :

minuscules, MAJUSCULES dans strong (capitalize)

minuscules, MAJUSCULES dans em (uppercase)

minuscules, MAJUSCULES dans tt (lowercase)

À nouveau ce genre d'effet ne trouve habituellement sa place que dans les titres ou les menus.

La transformation capitalize ne respecte pas les règles typographiques en français et ne met pas de capitale à une lettre suivant une apostrophe.

L'<span style="text-transform: capitalize;">alternative pour aller à l'essentiel</span>

L'alternative pour aller à l'essentiel

Le raccourci font

La propriété font est un raccourci pour spécifier plusieurs propriétés relatives à la police en une seule ligne dont certaines sont détaillées plus loin dans ce chapitre. Cette propriété, bien que pratique, est néanmoins peu tolérante quand à l'ordre des propriétés spécifiées, lequel est le suivant :

1. font-style
2. font-variant
3. font-weight
4. font-size
5. line-height
6. font-family

Dans cette liste, font-size et font-family doivent obligatoirement être mentionnées. Par ailleurs font-size et line-height doivent être accolés avec la barre oblique '/'. Il faut donc être rigoureux lorsqu'on utilise ce raccourci. Le W3C donne les exemples suivants :

p { font: 12px/14px sans-serif }
p { font: 80% sans-serif }
p { font: x-large/110% "New Century Schoolbook", serif }
p { font: bold italic large Palatino, serif }
p { font: normal small-caps 120%/120% fantasy }

Attention : toute propriété parmi les 6 listées plus haut qui n'est pas mentionnée lors de l'utilisation de font est remise à sa valeur initiale.

Exemple :

<div style="font-weight: bold;"> Début <div style="font: 12px/14px sans-serif;"> Texte au régime sans gras </div> Fin </div>

Ce qui donne : Début Texte au régime sans gras Fin

Police de caractères

Les grandes familles de polices

Les polices de caractères sont classées selon 5 catégories calquées sur l'imprimerie :

• à empattement (serif), les extrémités des caractères comportent de petits crochets décoratifs
• sans empattement (sans-serif), les extrémités des caractères sont droites
• à chasse fixe (monospace), la place occupée par un caractère est constante
• cursive (cursive), imitant plus ou moins une écriture manuscrite
• fantaisie (fantasy), il s'agit plutôt d'icônes que de caractères

Exemple (si le type de police n'existe pas dans votre navigateur, il sera remplacé par un autre type, classiquement un sans-serif) :

Texte avec une police à empattement

Texte avec une police sans empattement

Texte avec une police à chasse fixe

Texte avec une police cursive

Texte avec une police fantaisie

On considère habituellement qu'un long texte doit être rédigé en utilisant un des deux premiers types. Le débat entre avec ou sans empattement est un sujet à part entière, certains considérant les premières comme plus lisibles. En pratique on trouve très couramment des polices à empattement dans les livres, avec donc une connotation de tradition. Les polices sans empattement sont plus récentes et sont donc empreintes d'une idée de modernisme. Aussi utilise-t-on souvent ces polices sur le web. Enfin les polices à chasse fixe servent souvent à afficher du code source, elles ont ainsi une connotation ordinateur, imprimante, etc.

font-family : choix de la police

La propriété font-family définit la police de caractères. Elle accepte comme valeur un ou plusieurs nom(s) de polices ou de type de police (police générique). Dans le cas de plusieurs noms, il faut les séparer par des virgules et les éventuels espaces additionnels ne comptent pas. Le navigateur affichera alors le texte avec la première police trouvée dans l'ordre de la liste. Pour cette raison, il est de peu d'utilité de mentionner à la fin de la liste des polices ayant moins de chance d'être installées sur la plate-forme de l'utilisateur. Enfin il n'est pas obligatoire d'encadrer les noms de guillemets (") ou d'apostrophes (') et le nom des polices est insensible à la casse.

Comme nous le verrons plus loin, il est impératif de toujours mentionner en dernier le nom d'une police générique pour que le navigateur ait une solution de rechange s'il ne trouve pas les polices demandées. La liste possible correspond aux types de police précédemment évoqués :

• serif
• sans-serif
• monospace
• cursive
• fantasy

Par exemple ceci :

strong {font-family: Bodoni, Bitstream Vera Serif, Times New Roman, serif;}
em {font-family: courier, monospace;}

donne (le résultat dépend de la plate-forme utilisée) :

Texte strong (serif) et texte em (monospace)

Remarque : si par malheur le nom de la police à utiliser comportait un des mot-clef inherit, initial, default ou encore le nom d'un type de police (serif, sans-serif, etc.), il faudrait alors impérativement l'encadrer de guillemets (") ou d'apostrophes (') afin d'éviter toute confusion.

Police et taille de police

Même à taille égale, par exemple 16 pixels, deux polices différentes peuvent ne pas sembler de même dimension. Ceci est lié à ce que les typographes appellent la taille de l'x (la lettre x). Pour faire simple, disons que ce n'est pas parce que les lettres les plus hautes occupent la même hauteur que les lettres les plus petites le font également.

Ainsi la police verdana, très utilisée sur le web, est une police qui paraît généralement plus grosse que les autres à taille égale. C'est très certainement la raison pour laquelle elle est si souvent choisie : à taille égale, elle paraît plus lisible puisque plus grosse. L'inconvénient d'utiliser cette police est que, si elle n'est pas disponible sur la plate-forme utilisée, le navigateur se rabattra sur une autre vraisemblablement moins grosse en apparence. L'utilisateur aura donc une impression différente de la page, probablement moins bonne que souhaitée.

Pour éviter ce type de désagrément, la recommandation que l'on peut faire est d'utiliser comme valeur de la propriété font-family une liste de polices dont la taille de l'x est similaire. Pour appréhender cette dimension, il suffit d'aligner verticalement un même mot écrit avec différentes polices. La difficulté, on le verra au paragraphe suivant, est de trouver une liste de polices qui sera probablement disponible sur les 3 plates-formes majeures : Linux, Macintosh et Windows.

Les polices et les plates-formes

Une des grosses difficultés du web est la diversité des plates-formes. Elle se manifeste bien sûr par la diversité des navigateurs web mais aussi par la diversité des polices de caractères installées. Aussi, si le nombre de polices disponibles sur un ordinateur est souvent très réduit et correspond aux polices par défaut du système et celles éventuellement installées par les applications comme les suites bureautiques, les polices installées d'une plate-forme à l'autre ne coïncident généralement pas non plus.

De ce fait, il n'est pas possible de se reposer sur la spécification d'une seule police et, comme il est difficile de trouver une police commune à toutes les plates-formes, il faut toujours accompagner la spécification d'une police d'un nom de police générique. Ceci ne vous empêche nullement de spécifier quelques polices un peu extravagantes en début de liste au cas où l'utilisateur les auraient, bien au contraire.

Si toutefois vous souhaitiez vraiment utiliser une police peu courante, une solution validée pour contourner le problème de l'installation de la police consiste à opérer le remplacement d'un texte par une image que vous aurez créée dans votre logiciel de dessin favori avec la police désirée. Bien sûr on ne peut pas imaginer faire ceci pour un long texte mais seulement pour des titres ou, à la limite, des menus.

Signalons pour être exhaustif qu'il y existe théoriquement des méthodes pour que le navigateur télécharge automatiquement une police manquante à partir d'un fichier de police. Toutefois ces méthodes sont très liées à la plate-forme utilisée et ne peuvent pas être exploitées avec une grande chance de succès. Le plus serein est donc d'accepter que les utilisateurs n'aient pas tous le même rendu des pages que vous créez, sinon utilisez des documents PDF !

Installer une police

Par défaut, selon le système d'exploitation, on trouve généralement déjà les polices Arial, Helvetica, Verdana, Geneva, Tahoma, Trebuchet MS.

Mais pour en afficher d'autres sur les PCs des visiteurs d'un site, sans qu'ils aient à les installer, il faut les embarquer dans le site puis pointer dessus avec font-face. Ex :

1. Télécharger "Gothic Destroyer.ttf" sur https://www.dafont.com/fr/ ;
2.  L'extraire dans un sous-dossier du site nommé "fonts/" ;
3. Y faire référence en CSS, tout en haut du fichier importé depuis l'HTML. Ex : <link rel="stylesheet" href="css/styles.css"> qui contient :

   @font-face {
       font-family: "Gothic Destroyer";
       src:
           url("/fonts/Gothic Destroyer.ttf") format('truetype');
   }
   

4. L'appeler en dessous :

   * {
       font-family: Gothic Destroyer;
   }
   

Alignement et espacement

Alignement du texte

text-align

La propriété text-align définit l'alignement du contenu d'un élément, typiquement le texte dans un paragraphe. Les valeurs possibles sont :

• left, alignement à gauche
• right, alignement à droite
• center, alignement au centre
• justify, alignement à droite et à gauche

Une figure valant mieux que de longues explications, l'effet de chaque valeur est le suivant :

Texte aligné à gauche avec left

Texte aligné à droite avec right

Texte aligné au centre avec center

Texte justifié, aligné à droite et à gauche avec justify

On constate aisément dans cet exemple que le texte justifié peut ne pas toujours être une bonne solution lorsque la largeur du contenant n'est pas suffisante. Des espacements exagérés entre mots peuvent en effet apparaître, c'est un problème connu avec ce type d'alignement du texte. La solution serait d'introduire la césure des mots mais cela ne fait pas encore partie du standard CSS !

Remarque : Les spécifications du W3C indiquent que la propriété text-align ne concerne que les contenus de type inline (en ligne), c'est-à-dire destinés à être affichés les uns à la file des autres comme du texte, des liens, etc.

text-indent

La propriété text-indent définit le retrait de la première ligne de texte d'un élément. La valeur spécifiée est une valeur de distance. Par exemple le code suivant :

p {text-indent: 2em;}

donne ceci :

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Espacement des caractères, des mots et des lignes

letter-spacing

La propriété letter-spacing modifie l'espacement entre les lettres des mots. Cet espacement est nul par défaut, ce qui ne veut pas dire que les caractères se touchent, et peut prendre une valeur de distance quelconque. On l'utilisera notamment pour rendre plus lisibles des titres surchargés par la graisse ou les lettres capitales. Par exemple, le code CSS suivant :

strong {font-size: 150%}
span {font-size: 150%; font-weight: bold; letter-spacing: 2px;}

donne ceci :

Texte strong

Texte span

L'effet produit sur un gros texte est loin d'être négligeable comme on peut le voir, il est donc regrettable que cette propriété soit si peu utilisée sur le web.

Remarque : le style par défaut de strong est caractères gras alors que span est du texte normal.

word-spacing

La propriété word-spacing contrôle l'espacement des mots. Cet espacement est nul par défaut, ce qui à nouveau ne signifie pas que les mots se touchent, et peut prendre une valeur de distance quelconque. Comme l'espacement de mots standard des navigateurs est très bien, il n'y a que peu de raisons d'utiliser cette propriété, si ce n'est pour créer des effets de typographie. Par exemple, le code CSS suivant :

strong {word-spacing: 1em;}
span {word-spacing: 2em;}

donne ceci :

Texte strong

Texte span

À utiliser à bon escient...

line-height

La propriété line-height modifie l'espacement entre les lignes d'un texte. Cet espacement peut prendre une valeur de distance quelconque. L'espacement entre les lignes est un facteur important de lisibilité et d'agrément de lecture et, malheureusement, l'espacement par défaut des navigateurs est souvent trop étroit. L'œil reconnaît tout de suite un espacement qui convient et qui lui permet de suivre facilement la ligne en cours de lecture. Ainsi, bien que dans les exemples suivant il s'agisse de latin, il est clair qu'une valeur entre 1.5em et 2.0em rend le texte plus agréable à lire ! Signalons également qu'imposer une augmentation de l'interlignage peut parfois être le seul moyen d'éviter l'enchâssement des caractères typographiques dans le cas de titres particulièrement longs qui causent un retour à la ligne comme le montre le dernier exemple.

Espacement de 1.1em, de toute évidence pénible à lire :

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Espacement de 1.6em, très convenable :

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Espacement de 2.5em, exagéré :

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bien évidement rien n'empêche d'utiliser des valeurs volontairement inhabituelles sur des textes courts afin de leur donner une importance. Évidemment il faut dans ce cas user de l'effet avec parcimonie sans quoi le lecteur risque de trouver les pages peu agréables.

Enfin voici ce qui se passe sur un long titre avec un espacement de ligne faible :

Titre avec un texte très long qui va sans doute déborder sur la ligne suivante et causer un affichage disgracieux sur la plupart des écrans

Colonnes

La propriété column-count permet de définir le nombre de colonnes d'un bloc de texte. Par exemple (CSS intégré dans du HTML) :

<ul style="column-count: 4">
  <li> Premier élément ;</li>
  <li> deuxième élément ;</li>
  <li> troisième élément ;</li>
…
</ul>

Les propriétés suivantes définissent la mise en forme des colonnes :

• column-gap : espacement entre les colonnes (distance) ;
• column-rule : paramètres du filet, par exemple column-rule: 1px solid lightblue; ; ces paramètres peuvent être indiqués séparément :
  • column-rule-style : type de filet pouvant prendre les valeurs solid, dotted,dashed ou none,
  • column-rule-width : épaisseur du filet,
  • column-rule-color : couleur ;
• column-span : si un élément s'étend sur plusieurs colonnes en largeur, indique le nombre de colonnes (ou bien all) ;
• column-width : largeur des colonnes (distance).