Texte et typographie

The CSS Podcast - 036 : Texte et typographie

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

Lorsque vous créez un site Web, vous n'avez pas forcément besoin de mettre en forme votre texte. En effet, le langage HTML propose une mise en forme par défaut plutôt raisonnable.

Toutefois, le texte constitue probablement la majorité de votre site Web. Il est donc intéressant d'ajouter du style pour l'embellir. En modifiant quelques propriétés de base, vous pouvez améliorer considérablement l'expérience de lecture de vos utilisateurs.

Dans ce module, nous allons commencer par la règle @font-face, qui vous permet d'importer des polices personnalisées dans vos pages Web. Vous êtes ainsi sûr de disposer de la typographie exacte dont vous avez besoin, indépendamment des polices installées par l'utilisateur.

Nous aborderons ensuite les propriétés de police CSS essentielles, y compris font-family, font-style, font-weight et font-size. Ces bases permettent de manipuler le texte pour le style et la lisibilité.

Nous aborderons également les propriétés spécifiques aux paragraphes, telles que text-indent et word-spacing, avant de conclure avec des sujets avancés tels que les polices variables et les pseudo-éléments, qui affinent davantage votre contrôle typographique.

Des exemples pratiques et des conseils seront fournis tout au long du cours pour vous aider à mieux comprendre et appliquer ces techniques CSS.

La règle @font-face

La règle CSS @@font-face est essentielle dans la conception Web. Elle vous permet de spécifier et d'utiliser des polices personnalisées pour afficher du texte. La beauté de @font-face réside dans sa polyvalence : elle vous permet de trouver des polices sur un serveur distant ou à partir d'une police installée sur l'appareil de l'utilisateur.

Syntaxe

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

Descripteurs

ascent-override
Personnalise la métrique d'ascension, ce qui a un impact sur l'espace au-dessus de la ligne de base.
descent-override
Ajuste la métrique de descente, ce qui affecte l'espace sous la ligne de base.
font-display
Contrôle le comportement d'affichage de la police en fonction de son état de téléchargement.
font-family
Nomme la police à utiliser dans les propriétés liées aux polices.
font-stretch
Définit la mise à l'échelle horizontale acceptable, spécifiée sous forme de valeur unique ou de plage.
font-style
Définit le style de la police et accepte les plages d'angles pour les styles italiques.
font-weight
Détermine l'épaisseur ou la plage d'épaisseurs disponibles pour la police.
font-feature-settings
Permet d'accéder aux fonctionnalités des polices OpenType.
font-variation-settings
Permet de contrôler précisément les paramètres des polices variables.
line-gap-override
Remplace l'espacement par défaut entre les lignes de la police.
size-adjust
Applique un facteur de scaling au contour et aux métriques de la police.
src
Définit la source de la police, qu'elle soit locale ou distante. Cela est obligatoire pour la règle @font-face. La combinaison de url() et local() dans src est une stratégie courante qui utilise une police locale si elle est disponible, et revient à un fichier de police distant en cas d'échec. Les navigateurs hiérarchisent les ressources en fonction de l'ordre de déclaration. Par conséquent, local() doit généralement précéder url().
unicode-range
 Limite les caractères pour lesquels cette police doit être utilisée.

Description

@font-face libère les concepteurs des contraintes liées aux polices "Web Safe" en leur permettant d'utiliser une typographie personnalisée. La capacité de la fonction local() à rechercher une police sur l'appareil de l'utilisateur offre une expérience fluide qui ne dépend pas nécessairement d'une connexion Internet.

Types MIME de police

Format Type MIME
TrueType font/ttf
OpenType font/otf
Web Open Font Format font/woff
Web Open Font Format 2 font/woff2

Différence entre @font-face et font-family

Dans les CSS, @font-face et font-family sont souvent confondus, mais ils ont des objectifs distincts.

