Aller au contenu

7. L'apparence du texte

La mise en forme du texte, qu'il s'agisse de la police ou de la taille, joue un rôle essentiel : elle influence non seulement le design de votre site, mais également l'expérience et la perception de vos utilisateurs.

La taille du texte

Pour modifier la taille du texte, on utilise la propriété CSS font-size et ensuite, on indique :

  • une taille Absolue (px, cm, mm, in…) Une unité absolue est fixe et déconseillée pour un design responsive.
  • une taille Relative (%, em, rem, vw, vh…) Une unité relative est basée sur un référentiel, ce qui est très intéressant en design responsive

Notez

Indiquer une taille absolue, c’est très précis, mais il est conseillé de n'utiliser cette méthode que si on sait sur quelle taille d'écran ou dimension d'impression une personne verra le contenu de la page, car on risque d'indiquer une taille trop petite pour certains lecteurs.

Indiquer une taille relative a l'avantage d'être plus souple, elle s'adapte, selon les tailles d'écrans, plus facilement aux préférences des visiteurs.

Valeur en px

Pour indiquer une taille absolue, on utilise généralement les pixels. Pour avoir un texte de 16 pixels de hauteur, vous devez donc écrire :

CSS
font-size: 16px;

Les lettres auront une taille de 16 pixels :

Pixel

Valeur en em

Il y a plusieurs moyens d'indiquer une valeur relative. Une des plus fréquentes consiste à indiquer la taille en em.

  • Le texte a une taille normale avec 1em.
  • Le texte est plus grand avec une valeur supérieure à 1, comme 1.3em.
  • Le texte est plus petit avec une valeur inférieure à 1, comme 0.8em.

Attention tout de même à la syntaxe

Pour les nombres décimaux, il faut mettre un point et non une virgule. Vous devez donc écrire 1.4em et non pas 1,4em !

Si on le fait en HTML :

HTML
<p class="elem1">Élément 1 : 1em</p>
<p class="elem2">Élément 2 : 1.3em</p>
<p class="elem3">Élément 3 : 2em</p>

… et qu’on y associe le CSS ci-dessous :

CSS
.elem1 {
  font-size: 1em;
}

.elem2 {
  font-size: 1.3em;
}

.elem3 {
  font-size: 2em;
}

… on obtient alors le résultat suivant :

Taille en em La taille change avec l'unité em

Mais quelle est la différence entre "absolue" px et "relative" em?

Une valeur absolue en pixel comme 16px est fixe. C'est comme si je vous disais d'indiquer la taille du texte en millimètres. Si je choisis de mettre la taille d'un texte à 2 millimètres et que vous regardez ma page web depuis votre smartphone vous devriez pouvoir le lire. Maintenant, si mon site web s'affiche sur l'écran d'un stadium, à votre avis que se passera-t-il ? C'est pour cela que l'on recommande une taille relative. 16 pixels est une taille standard pour lire un texte mais peut ne pas suffire selon l'écran sur lequel il s'affiche. Une valeur relative permet de choisir une taille de la même manière qu'on utiliserait un pourcentage.

La propriété - font-family

La propriété CSS qui permet d'indiquer la police à utiliser est font-family :

CSS
#text-1 {
    font-family: Arial, Helvetica, sans-serif;
}
#text-2 {
    font-family: "Lucida Console", Courier, monospace;
}

Lorsque plusieurs typographies sont définies, le navigateur cherchera à charger la première mais se rabattra sur la suivante en cas d’échec. Il est donc d’usage de spécifier en dernier lieu une famille de police (serif, sans-serif, monospace…), de sorte à ce que le navigateur cherche lui-même, si besoin, une police adéquate dans cette famille.

Voici une liste de polices sans-sérif qui fonctionnent nativement sur la plupart des navigateurs :

  • Arial Black
  • Futura
  • Helvetica
  • Impact
  • Trebuchet MS
  • Verdana

Notez

