Podcast CSS – 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 nécessairement besoin d'appliquer un style à votre texte. En effet, HTML utilise un style par défaut assez raisonnable.
Cependant, le texte constituera probablement la majeure partie de votre site Web. Vous avez donc tout intérêt à lui ajouter un peu de style pour le peaufiner. 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 commencerons par la règle @font-face
, qui vous permet d'importer des polices personnalisées dans vos pages Web. Vous disposez ainsi de la typographie exacte dont vous avez besoin, indépendamment des polices installées par l'utilisateur.
Ensuite, nous aborderons les propriétés de police CSS essentielles, y compris font-family
, font-style
, font-weight
et font-size
. Ces principes de base servent de base à la manipulation du texte, tant pour le style que pour la lisibilité.
Nous aborderons également les propriétés spécifiques aux paragraphes, comme text-indent
et word-spacing
, avant de conclure par des sujets avancés, tels que les polices variables et les pseudo-éléments, qui permettent d'affiner davantage votre contrôle typographique.
Des exemples pratiques et des conseils vous seront fournis pour vous aider à mieux comprendre et appliquer ces techniques CSS.
La règle @font-face
La règle générale CSS @font-face
joue un rôle essentiel dans la conception Web, car elle vous permet de spécifier et d'utiliser des polices personnalisées pour afficher le texte. L'avantage de @font-face
réside dans sa polyvalence: il vous permet de générer des polices à partir d'un serveur distant ou 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 "Ascension" et a un impact sur l'espace au-dessus de la référence.
descent-override
- Ajuste la métrique de descente, qui affecte l'espace en dessous de la référence.
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 associées.
font-stretch
- Définit un scaling horizontal acceptable, spécifié sous la forme d'une valeur ou d'une plage unique.
font-style
- Définit le style de la police et prend en charge des plages d'angles pour les styles obliques.
font-weight
- Détermine l'épaisseur ou la plage d'épaisseurs de police disponibles.
font-feature-settings
- Active l'accès aux fonctionnalités de police OpenType.
font-variation-settings
- Offre un contrôle précis sur les paramètres de police variables.
line-gap-override
- Ignore l'interligne par défaut de la police.
size-adjust
- Applique un facteur de mise à l'échelle au contour et aux métriques de la police.
src
- Définit la source de la police, qu'elle soit locale ou distante. Cette étape est obligatoire pour la règle
@font-face
. Combinerurl()
etlocal()
danssrc
est une stratégie courante qui utilise une police locale (si disponible) et revient à un fichier de police distant en remplacement. Les navigateurs hiérarchisent les ressources en fonction de l'ordre de déclaration. Par conséquent,local()
doit généralement précéderurl()
. unicode-range
- Limite le nombre de caractères pour lesquels cette police doit être utilisée.
Description
@font-face
libère les concepteurs des contraintes liées aux polices "sécurisées pour le Web" 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 de police MIME
Format | Type MIME |
---|---|
TrueType | font/ttf |
OpenType | font/otf |
Format de police ouverte sur le Web | font/woff |
Format de police Open Web 2 | font/woff2 |
La différence entre @font-face et font-family
En CSS, @font-face
et font-family
sont souvent confondus, mais ils servent des objectifs distincts.
Comme nous l'avons vu, @font-face
est une règle permettant de définir les polices personnalisées que vous souhaitez utiliser dans votre application Web. Il indique au navigateur où télécharger la police et 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 particulière ou une liste de polices à un élément. Les polices répertoriées sous font-family
peuvent être des polices Web, des polices système ou des polices personnalisées définies avec @font-face
.
Pour résumer, @font-face
déclare une police et lui attribue un nom, puis 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ù la trouver. La propriété font-family
l'applique ensuite à l'élément "body", en utilisant Arial comme solution de remplacement si "CustomFont" n'est pas disponible.
Changer la police de caractères
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, 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 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-serif), votre remplacement doit être sans-serif
.
Utiliser des polices en italique et obliques
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 le texte en gras
Utilisez font-weight
pour définir le "gras" du texte. Cette propriété accepte des valeurs de mot clé (normal
, bold
), des valeurs de mots clés relatives (lighter
, bolder
) et des valeurs numériques (100
à 900
).
Les mots clés normal
et bold
sont respectivement équivalents aux valeurs numériques 400
et 700
.
Les mots clés lighter
et bolder
sont calculés par rapport à l'élément parent. Consultez l'article MDN Signification des pondérations relatives (en anglais) pour obtenir un graphique pratique montrant comment cette valeur est déterminée.
Modifier la taille du texte
Utilisez font-size
pour contrôler la taille de vos éléments de texte. Cette propriété accepte des valeurs de longueur, des pourcentages et quelques valeurs de mot clé.
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 mots clés relatives (smaller
, larger
). Les valeurs relatives sont relatives à la font-size
de l'élément parent.
Modifier l'espace entre les lignes
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
Utilisez letter-spacing
pour contrôler la quantité d'espace horizontal entre les caractères de votre texte. Cette propriété accepte des valeurs de longueur telles que em
, px
et rem
.
Notez que la valeur spécifiée augmente la quantité d'espace naturel entre les caractères. Dans la démonstration suivante, essayez de sélectionner une lettre pour voir la taille de sa boîte aux lettres et comment elle change avec letter-spacing
.
Modifier l'espace entre les mots
Utilisez word-spacing
pour augmenter ou réduire la longueur de l'espace entre chaque mot de votre texte. Cette propriété accepte des valeurs de longueur telles que em
, px
et rem
. Notez que la longueur que vous spécifiez correspond à un espace supplémentaire en plus de l'espacement normal. Cela signifie que word-spacing: 0
équivaut à word-spacing: normal
.
Raccourci font
Vous pouvez utiliser la propriété abrégée font
pour définir simultanément plusieurs propriétés liées aux polices. La liste des propriétés possibles est font-family
, font-size
, font-stretch
, font-style
, font-variant
, font-weight
et line-height
.
Consultez l'article font
de MDN pour en savoir plus sur l'ordre de ces établissements.
Modifier la casse du texte
Utilisez text-transform
pour modifier l'utilisation des majuscules dans 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 traits de soulignement, des traits d'union et des traits de soulignement au texte
Utilisez text-decoration
pour ajouter des lignes à votre texte. Les traits de soulignement sont les plus couramment utilisés, mais il est possible d'ajouter des lignes au-dessus de votre texte ou directement au-dessus de celui-ci.
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 dans 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 de 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
Utilisez text-indent
pour ajouter un retrait à vos blocs de texte. Cette propriété prend soit une longueur (par exemple, 10px
, 2em
), soit un pourcentage de la largeur du bloc conteneur.
Gérer les problèmes de contenu trop long ou masqué
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ébordement, et ellipsis
, qui affiche des points de suspension (...) en point de débordement.
Contrôler l'espace blanc
La propriété white-space
permet de spécifier la manière 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 de l'art ASCII ou des blocs de code soigneusement mis en retrait.
Contrôler la rupture des mots
Utilisez word-break
pour modifier la façon dont les mots doivent être "déchirés" lorsqu'ils dépassent la ligne. Par défaut, le navigateur ne divise pas les mots. L'utilisation de la valeur de mot clé break-all
pour word-break
indiquera au navigateur de couper les mots au niveau de caractères individuels, si nécessaire.
Modifier l'alignement du texte
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 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 alphabet arabe, qui s'écrit de droite à gauche. Ce sont des alignements logiques. Pour en savoir plus, consultez notre module sur les propriétés logiques.
Utilisez center
pour aligner le texte au centre du volume.
La valeur justify
organise le texte et modifie automatiquement l'espacement entre les mots afin que le texte soit aligné avec les bords gauche et droit du bloc.
Changer le sens du texte
Utilisez direction
pour définir l'orientation du texte : ltr
(de gauche à droite, par défaut) ou rtl
(de droite à gauche). Certaines langues telles que l'arabe, l'hébreu ou le persan s'écrivent 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
Utilisez writing-mode
pour modifier la disposition du texte et sa disposition. La valeur par défaut est horizontal-tb
, mais vous pouvez également définir writing-mode
sur vertical-lr
ou vertical-rl
pour que le texte s'affiche à l'horizontale.
Modifier l'orientation du texte
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 au texte
Utilisez text-shadow
pour ajouter une ombre à votre texte. Cette propriété nécessite 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 différentes versions de la police de caractères, comme gras, 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 seul fichier.
Pour en savoir plus, consultez notre article sur les polices variables.
Pseudo-éléments
Pseudo-éléments ::first-letter
et ::first-line
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
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
La propriété font-variant
est le raccourci de plusieurs 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 associés à chaque propriété pour en savoir plus sur leur utilisation.
Testez vos connaissances
Tester vos connaissances en typographie sur le Web
Lequel des mots clés suivants peut être utilisé en tant que création de remplacement générique pour font-family
?
serif
monospace
italic
italic
est un mot clé valide pour font-style
, pas pour font-family
.sci-fi
fantasy
est une solution de remplacement générique valide pour font-family
.sans-serif
helvetica
"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 ? Ex. : This is a sentence.
➡ This Is A Sentence.
text-capitalize: true;
text-case: capitalize;
text-transform: capitalize;
font-style: capitals;
font-variant: capitalize;
Vrai ou faux: utilisez text-orientation
pour aligner le texte à gauche, à droite ou au centre.
text-orientation
modifie le sens de rotation des lettres sur une ligne.text-orientation
modifie le sens de rotation des lettres sur une ligne. Utilisez text-align
pour aligner le texte à gauche, à droite ou au centre (et bien plus !).Quelle propriété CSS permet de modifier l'espace entre les lignes de texte ?
line-spacing
leading
baseline-distance
line-height
Ressources
- La page Bonnes pratiques relatives aux polices présente l'importation et le rendu des polices, ainsi que d'autres bonnes pratiques concernant l'utilisation des polices sur le Web.
- Style de base du texte et des polices de l'API MDN