Typographie

Elle consiste à modifier la présentation du texte en choisissant différentes polices de caractères et en modifiant les paramètres (taille, style, graisse, etc).

Propriétés CSS

`font-family`

Cette propriété a pour valeur une liste, par ordre de préférence, de polices de caractères désignées par leur nom et séparées par une virgule. Dans la mesure où une police de caractères spécifique risque d'être absente du système d'exploitation de l'internaute qui consulte votre page Web, il est recommandé de finir la liste des polices de caractères par le nom d'une des cinq familles de polices prédéfinies.

serif: Polices de caractères avec empattement (décorations aux extrémités des lettres).
Exemples : Georgia, Times, Times New Roman.
sans-serif: Polices de caractères sans empattement.
Exemples : Arial, Verdana, Helvetica
monospace: Polices de caractères à chasse fixe : la largeur de chaque caractère est identique.
Exemples : Courrier, Courrier New
cursive: Polices de caractères imitant l'écriture manuelle.
Exemples : Comic Sans MS, Monotype Corsiva
fantasy: Polices de caractères fantaisistes.
Exemples : Impact, Haettenschweiller

Le code CSS ci-dessous illustre l'utilisation de la propriété font-family pour l'élément body. De cette manière, tous les éléments HTML hériteront de cette propriété et utiliseront par défaut la police sélectionnée.

body {
  font-family: Helvetica, Arial, sans-serif;
}

Exercice

Modifiez le fichier emoticons.html afin que les emoticons soient affichés avec une police de caractères à chasse fixe.