Comme nous l'avons vu, @font-face est une règle utilisée pour définir les polices personnalisées que vous souhaitez utiliser dans votre application Web. Il indique au navigateur où télécharger la police, comment l'afficher pendant le chargement (avec la propriété font-display) et spécifie le sous-ensemble de caractères à télécharger (avec unicode-range).

En revanche, font-family est une propriété CSS utilisée dans une règle CSS pour attribuer une police spécifique ou une liste de polices à un élément. Les polices listées sous font-family peuvent être des polices Web, des polices système ou des polices personnalisées définies avec @font-face.

En résumé, @font-face déclare une police et lui donne un nom, et font-family applique cette police déclarée aux éléments HTML.

Voici un exemple d'utilisation des deux :

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

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

Dans cet exemple, @font-face définit "CustomFont" et indique au navigateur où le trouver. La propriété font-family l'applique ensuite à l'élément body, avec Arial comme police de secours si "CustomFont" n'est pas disponible.

Modifier la typographie

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Utilisez font-family pour modifier la typographie de votre texte.

La propriété font-family accepte une liste de chaînes séparées par une virgule, faisant 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 (consultez la liste complète des options sur MDN). Le navigateur affichera la première typographie 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 général, la famille de polices générique de remplacement doit être semblable à vos polices préférées. Par exemple, si vous utilisez font-family: "Helvetica" (une famille de polices sans serif), votre police de remplacement doit être sans-serif pour correspondre.

Utiliser des polices italiques et obliques

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

Mettre du texte en gras

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

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

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

Modifier la taille du texte

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

En plus des valeurs de longueur et de pourcentage, font-size accepte certaines valeurs de mot clé 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 à la font-size de l'élément parent.

Modifier l'espace entre les lignes

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Utilisez letter-spacing pour contrôler l'espace horizontal entre les caractères de votre texte. Cette propriété accepte les 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 suivante, essayez de sélectionner une lettre individuelle pour voir la taille de sa boîte aux lettres et comment elle change avec letter-spacing.

Modifier l'espace entre les mots

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Utilisez word-spacing pour augmenter ou diminuer l'espacement entre les mots de votre texte. Cette propriété accepte les valeurs de longueur telles que em, px et rem. Notez que la longueur que vous spécifiez correspond à l'espace supplémentaire en plus de l'espacement normal. Cela signifie que word-spacing: 0 équivaut à word-spacing: normal.

font abréviation

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.

Consultez l'article font de MDN pour savoir comment ordonner ces propriétés.

## Modifier la casse du texte

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Utilisez [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) pour modifier la casse de votre texte sans avoir à modifier le code HTML sous-jacent. Cette propriété accepte les valeurs de mot clé suivantes : "uppercase", "lowercase" et "capitalize".

Ajouter des soulignements, des suslignements et des traits barrés au texte

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Utilisez text-decoration pour ajouter des lignes à votre texte. Les soulignements sont les plus courants, mais vous pouvez également ajouter des lignes au-dessus ou au milieu de votre texte.

La propriété text-decoration est une abréviation des propriétés plus spécifiques détaillées juste avant.

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 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 une abréviation de toutes les propriétés précédentes.

Ajouter un retrait à votre texte

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

Gérer le contenu masqué ou qui déborde

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3.

Source

