Sommaire

Temps de lecture approximative : 17 minutes

Chapitre 6 - Typographie

Dans ce chapitre, nous nous consacrerons à mettre en forme nos textes. Ils sont restés trop longtemps sans style. A l'issue de ce cours, vous serez, entre autres, capables de modifier la police d'un texte ainsi que sa couleur.

Famille de police (font-family:)

A l'instar de tous les logiciels de traitement de texte ou autre, le CSS permet de déterminer, pour un élément HTML, la police qui sera utilisée pour le texte. Ceci grâce à la propriété : font-family:. Cette propriété accepte une liste de polices. Il faut séparer les polices avec des virgules : ,. En effet, si le navigateur web ne supporte pas la première police, il essaie la police suivante, et ainsi de suite. Les polices suivantes sont appelées des fallbacks. Bien évidemment, l'ordre de priorité s'effectue de la gauche vers la droite.

Si le nom de la police que vous souhaitez utiliser contient plus d'un mot, le nom de cette dernière doit être entre guillemets, comme ci-après : font-family: "Times New Roman";.

<p class="times-new-roman">Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num <strong>Maelium</strong> debuerunt iuvare?</p>
<p class="verdana">Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num <strong>Maelium</strong> debuerunt iuvare?</p>

p.times-new-roman {
   font-family: "Times new roman", Arial;
}
p.verdana {
   font-family: Verdana;
}

Profitons de discuter de famille de police, pour expliquer la différence entre une police avec et sans serif. Plutôt qu'un long discours, l'image ci-dessous sera très largement explicite.

Style de la police (font-style:)

La propriété font-style: permet de définir le style de la police. En réalité, elle permet principalement de déterminer si la police est en italique ou non. La propriété accepte trois valeurs :

• normal : le texte est affiché normalement, sans modification.
• italic : le texte est affiché en italique.
• oblique : très similaire à italic, le texte est affiché en oblique.

<p class="normal">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>
<p class="italic">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>
<p class="oblique">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>

p.normal {
   font-style: normal;
}
p.italic {
   font-style: italic;
}
p.oblique {
   font-style: oblique;
}

Taille de la police (font-size:)

La propriété font-size: permet tout simplement de définir la taille du texte. Il est possible d'utiliser plusieurs unités. Afin de faciliter notre apprentissage, nous utiliserons principalement l'unité pixel.

<p class="sosmall">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>
<p class="sobig">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>

p.sosmall {
   font-size: 14px;
}
p.sobig {
   font-size: 24px;
}

Épaisseur de la police (font-weight:)

La propriété font-weight: permet de définir l'épaisseur de la police. Cette dernière accepte plusieurs valeurs, mais nous allons retenir seulement les deux principales, à savoir :

• normal : le texte est affiché normalement.
• bold : le texte est affiché en gras.

<p class="normal">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>
<p class="bold">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>

p.normal {
   font-weight: normal;
}
p.bold {
   font-weight: bold;
}

Alignement horizontal (text-align:)

La propriété text-align: est utilisée pour définir l'alignement horizontal d'un texte. Un texte peut être aligné à gauche, à droite, centré ou justifié. Ci-après un exemple avec les 4 valeurs possibles.

<p class="left">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas.</p>
<p class="center">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas.</p>
<p class="right">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas.</p>
<p class="justify">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas.</p>

p.left {
   text-align: left;
}
p.center {
   text-align: center;
}
p.right {
   text-align: right;
}
p.justify {
   text-align: justify;
}

Décoration du texte (text-decoration:)

La propriété text-decoration: est utilisée pour définir ou supprimer les décorations du texte. Cette propriété est principalement utilisée pour ajouter ou supprimer des soulignements. Pour l'élément <a>, la valeur par défaut est underline. Les valeurs possibles sont les suivantes :

• none : aucune décoration.
• underline : le texte sera souligné.
• line-through : le texte sera barré.
• overline : le texte sera surligné (au dessus du texte).

<p>Le <a href="http://www.zombieipsum.com">zombie ipsum</a> est une alternative au lorem ipsum.</p>
<p class="underline">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>
<p class="line-through">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>
<p class="overline">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>

a {
   text-decoration: none;
}
p.underline {
   text-decoration: underline;
}
p.line-through {
   text-decoration: line-through;
}
p.overline {
   text-decoration: overline;
}

Il n'est pas recommandé de souligner un texte qui n'est pas un lien pour éviter toutes confusions pour l'utilisateur.

Transformation du texte (text-transform:)

