Texte et typographie

Podcast CSS – 036: texte et typographie

Le texte est l'un des éléments constitutifs du Web.

Lorsque vous créez un site Web, vous n'avez pas forcément besoin de styliser votre texte. HTML a en fait un style par défaut assez raisonnable.

Toutefois, le texte représentera probablement la majeure partie du contenu de votre site Web. Il est donc utile d'ajouter un style à votre site pour le rafraîchir. En modifiant quelques propriétés de base, vous pouvez considérablement améliorer l'expérience de lecture de vos utilisateurs !

Dans ce module, nous allons commencer par examiner certaines propriétés fondamentales des polices CSS, telles que font-family, font-style, font-weight et font-size. Ensuite, nous nous intéresserons aux propriétés qui affectent les paragraphes de texte, telles que text-indent et word-spacing. Enfin, nous aborderons des sujets plus avancés, tels que les polices variables et les pseudo-éléments.

Modifier la police de caractères

Navigateurs pris en charge

  • 1
  • 12
  • 1
  • 1

Source

Utilisez font-family pour modifier la police de caractères de votre texte.

La propriété font-family accepte une liste de chaînes séparées par une virgule, qui font référence à des familles de polices spécifiques ou génériques. Les familles de polices spécifiques sont des chaînes entre guillemets, telles que "Helvetica", "EB Garamond" ou "Times New Roman". Les familles de polices génériques sont des mots clés tels que serif, sans-serif et monospace (la liste complète des options est disponible sur MDN). Le navigateur affiche la première police de caractères disponible dans la liste fournie.

Lorsque vous utilisez font-family, vous devez spécifier au moins une famille de polices générique au cas où le navigateur de l'utilisateur ne dispose pas de vos polices préférées. En règle générale, la famille de polices générique de remplacement doit être semblable à vos polices préférées: si vous utilisez font-family: "Helvetica" (famille de polices sans empattement), la police de remplacement doit être sans-serif.

Utiliser des polices italiques et obliques

Navigateurs pris en charge

  • 1
  • 12
  • 1
  • 1

Source

Utilisez font-style pour indiquer si le texte doit être en italique ou non. font-style accepte l'un des mots clés suivants: normal, italic et oblique.

Mettre le texte en gras

Navigateurs pris en charge

  • 2
  • 12
  • 1
  • 1

Source

Utilisez font-weight pour définir la "gras" du texte. Cette propriété accepte les valeurs de mots clés (normal, bold), les valeurs de mots clés relatives (lighter, bolder) et les valeurs numériques (100 à 900).

Les mots clés normal et bold correspondent respectivement aux valeurs numériques 400 et 700.

Les mots clés lighter et bolder sont calculés par rapport à l'élément parent. Consultez le tableau Signification des pondérations relatives de MDN pour obtenir un tableau pratique montrant comment cette valeur est déterminée.

Modifier la taille du texte

Navigateurs pris en charge

  • 1
  • 12
  • 1
  • 1

Source

Utilisez font-size pour contrôler la taille de vos éléments textuels. Cette propriété accepte les valeurs de longueur, les pourcentages et quelques valeurs de mots clés.

En plus des valeurs de longueur et de pourcentage, font-size accepte des valeurs de mots clés absolues (xx-small, x-small, small, medium, large, x-large, xx-large) et quelques valeurs de mot clé relatives (smaller, larger). Les valeurs relatives sont relatives au font-size de l'élément parent.

Modifier l'espace entre les lignes

Navigateurs pris en charge

  • 1
  • 12
  • 1
  • 1

Source

Utilisez line-height pour spécifier la hauteur de chaque ligne d'un élément. Cette propriété accepte un nombre, une longueur, un pourcentage ou le mot clé normal. En règle générale, il est recommandé d'utiliser un nombre plutôt qu'une longueur ou un pourcentage pour éviter les problèmes d'héritage.

Modifier l'espace entre les caractères

Navigateurs pris en charge

  • 1
  • 12
  • 1
  • 1

Source

Utilisez letter-spacing pour contrôler la quantité d'espace horizontal entre les caractères dans votre texte. Cette propriété accepte des valeurs de longueur telles que em, px et rem.

Notez que la valeur spécifiée augmente l'espace naturel entre les caractères. Dans la démonstration ci-dessous, essayez de sélectionner une lettre individuelle pour voir la taille de son format letterbox et comment elle change avec letter-spacing.

Modifier l'espace entre les mots

Navigateurs pris en charge

  • 1
  • 12
  • 1
  • 1

Source