Le sérif désigne l’empattement situé à l’extrémité des caractères. Choisir une police de caractères sans-sérif est plus judicieux en termes d’accessibilité, car c’est plus facile à lire.

Police sérif et sans-sérif Différence entre sérif et sans sérif

Il'est tout à fait possible d'utiliser n'importe quelle police sur son site, et ce sur la plupart d es navigateurs. Pour cela, il existe plusieurs méthodes, comme importer une police depuis le site de Google Fonts.

Google Fonts

Comment fait-on pour intégrer une police de Google Fonts dans nos fichiers HTML et CSS ?

Pour cela, rendez-vous sur Google Fonts pour sélectionner une police, puis :

  • Copiez les balises <link> dans le <head> </head> du fichier HTML.

  • Utilisez la propriété font-family dans le fichier CSS pour déclarer que vous voulez utiliser cette police.

Google Fonts Le code a copier dans le fichier HTML

Par exemple, pour la police Roboto, on vient coller dans le HTML :

HTML
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Et on l'utilise dans le CSS en déclarant dans notre sélecteur :

CSS
font-family: 'Roboto', sans-serif;

Notez

Ici, on s'est contenté de suivre les étapes préconisées par Google Fonts. Mais il est également possible de télécharger une police localement, et de la joindre à notre projet HTML / CSS. Mais cette technique requiert quelques étapes de plus, et n'est pas forcément nécessaire lorsque vous débutez. Néanmoins, vous trouverez un exemple de ce genre de téléchargement de police au format spécifique et de son utilisation en CSS juste ici.

Texte en italique - font-style

En CSS, on donne une valeur à font-style pour dire si on veut que du texte soit en italique ou non :

  • italic : le texte sera mis en italique ;
  • normal : le texte sera normal (par défaut).

Cela vous permet d'annuler une mise en italique. Par exemple, si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez écrire :

CSS
em {
  font-style: normal;
}

Texte Italique Différence entre du texte normal et du texte italique

Texte en gras - font-weight

Pour varier la graisse d'un texte, on utilise la propriété CSS font-weight à laquelle on associe une valeur, au choix :

  • bold : le texte sera en gras
  • normal : le texte sera écrit normalement (par défaut)
  • thin : le texte est plus fin.

Mais il est également possible d'être plus précis et d'indiquer l'épaisseur du texte avec une valeur numérique allant de 100 à 900, du moins épais au plus épais :

Graisse du texte Les différentes graisses (ou épaisseurs)

Notez

Pour appliquer les différents styles de texte (épaisseur et italique) pour les polices importées, il faut bien s'assurer d'avoir importé les styles de polices correspondants. Ainsi, pour utiliser la police Roboto en italique et bold, il faudra bien avoir importé dans votre code :

HTML
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,700&display=swap" rel="stylesheet">

Souligner du texte - text-decoration

La propriété CSS text-decoration permet, entre autres, de souligner le texte, mais pas seulement. Voici quelques-unes des différentes valeurs qu'elle peut prendre :

  • underline : souligné
  • line-through : barré
  • none : normal (par défaut, sauf dans le cas des liens).

Ce CSS va vous permettre de tester les effets de text-decoration:

Texte décoration Les différentes valeurs de text-decoration

Alignez du texte - text-align

Le propriété CSS text-align permet d'aligner du texte selon la valeur qu'on lui donne :

  • left : le texte sera aligné à gauche (c'est le réglage par défaut)
  • center : le texte sera centré
  • right : le texte sera aligné à droite

Alignement texte Les 3 options d'alignements classiques

  • justify : le texte sera "justifié".

Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont toujours justifiés.

Attention !

L'alignement ne fonctionne que sur des balises de type block : <p>, <div>, <h1>, … Aligner le texte d'une balise inline, comme <span>, <a>, <em>, <strong> n'est pas possible. Et c'est logique quand on y pense : on ne peut pas modifier l'alignement de quelques mots au milieu d'un paragraphe.