Correction

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Emoticons</title>
    <style>
      span {
        font-family: monospace;
        }
    </style>
  </head>
  <body>
    <h1>Emoticons</h1>

    <p>
      Emoticons are textual portrayals of a writer's moods or facial
      expressions in the form of icons. Originally, these icons
      consisted of ASCII art.
    </p>

    <p>
      Emoticons can generally be divided into two groups: Western (mainly
      from America and Europe) or horizontal; Eastern or vertical (mainly
      from east Asia).
    </p>

    <h2>Western</h2>

    <p>
      Western style emoticons are mostly written from left to right as
      though the head is rotated counter-clockwise 90 degrees. 
    </p>

    <p>
      Smiley: <span>:‑) :-&gt;</span><br>
      Tongue-tied: <span>:‑&amp;</span><br>
      Broken heart: <span>&lt;\3</span><br>
      Rose: <span>@}-&gt;--</span><br>
      Fish: <span>&gt;&lt;(((*&gt;</span><br>
    </p>

    <h2>Eastern</h2>

    <p>
      Eastern emoticons generally are not rotated sideways. They first
      arose in Japan, where they are referred to as kaomoji. 
    </p>

    <p>
      Troubled: <span>(&gt;_&lt;)</span><br>
      Sad: <span>(&quot;_&quot;)</span><br>
      Cat: <span>(=^·^=)</span><br>
      Headphones: <span>((d[-_-]b))</span><br>
    </p>
  </body>
</html>

`@font-face`

Mais on peut désormais utiliser la règle CSS3 @font-face afin de forcer le navigateur à utiliser une police de caractères fournie par le site Web. L'inconvénient de cette méthode réside dans le temps de chargement du fichier contenant les différentes variantes (gras, italique, petites capitales, ...) de la police de caractères.

Formats de fichier pour le Web
`.woff`	Web Open Font Format
`.otf`	OpenType Font
`.ttf`	TrueType Font

/*
Arborescence des dossiers :

css/
  style.css
  fonts/
    lovelyFont.woff
    lovelyFont.otf
    lovelyFont.ttf
*/

@font-face {
  font-family: 'myFont';
  src: url('fonts/lovelyFont.woff') format('woff'),
       url('fonts/lovelyFont.otf')  format('opentype'),
       url('fonts/lovelyFont.ttf')  format('truetype');
}

body {
  font-family: myFont;
}

Il existe un certain de nombre de sites Web mettant à disposition des polices de caractères, en téléchargement.

`@import`

Cette règle CSS permet d'incorporer un fichier CSS, hébergé sur un serveur distant, définissant une nouvelle famille de polices de caractères.

@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fontlibrary.org/face/typography-times');

body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-family: 'TypographytimesRegular', serif;
}

`font-size`

Taille de la police de caractères. La taille peut être exprimée en unités absolues ou relatives. Les unités absolues sont utilisées pour des documents ayant vocation à être imprimés. Pour des documents destinés à être consultés sur écran, on privilégiera les unités relatives.

Unités absolues
`mm`	millimètres
`cm`	centimètres
`in`	pouces (inches en anglais). 1 in = 2.54 cm
`pt`	points. 1 pt = 1/72^ème in
`pc`	picas. 1 pc = 12 pt

Unités relatives
`px`	pixels Cette unité est considérée comme relative car elle dépend de la résolution de l'écran
`%`	pourcentage 100% correspond à la taille de la police de l'élément parent
`em`	proportion 1 em correspond à la taille de la police de l'élément parent
`rem`	proportion 1 rem correspond à la taille de la police de l'élément racine (`body`)

Il est recommandé d'utiliser une taille de police de référence pour l'élément body (en px pour un document Web destiné à être consulté sur écran ou en cm, in, pt pour un document destiné à être imprimé). Les tailles des éléments enfants de body sont exprimées en unités relatives % ou em. De cette manière, il est possible de modifier la taille du texte du document grâce au sélecteur body tout en respectant les proportions des différents éléments.

body {
  font-size: 16px;
}

h1 {
  font-size: 3em;
}

p {
  font-size: 1.5em;
}

span {
  font-size: 2em;
}

<h1>Un titre</h1>
<p>
  Un texte avec un mot en <span>grand</span>.
</p>

Un titre

Un texte avec un mot en grand.

Info

Les valeurs des unités relatives % et em sont cumulatives. En effet, 100% ou 1em correspondent à la taille du texte de l'élément courant. Ainsi, dans l'exemple ci-dessous, la taille du mot grand est de 16px × 1.5em × 2em = 16px × 3em = 48px !

`font-style`

Posture de la police de caractères. Cette propriété a pour valeur normal, italic ou oblique.

normal

italic

oblique

`font-weight`

Graisse de la police de caractères. Cette propriété a pour valeur lighter, normal, bold ou bolder.

lighter

normal

bold

bolder

`font-variant`

Affichage de la police de caractères en petites capitales (si la police de caractères le permet). Cette propriété a pour valeur normal ou small-caps.

normal

small-caps

`text-transform`

Casse du texte. Cette propriété a pour valeur none, uppercase, lowercase ou capitalize.

`none`	Trop de couleur distrait le spectateur. (Jacques Tati)
`uppercase`	Trop de couleur distrait le spectateur. (Jacques Tati)
`lowercase`	Trop de couleur distrait le spectateur. (Jacques Tati)
`capitalize`	Trop de couleur distrait le spectateur. (Jacques Tati)

`text-decoration`

Ligne de décoration du texte. Cette propriété a pour valeur none, overline, line-through ou underline.

none

overline

line-through

underline

`text-align`

Alignement du texte. Cette propriété a pour valeur left, center, right ou justify.

Texte aligné à gauche.

Texte centré.

Texte aligné à droite.

Texte justifié. Texte justifié. Texte justifié. Texte justifié. Texte justifié. Texte justifié. Texte justifié. Texte justifié. Texte justifié. Texte justifié.

`text-indent`

Décalage horizontal de la première ligne d'un bloc de texte. Le décalage peut être exprimé en unités absolues ou relatives.

p { text-indent: 6em; }

En 1878, reçu médecin à l’Université de Londres, je me rendis à Netley pour suivre les cours prescrits aux chirurgiens de l’armée ; et là, je complétai mes études. On me désigna ensuite, comme aide-major, pour le 5e régiment de fusiliers de Northumberland en garnison aux Indes.

Exercice

Créez une feuille de style CSS, au sein du document Web, pour les fichiers emoticons.html et twitter.html. Expérimentez les différentes propriétés CSS relatives au texte. Enfin, incorporez une police de caractères de votre choix dans votre feuille de style et observez les conséquences sur le chargement du document Web grâce aux outils de développement du navigateur.