Utilisez word-spacing pour augmenter ou réduire la longueur de l'espace entre chaque mot du texte. Cette propriété accepte des valeurs de longueur telles que em, px et rem. Notez que la longueur que vous spécifiez est un espace supplémentaire qui vient s'ajouter à l'espacement normal. Cela signifie que word-spacing: 0 équivaut à word-spacing: normal.

font raccourci

Vous pouvez utiliser la propriété abrégée font pour définir plusieurs propriétés liées à la police à la fois. Les propriétés possibles sont font-family, font-size, font-stretch, font-style, font-variant, font-weight et line-height.

Pour en savoir plus sur le classement de ces établissements, consultez l'article font de l'équipe deMDN.

Modifier la casse du texte

Navigateurs pris en charge

  • 1
  • 12
  • 1
  • 1

Source

Utilisez text-transform pour modifier la casse de votre texte sans avoir à changer le code HTML sous-jacent. Cette propriété accepte les valeurs de mots clés suivantes: uppercase, lowercase et capitalize.

Souligner, superposer et aligner le texte

Navigateurs pris en charge

  • 1
  • 12
  • 1
  • 1

Source

Utilisez text-decoration pour ajouter des lignes à votre texte. Les traits de soulignement sont les plus couramment utilisés, mais vous pouvez ajouter des lignes au-dessus de votre texte ou juste à côté !

La propriété text-decoration est un raccourci pour les propriétés plus spécifiques détaillées ci-dessous.

La propriété text-decoration-line accepte les mots clés underline, overline et line-through. Vous pouvez également spécifier plusieurs mots clés pour plusieurs lignes.

La propriété text-decoration-color définit la couleur de toutes les décorations à partir de text-decoration-line.

La propriété text-decoration-style accepte les mots clés solid, double, dotted, dashed et wavy.

La propriété text-decoration-thickness accepte toutes les valeurs de longueur et définit l'épaisseur du trait de toutes les décorations à partir de text-decoration-line.

La propriété text-decoration est un raccourci pour toutes les propriétés ci-dessus.

Ajouter un retrait à votre texte

Navigateurs pris en charge

  • 1
  • 12
  • 1
  • 1

Source

Utilisez text-indent pour ajouter un retrait à vos blocs de texte. Cette propriété peut avoir une longueur (par exemple, 10px ou 2em) ou un pourcentage de la largeur du bloc conteneur.

Gérer les dépassements ou les contenus masqués

Navigateurs pris en charge

  • 1
  • 12
  • 7
  • 1.3

Source

Utilisez text-overflow pour spécifier la manière dont le contenu caché est représenté. Il existe deux options: clip (valeur par défaut), qui tronque le texte au point de dépassement, et ellipsis, qui affiche des points de suspension (...) au point de dépassement.

Contrôler l'espace blanc

Navigateurs pris en charge

  • 1
  • 12
  • 1
  • 1

Source

La propriété white-space permet de spécifier la façon dont les espaces blancs dans un élément doivent être gérés. Pour en savoir plus, consultez l'article white-space sur MDN.

white-space: pre peut être utile pour afficher l'art ASCII ou des blocs de code soigneusement mis en retrait.

Contrôler la rupture des mots

Navigateurs pris en charge

  • 1
  • 12
  • 15
  • 3

Source

Utilisez word-break pour modifier la façon dont les mots doivent être "rompus" lorsqu'ils dépasseraient la ligne. Par défaut, le navigateur ne divise pas les mots. Si vous utilisez la valeur de mot clé break-all pour word-break, le navigateur devra diviser les mots au niveau de chaque caractère, si nécessaire.

Modifier l'alignement du texte

Navigateurs pris en charge

  • 1
  • 12
  • 1
  • 1

Source

Utilisez text-align pour spécifier l'alignement horizontal du texte dans un élément de bloc ou de cellule de tableau. Cette propriété accepte les valeurs de mots clés left, right, start, end, center, justify et match-parent.

Les valeurs left et right alignent le texte à gauche et à droite du bloc, respectivement.

Utilisez start et end pour représenter l'emplacement du début et de la fin d'une ligne de texte dans le mode d'écriture actuel. Par conséquent, start correspond à left en anglais et à right en caractères arabe qui s'écrit de droite à gauche. Ce sont des alignements logiques. Pour en savoir plus, consultez notre module Propriétés logiques.

Utilisez center pour aligner le texte au centre du bloc.

La valeur de justify organise le texte et modifie automatiquement l'espacement entre les mots, de sorte que le texte soit aligné avec les bords gauche et droit du bloc.

Modifier l'orientation du texte

Navigateurs pris en charge

  • 2
  • 12
  • 1
  • 1

Source