Derrière ce titre un peu curieux se cache la propriété qui permet de spécifier des majuscules et des minuscules dans un texte. Il peut être utilisé pour transformer tout en majuscules ou minuscules, ou mettre en majuscule la première lettre de chaque mot. Découvrons les valeurs possibles.

<p class="uppercase">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>
<p class="lowercase">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>
<p class="capitalize">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>

p.uppercase {
   text-transform: uppercase;
}
p.lowercase {
   text-transform: lowercase;
}
p.capitalize {
   text-transform: capitalize;
}

Coloration du texte (color:)

Depuis le début du cours sur le CSS, nous utilisons en exemple la propriété color: car elle est très explicite. Cette dernière permet d'ajouter de la couleur à un texte. Il existe plusieurs types de valeurs pour cette propriété. Nous nous focaliserons uniquement sur les noms des couleurs et les valeurs en hexadécimal.

Il est donc possible de définir la couleur de son texte grâce à un nom. Il en existe plus d'une centaine. Il y a malheureusement un inconvénient avec cette méthode : on est rapidement limité. Il faut alors se tourner vers un autre format. Ci-après des exemples de nom de couleur.

• crimson : Exemple
• deeppink : Exemple
• greenyellow : Exemple
• peru : Exemple
• rebeccapurple : Exemple

Pour la liste complète des noms des couleurs en CSS.

Le deuxième format sur lequel nous nous attarderons est l'hexadécimal. Si on fait abstraction des explications techniques, il faut retenir que chaque couleur peut être identifiée par un code hexadécimal. Avec ce format, on n'est plus limité et on peut être très précis. Une valeur hexadécimale commence toujours par un dièse/croisillon : #. Depuis les logiciels de retouche et de traitement d'images, comme PhotoShop ou Gimp, on peut facilement récupérer la valeur hexadécimale d'une couleur. Il existe également des sites dédiés. Étant donné que chaque couleur possède un code hexadécimal et que ce dernier est plus précis, il faut comprendre que les noms des couleurs sont tout simplement des racourcis. Par exemple, la valeur red et #FF0000 colore le texte de la même manière. Ci-après quelques exemples de couleurs en hexadécimal.

• #FF0000 : Exemple
• #4169E1 : Exemple
• #9ACD32 : Exemple
• #FF4500 : Exemple
• #B0C4DE : Exemple

Espace entre les lignes de texte (line-height:)

La propriété line-height: permet de modifier l'espace, la distance ou l'écartement entre les lignes de texte. La propriété line-height: accepte comme valeurs des mots-clés (normal et none) ainsi que des nombres avec différentes unités. On peut également ne pas définir d'unité et simplement indiqué un nombre simple. Dans ce cas, le nombre représente un facteur multiplicateur de la taille de la police appliquée à l'élément.

<p class="lh1">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>
<p class="lh2">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>
<p class="lh3">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>

p.lh1 {
   line-height: 1.5;
}
p.lh2 {
   line-height: 2;
}
p.lh3 {
   line-height: 2.5;
}

Espace entre les caractères et les mots (letter-spacing: et word-spacing:)

La propriété letter-spacing: définit l'interlettre, c'est à dire l'espace horizontal entre deux caractères, utilisée pour les caractères qui composent le texte de l'élément ciblé.

La propriété word-spacing: définit l'espace horizontal entre les mots ou balises, qui composent le texte de l'élément ciblé.

A noter que les valeurs des espaces précisées pour letter-spacing: et word-spacing: viendront s'ajouter à l'espace par défaut défini par la police utilisée. Les deux propriétés acceptent comme valeurs le mots-clé normal ainsi que des nombres avec différentes unités (% et px par exemple).

<p class="ls1">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>
<p class="ls2">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>

<p class="ws1">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>
<p class="ws2">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia ?</p>

p.ls1 {
   letter-spacing: normal;
}
p.ls2 {
   letter-spacing: 3px;
}
p.ws1 {
   word-spacing: normal;
}
p.ws2 {
   word-spacing: 25px;
}

Conclusion

Ce chapitre se termine et le cours sur le CSS touche à sa fin. Cette initiation vous aura offert les bases dans ce langage. Vous pouvez désormais travailler sur les exercices pour vous perfectionner. Il y a également un quiz pour tester vos connaissances.

Nous n'avons volontairement pas abordé certains points du CSS, notamment comme le positionnement des éléments (position:). Si vous souhaitez apprendre davantage, vous trouverez de nombreuses ressources, cours, tutos sur le CSS sur le web.