Utilisez text-overflow pour spécifier la façon dont le contenu masqué est représenté. Deux options sont disponibles : clip (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 les espaces

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

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

Contrôler la façon dont les mots sont coupés

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

Source

Utilisez word-break pour modifier la façon dont les mots doivent être "coupés" lorsqu'ils dépassent la ligne. Par défaut, le navigateur ne coupe pas les mots. Si vous utilisez la valeur de mot clé break-all pour word-break, le navigateur sera invité à couper les mots au niveau de chaque caractère si nécessaire.

Modifier l'alignement du texte

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 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 mot clé left, right, start, end, center, justify et match-parent.

Les valeurs left et right alignent respectivement le texte sur les côtés gauche et droit du bloc.

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 arabe, qui s'écrit de droite à gauche (RTL). Il s'agit d'alignements logiques. Pour en savoir plus, consultez notre module sur les propriétés logiques.

Utilisez center pour aligner le texte au centre du bloc.

La valeur justify organise le texte et modifie automatiquement l'espacement entre les mots pour que le texte s'aligne sur les bords gauche et droit du bloc.

Contrôler le retour à la ligne du texte

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Source

Utilisez text-wrap pour modifier la façon dont le texte d'un élément est renvoyé à la ligne.

Les mots clés acceptés pour cette propriété incluent wrap, nowrap, balance et stable. La valeur par défaut est wrap, qui minimise le débordement en renvoyant le texte à la ligne en fonction des espaces normaux et des césures.

Vous pouvez utiliser le mot clé nowrap pour obtenir l'effet inverse et empêcher le texte de passer à la ligne, ce qui peut entraîner un dépassement.

Pour obtenir la même quantité de texte sur chaque ligne lorsque vous écrivez, par exemple, des titres ou des en-têtes, utilisez le mot clé balance. Pour améliorer les performances, les navigateurs n'appliqueront cette valeur qu'aux éléments comportant six lignes de texte ou moins.

Le mot clé stable fonctionne de la même manière que wrap, mais est destiné à être utilisé avec du texte contenteditable. Lorsque text-wrap: stable est défini, les lignes au-dessus du contenu en cours de modification ne se déplacent pas pendant le processus.

Parfois, les chaînes de caractères longues sans point de rupture clair peuvent déborder des conteneurs. Pour contrôler la façon dont ce type de texte est coupé, utilisez overflow-wrap.

Browser Support

  • Chrome: 23.
  • Edge: 18.
  • Firefox: 49.
  • Safari: 7.

Source

Les mots clés que vous pouvez utiliser pour cette propriété sont normal, break-word et anywhere. Le paramètre par défaut est normal. Le texte ne sera pas renvoyé à la ligne suivante, sauf s'il contient des espaces ou des points de rupture naturels.

Les valeurs anywhere et break-word ajoutent des points d'arrêt n'importe où dans la chaîne pour éviter le débordement. Les mots clés diffèrent dans leur façon de répondre à une taille min-content intrinsèque ou explicite. Le mot clé anywhere autorise toutes les opportunités de retour à la ligne souple possibles. La valeur break-word ne le fait pas et rendrait le texte aussi long que le mot le plus long.

Modifier le sens du texte

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Utilisez direction pour définir le sens du texte : ltr (de gauche à droite, par défaut) ou rtl (de droite à gauche). Certaines langues, comme l'arabe, l'hébreu ou le persan, s'écrivent de droite à gauche. Il faut donc utiliser direction: rtl. Pour l'anglais et toutes les autres langues qui se lisent de gauche à droite, utilisez direction: ltr.

Modifier le flux de texte

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 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 faire défiler horizontalement.

Modifier l'orientation du texte

Browser Support

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 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 lorsque writing-mode est défini sur une valeur autre que horizontal-tb.

Ajouter une ombre au texte

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

Utilisez text-shadow pour ajouter une ombre à votre 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 l'importation de différents fichiers pour les différentes versions de la typographie, comme le gras, l'italique ou le condensé. Les polices variables sont des polices qui peuvent contenir de nombreuses variantes d'une typographie dans un seul fichier.

Roboto Flex dans des combinaisons aléatoires de largeur et d'épaisseur

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

Pseudo-éléments

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 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 de texte.

Pseudo-élément ::selection

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

La propriété font-variant est une abréviation 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. Pour en savoir plus sur l'utilisation de chaque propriété, consultez les liens correspondants.

Vérifier que vous avez bien compris

Tester vos connaissances en typographie sur le Web

Parmi les mots clés suivants, lequel peut être utilisé comme solution de secours 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 pour font-family.
sci-fi
Réessayez. Toutefois, fantasy est une solution 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 est utilisée pour convertir la première lettre de chaque mot en majuscule ? Par 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 peut être utilisée pour modifier l'espacement entre les lignes de texte ?

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

Ressources