Utilisez direction pour définir l'orientation du texte : ltr (de gauche à droite, valeur par défaut) ou rtl (de droite à gauche). Certaines langues, comme l'arabe, l'hébreu ou le persan s'écrivant de droite à gauche. Vous devez donc utiliser direction: rtl. Pour l'anglais et toutes les autres langues se lisant de gauche à droite, utilisez direction: ltr.

Modifier le flux de texte

Navigateurs pris en charge

  • 48
  • 12
  • 41
  • 10.1

Source

Utilisez writing-mode pour modifier la façon dont le texte s'affiche et est organisé. La valeur par défaut est horizontal-tb, mais vous pouvez également définir writing-mode sur vertical-lr ou vertical-rl pour le texte que vous souhaitez déplacer horizontalement.

Modifier l'orientation du texte

Navigateurs pris en charge

  • 48
  • 79
  • 41
  • 14

Source

Utilisez text-orientation pour spécifier l'orientation des caractères dans votre texte. Les valeurs valides pour cette propriété sont mixed et upright. Cette propriété n'est pertinente que si writing-mode est défini sur une valeur autre que horizontal-tb.

Ajouter une ombre à du texte

Navigateurs pris en charge

  • 2
  • 12
  • 3.5
  • 1.1

Source

Utilisez text-shadow pour ajouter une ombre au texte. Cette propriété attend trois longueurs (x-offset, y-offset et blur-radius) et une couleur.

Pour en savoir plus, consultez la section text-shadow de notre module sur les ombres.

Polices variables

En règle générale, les polices « normales » nécessitent d’importer différents fichiers pour différentes versions de la police de caractères (par exemple, en gras, en italique ou condensé). Les polices variables sont des polices qui peuvent contenir de nombreuses variantes différentes d'une police de caractères dans un même fichier.

Roboto Flex dans des combinaisons aléatoires de largeur et de poids

Pour en savoir plus, consultez notre article sur les polices variables.

Pseudo-éléments

Pseudo-éléments ::first-letter et ::first-line

Navigateurs pris en charge

  • 1
  • 12
  • 1
  • 1

Source

Les pseudo-éléments ::first-letter et ::first-line ciblent respectivement la première lettre et la première ligne d'un élément textuel.

Pseudo-élément ::selection

Navigateurs pris en charge

  • 1
  • 12
  • 62
  • 1.1

Source

Utilisez le pseudo-élément ::selection pour modifier l'apparence du texte sélectionné par l'utilisateur.

Lorsque vous utilisez ce pseudo-élément, seules certaines propriétés CSS peuvent être utilisées: color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.

font-variant

Navigateurs pris en charge

  • 1
  • 12
  • 1
  • 1

Source

La propriété font-variant est un raccourci pour un certain nombre de propriétés CSS qui vous permettent de choisir des variantes de police telles que small-caps et slashed-zero. Les propriétés CSS incluses dans ce raccourci sont font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures et font-variant-numeric. Consultez les liens sur chaque propriété pour en savoir plus sur son utilisation.

Testez vos connaissances

Tester vos connaissances en typographie sur le Web

Lequel des mots clés suivants peut être utilisé comme mot clé de remplacement générique font-family ?

serif
Bonne réponse !
monospace
Bonne réponse !
italic
Réessayez. italic est un mot clé valide pour font-style, et non font-family.
sci-fi
Réessayez. Cependant, fantasy est une valeur de remplacement générique valide pour font-family.
sans-serif
Bonne réponse !
helvetica
Réessayez. "Helvetica" n'est pas un mot clé générique, mais fait référence à une famille de polices spécifique.

Quelle instruction permet de convertir la première lettre de chaque mot en majuscules ? Exemple : This is a sentence. ➡ This Is A Sentence.

text-capitalize: true;
Réessayez.
text-case: capitalize;
Réessayez.
text-transform: capitalize;
Bonne réponse !
font-style: capitals;
Réessayez.
font-variant: capitalize;
Réessayez.

Vrai ou faux: utilisez text-orientation pour aligner le texte à gauche, à droite ou au centre.

Vrai
Réessayez. text-orientation modifie la rotation des lettres sur une ligne.
Faux
Bonne réponse ! text-orientation modifie la rotation des lettres sur une ligne. Utilisez text-align pour aligner le texte à gauche, à droite ou au centre (et plus encore).

Quelle propriété CSS permet de modifier l'espace entre les lignes de texte ?

line-spacing
Réessayez.
leading
Réessayez. Dans la typographie, le terme début est le terme utilisé pour désigner l'espace entre les lignes, mais il ne s'agit pas d'une propriété CSS valide.
baseline-distance
Réessayez.
line-height
Bonne réponse !

Ressources