Sur cette page :

  1. Gestion de la police : font
    1. font-family
    2. font-style
    3. font-variant
    4. font-weight
    5. font-size
    6. line-height
    7. Groupez-moi tout ça !
  2. Les couleurs du texte
  3. La mise en forme
    1. L’alignement avec text-align
    2. Indentation et espacement
  4. Gestion des espaces
  5. Téléchargement dynamique de polices

17.1# Gestion de la police : font

La propriété font permet, comme son nom l’indique, de gérer la police de caractères d’une sélection. Cette propriété est en fait un raccourci, qui permet de définir en une seule propriété les valeurs du sous-ensemble suivant :

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size
  • et enfin, line-height

Nous allons ici décrire le but et le comportement de chacune de ces propriétés. Les valeurs de ces propriétés sont héritées aux enfants des éléments sur lesquels elles s’appliquent.

17.1.1# font-family

Cette propriété permet de définir une liste de polices à appliquer à la sélection. Le navigateur tentera d’utiliser les polices dans l’ordre ou elles sont indiquées, à condition que celles-ci soient installés sur l’ordinateur du visiteur. Il est possible de spécifier une famille de police générique plutôt que le nom d’une police, c’est alors le navigateur qui tentera d’afficher la police qui correspondra le mieux. Les familles génériques sont :

  • sans-serif : le navigateur utilisera une police linéale, comme Arial ou Helvetica.
  • serif : le navigateur utilisera une police possédant un empattement, comme Times,
  • cursive : les polices cursives sont généralement conçues pour que les lettres soient liées entre elles,
  • fantasy : les polices fantaisistes sont des polices aux caractères originaux, mais qui restent des lettres identifiables (contrairement aux polices de symboles par exemples),
  • monospace : cette famille correspond aux polices à pas fixe, utilisées, par exemple, pour afficher du code, comme Courrier.

D’une manière générale, on termine une liste de polices par une famille générique, afin d’avoir une dernière chance d’utiliser une police qui correspond à peu près à celle qu’on aurait vraiment souhaité utiliser.

  1. font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;

Vous avez probablement remarqué que chaque police ou famille est séparée par une virgule (pour marquer la notion de choix alternatif), et que le nom d’une police comportant des espaces est entouré de guillemets.

17.1.2# font-style

La propriété font-style permet de gérer l’inclinaison de la police d’après trois valeurs : normal, italic, oblique. La plupart des polices possèdent leur équivalent italique, tandis que le style oblique sera généralement calculé par l’ordinateur.

  1. font-style: italic;

17.1.3# font-variant

Cette propriété permet d’afficher le texte en petites lettres capitales, c’est à dire que le les lettres minuscules seront affichées en lettres majuscules, mais dont la hauteur sera légèrement inférieure aux majuscules. Les deux valeurs autorisées sont normal et small-caps.

  1. p { font-variant: small-caps; }

Voici le résultat !

17.1.4# font-weight

Pour mettre du texte en gras, vous utiliserez la propriété font-weight. La manière la plus simple est d’utiliser la valeur bold, la valeur normal permettant, vous l’avez deviné, de désactiver ce comportement. Il est également possible de définir la graisse selon la valeur de l’élément parent : avec lighter (pour moins gras) et bolder (pour plus gras). Enfin, il est possible d’utiliser des coefficients de graisse (100, 200, …, 900). La valeur bold correspond au coefficient 700, normal à 400, les valeurs intermédiaires ne sont pas toujours supportées par certaines polices, dans ce cas, le navigateur tentera d’utiliser la valeur supérieure la plus proche. 

  1. <p style="font-weight: bold;">Je suis en gras,
  2. <span style="font-weight: bolder;">je devrais être encore plus gras</span>,
  3. <span style="font-weight: 400;">et moi je suis normal !</span></p>

Je suis en gras, je devrais être encore plus gras, et moi je suis normal !

17.1.5# font-size

La taille de la police est choisie avec font-size. Elle peut être exprimée à l’aide de différentes unités, par des valeurs relatives ou absolues.

