Typographie

On va maintenant voir comment modifier l'apparence du texte dans une page web

Spécifier les fontes

On utilise pour cela la propriété "font-family"

Exemple :

body {
    font-family:"Comic Sans MS", Arial, sans-serif; 
}

Dans cet exemple spécifie que le texte doit être affiché avec la police "Comic Sans MS" (notez les apostrophes : le nom de la police contient des espaces), si cette police n'est pas présente, le navigateur doit alors utiliser la police Arial. En dernier recours, le navigateur devra utiliser une police sans serif.
Séparez les polices par des virgules
Pour des raisons de lisiblité du texte, il est conseillé d'utiliser des polices sans serif.

Différence entre police avec et sans serif :

Avec serif Sans serif
Les serifs sont les petits empattements des lettres

Taille des polices

On utilise la propriété font-size. Pour les valeurs possibles, voyez dans la section "unités" de ce cours.

Utilisez l'unité "em", qui permet d'agrandir les polices dans IE.

Exemple :

html {
    /*
     * Police légèrement plus petite
     * que la taille par défaut
     */
    font-size:0.9em;    
}
p {
    /*
     * La taille de ce texte ne sera pas 1.1em 
     * de la taille par défaut mais 
     * 1.1x0.9em de la taille par défaut soit 0.99em
     * car <p> sera inclus dans <html>
     */
    font-size:1.1em;    
}

Couleur du texte

Il faut utiliser la propriété color suivit de la valeur a donner.
Le W3C conseille de donner également une valeur de couleur de fond (background-color) avec la propriété color (et vice-versa), afin d'eviter les textes de la même couleur que le fond (ce qui pourrait arriver si la couleur de l'élément parent est de cette couleur)

html {
    /*
     * Texte violet sur fond blanc
     */
    color:#FF00FF;
    background-color:white;
}

Exercice

Utilisez vos connaissances pour spécifier :

  1. La couleur du titre de la page : bleu (règle color:)
  2. La couleur du fond du titre : orange (règle background-color:)
  3. La taille du titre de la page : plus petite que celle d'origine (mais plus grande que la police courante) (règle font-size:)

Résultat final : Page attendue