Il existe une série de mots-clés correspondant à des tailles absolues telles qu’elles étaient définies en HTML par des valeurs numériques (à l’aide de l’attribut size de la balise font, que vous devez bien sûr éviter d’utiliser) :

  • xx-small : 1
  • x-small
  • small : 2
  • medium : 3
  • large : 4
  • x-large : 5
  • xx-large : 6

Il est également possible de définir la taille de la police en pixels, mais je ne vous recommande pas cette solution dans la mesure où elle prive les utilisateurs de la possibilité d’augmenter la taille du texte sur des navigateurs plus anciens, ce qui peut devenir problématique pour une personne souffrant de problèmes de vue. Vous remarquerez dans l’exemple suivant que l’unité doit toujours être précisée, et qu’aucun espace ne doit être placée entre la valeur et l’unité :

  1. p { font-size: small; }
  2. #pub.special { font-size: 13px; }

Pour l’impression, vous pouvez également utiliser les unités suivantes : les pouces (in), les centimètres et milimètres (cm, mm), les points et les picas (pt, pc).

La taille relative d’une police est définie par rapport à la taille moyenne (medium) définie pour la police, ou par rapport à la taille de la police de l’élément parent. Vous avez la possibilité d’utiliser plusieurs unités : le pourcentage (%) et le cadratin (em).

Cette dernière est une unité historiquement utilisée en typographie, le site alsacreations proprose un article détaillé sur cette unité. Disons que pour faire simple, 1em vaut 100% de la taille de l’élément parent. Vous pouvez donc utiliser un nombre décimal (positif) comme valeur pour cette unité.

Voici un petit exemple relativement simple :

  1. div#content { font-size: 90%; }
  2. #content pre { font-size: 0.9em; }
  3. .specialement_grand { font-size: 1.1em; }
  1. <div id="content">
  2.   <p>Ma taille est 90% !</p>
  3.   <pre>Ma taille est 0.9*90% = 81%</pre>
  4.   <p class="specialement_grand">Ma taille est 90%*1.1 = 99%</p>

Néanmoins, soyez vigilant en les utilisant : les sélecteurs CSS peuvent vous jouer des tours ! Observez cet exemple :

  1. li { font-size: 0.9em; }

et considérons maintenant que nous souhaitons utiliser une liste à plusieurs niveaux :

  2.   <li>Niveau 1 : 0.9em</li>
  5.       <li>Niveau 2 : 0.9*0.9em = 0.81em</li>

Je pense que l’exemple est suffisamment parlant : pour chaque niveau de liste, la taille est réduite. Vous devrez donc jongler entre les sélecteurs, en les combinant ou en utilisant un identifiant ou une classe…

Il vous faudra peut-être un peu de temps pour vous habituer à cette unité, mais d’une manière générale, son utilisation améliorera l’accessibilité de votre site internet, puisque la taille du texte sera calculée en fonction du choix par défaut de l’utilisateur.

17.1.6# line-height

Cette propriété permet de définir la hauteur minimale d’une ligne de texte. Sa valeur par défaut est normal, elle correspond généralement à 1 ou 1,2 fois la hauteur d’une lettre. Vous pouvez également choisir un facteur de multiplication de la taille de la lettre en spécifiant un nombre décimal sans unité ou un pourcentage. Il est également possible de spécifier une taille fixée selon une unité, comme par exemple 15px ou 1.2em.

  1. #content p { line-height: 1.1em; }
  2. h1, h2 { line-height: 100%; }

17.1.7# Groupez-moi tout ça !

Il existe une propriété qui sert de raccourci à celles que nous venons d’étudier : font. Sa syntaxe est moins explicite que lorsque vous utilisez séparément l’ensemble des propriétés, c’est pourquoi je vous conseille de l’utiliser une fois que votre feuille est terminée et que vous souhaitez optimiser le poids du fichier.

La valeur de font respecte en fait un ordre d’écriture des valeurs des propriétés pour lesquelles elle fait office raccourci. Voici l’ordre dans lequel indiquer ces valeurs :

  1. font-style, si définie,
  2. font-variant, si définie,
  3. font-weight, si définie,
  4. font-size,
  5. éventuellement, un slash “/” et la valeur de line-height,
  6. puis enfin, la valeur de font-family.

On obtient ainsi les équivalences suivantes :

  1. font-size: 1.1em;
  2. font-family: Times, serif;
  3. /* équivaut à */
  4. font: 1.1em Times, serif
  1. font-size: 1.1em;
  2. font-family: Times, serif;
  3. line-height: 1.2em;
  4. /* équivaut à */
  5. font: 1.1em/1.2em Times, serif;

ou encore

  1. font-size: 0.9em;
  2. font-family: Helvetica, Arial, sans-serif;
  3. line-height: 1em;
  4. font-weight: bold;
  5. /* équivaut à */
  6. font: bold 0.9em/1em Helvetica, Arial, sans-serif;

17.2# Les couleurs du texte

Nous allons maintenant égayer un peu plus nos pages en choisissant la couleur du texte. Faites vos choix consciencieusement, une mauvaise association de couleurs peut rendre vos pages illisibles !

Pour définir la couleur du texte, vous utiliserez la propriété color. Ses valeurs possibles sont :

  • des noms de couleurs prédéfinis,
  • le code hexadécimal d’une couleur,
  • la description de la couleur en RGB (Red Green Blue, Rouge Vert Bleu). (TODO IE !)

Ces trois manières de décrire une couleur seront utilisables pour chacune des propriétés CSS qui les utiliseront (comme le fond d’un bloc ou les bordures).

Les couleurs prédéfinies sont :

  • maroon
    #800000
  • red
    #ff0000
  • orange
    #ffA500
  • yellow
    #ffff00
  • olive
    #808000
  • purple
    #800080
  • fuchsia
    #ff00ff
  • white
    #ffffff
  • lime
    #00ff00
  • green
    #008000
  • navy
    #000080
  • blue
    #0000ff
  • aqua
    #00ffff
  • teal
    #008080
  • black
    #000000
  • silver
    #c0c0c0
  • gray
    #808080

 Pour définir la couleur du texte, ces noms de couleurs seront utilisés ainsi :

  1. p {
  2.   color: red;
  3. }

Les codes qui accompagnent les couleurs ci-dessus correspondent à leurs codes hexadécimaux respectifs. Le code hexadécimal d’une couleur correspond à une notation au format #RRVVBB, où RR, VV et BB correspondent à deux chiffres hexadécimaux représentant respectivement le rouge, le vert et le bleu. C’est la représentation la plus couramment utilisée pour indiquer une couleur.

Enfin, la notation dite “rgb” permet de représenter les couleurs en utilisant une notation décimale, en utilisant le format rgb(rouge, vert, bleu).

Voici quelques exemples pour clarifier ces notions :

  1. /* Trois manière de décrire le rouge : */
  2. color: red;
  3. color: #FF0000;
  4. color: rgb(255, 0, 0);
  5.  
  6. /* Trois manières de décrire le noir : */
  7. color: black;
  8. color: #000000;
  9. color: rfb(0, 0, 0);

Je vous invite à consulter quelques liens pour en savoir plus :

17.3# La mise en forme

Nous avons vu les principales propriétés permettant de manipuler l’aspect des caractères, nous allons maintenant nous intéresser à sa mise en forme. Nous allons donc voir comment gérer l’aspect du texte, l’espacement des caractères ou l’indentation.

17.3.1# L’alignement avec text-align

La propriété text-align admet quatre valeurs : left, right, center et justify, qui permettent de choisir la manière dont le texte sera réparti dans un bloc :

  • left
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lectus nisi, facilisis in varius a, dictum sit amet massa. Nulla facilisi. Integer lectus lorem, molestie quis tristique ut, sodales at nisl. Nullam pretium venenatis tortor, eget consectetur velit lobortis ut. Ut fringilla libero vitae arcu scelerisque egestas.
  • center
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lectus nisi, facilisis in varius a, dictum sit amet massa. Nulla facilisi. Integer lectus lorem, molestie quis tristique ut, sodales at nisl. Nullam pretium venenatis tortor, eget consectetur velit lobortis ut. Ut fringilla libero vitae arcu scelerisque egestas.
  • right
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lectus nisi, facilisis in varius a, dictum sit amet massa. Nulla facilisi. Integer lectus lorem, molestie quis tristique ut, sodales at nisl. Nullam pretium venenatis tortor, eget consectetur velit lobortis ut. Ut fringilla libero vitae arcu scelerisque egestas.
  • justify
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lectus nisi, facilisis in varius a, dictum sit amet massa. Nulla facilisi. Integer lectus lorem, molestie quis tristique ut, sodales at nisl. Nullam pretium venenatis tortor, eget consectetur velit lobortis ut. Ut fringilla libero vitae arcu scelerisque egestas.
 
  1. #content p
  2. {
  3.   text-align: justify;
  4. }

17.3.2# Indentation et espacement

La propriété text-indent permet d’afficher un décalage du texte au début de la première ligne. La valeur de cette propriété est définie en pourcentage de la taille du bloc contenant le texte ou avec une valeur donnée, en utilisant les unités courantes des CSS :

  1. p { text-indent: 10px; }
  2. blockquote { text-indent: 5%; }

Il est possible de définir l’espace entre deux lettre ou deux mots d’un bloc avec letter-spacing et word-spacing, dont les valeurs sont définies à l’aide des unités courantes. 

  1. .example { letter-spacing: 0.3em; }
  2. .example2 { word-spacing: 1.1em; }

Un exemple avec un espacement des lettres de 0.3em.

Un second exemple avec un espacement des mots de 1.1em.

Pour ces trois propriétés, la valeur normal permet de revenir à la valeur par défaut du navigateur.

17.4# Les décorations

La propriété text-decoration permet de souligner (underline), surligner (overline), barrer (line-through) ou encore faire clignoter (blink) le texte.

  1. del { text-decoration: line-through; }

Ce passage a été supprimé !

Je vous déconseille tout de même d’utiliser la valeur blink, qui a été introduite pour permettre la disparition de la balise HTML <blink>, qui n’est ni supporté par l’ensemble des navigateurs ni standard. Et puis… c’est un effet franchement cheap !

17.5# Gestion des espaces

Dans le code HTML, plusieurs espaces consécutifs sont ignorés, à l’instar des retours à la ligne. Il est possible de modifier ce comportement à l’intérieur d’un bloc avec la propriété white-space, qui admet les valeurs suivantes :

  • normal correspond au comportement par défaut du navigateur : les espaces consécutifs dans la source correspondront à un seul espace à l’affichage et le navigateur introduira le retour à la ligne automatiquement quand le texte atteindra une bordure.
  • pre affichera la mise en forme telle que dans le code source : tous les espaces seront affichés et seuls les retours à la ligne indiqués explicitement dans le code seront retranscrits. Ce mode est généralement utiliser pour afficher du texte comme, justement, du code source.
  • nowrap supprime les espaces inutiles comme le comportement normal, mais n’introduira pas de retours à la ligne qui ne sont pas explicites dans le code,
  • pre-wrap affiche l’ensemble des espaces du code, mais les retours à la ligne sont ajoutés quand le texte atteind une bordure,
  • enfin, pre-line admet le comportement suivant : les espaces sont fusionnés, un retour à la ligne est introduit quand celui-ci existe dans le code source ou si le texte atteind une bordure.

17.6# Téléchargement dynamique de polices

En CSS, la règle @font-face permet d’utiliser des polices qui ne sont pas nécessairement installées sur l’ordinateur du visiteur. Cette propriété n’est supportée que par Firefox 3.5 pour le moment. Son adoption est freinée par le fait que certaines polices utilisées ne sont pas libres de droits et ne peuvent donc pas être disponibles en téléchargement.

Cette règle apparue avec CSS2, a été supprimée dans la spécification 2.1 pour finalement réapparaître dans la troisième version.

La règle font-face est suivie d’un bloc de propriétés, dont font (ou les propriétés de cette famille) et src qui permet d’indiquer où télécharger la police.

  1. @font-face
  2. {
  3.   font-family: specific;
  4.   src: "http://fonts.com/specific.tff";
  5. }