Aller au contenu

Typographie

La typographie est la manière dont vous contrôlez l'apparence du texte -- quelle police, quelle taille, quelle graisse, quel espacement, quel alignement. Le Style Manager regroupe toutes les propriétés CSS liées au texte dans la section Typographie.

Deux points à garder à l'esprit :

  • Les styles de texte sont hérités. Quand vous définissez une police sur un parent, tous les enfants l'utilisent sauf s'ils la surchargent. Cela permet de définir la typographie une seule fois au niveau de la section ou du body.
  • La lisibilité vient de la combinaison de la taille, de la graisse, de la hauteur de ligne et de l'espacement -- pas d'une seule propriété isolée.

Choisir une famille de polices

Font-family définit la police de caractères. Dans le Style Manager, elle apparaît sous forme de liste déroulante avec des polices système préchargées.

Pour ajouter des polices personnalisées depuis Google Fonts, utilisez le plugin Fonts (grapesjs-fonts). Ouvrez la boîte de dialogue Fonts, recherchez une police par nom ou catégorie, et installez-la. Vous pouvez sélectionner les variantes (graisses et styles) à inclure. Une fois installée, la police apparaît dans la liste déroulante Font-family dans tout l'éditeur.

Le plugin Fonts :

  • Charge les polices depuis Google Fonts via l'API Google Fonts
  • Vous permet de parcourir par catégorie (serif, sans-serif, display, handwriting, monospace)
  • Vous permet d'activer/désactiver les variantes individuelles (regular, italic, graisses 100-900)
  • Génère les balises <link> appropriées dans le <head> de la page pour la production
  • Affiche un aperçu en direct de chaque police avec un texte d'exemple

Vous pouvez aussi utiliser des variables CSS pour les familles de polices, ce qui vous permet de changer une police sur l'ensemble de votre site depuis un seul endroit.

Conseil : Limitez-vous à 2-3 familles de polices par site. Une pour les titres, une pour le corps du texte, et éventuellement une pour les accents ou le code. Au-delà, cela ralentit le chargement de la page et nuit à la cohérence visuelle.

Définir la taille de police

Font-size contrôle la taille d'affichage du texte. Vous pouvez la définir comme un nombre avec une unité, ou utiliser un mot-clé.

Unités disponibles dans Silex : px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax.

Valeurs par mot-clé : medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger, length, initial, inherit.

Unité Signification Quand l'utiliser
px Pixels absolus Quand vous avez besoin d'une taille exacte et prévisible
em Relatif à la taille de police du parent Mettre le texte à l'échelle par rapport à son contexte
rem Relatif à la taille de police de la racine (<html>) Mise à l'échelle cohérente sur l'ensemble du site
% Pourcentage de la taille de police du parent Similaire à em
vw Pourcentage de la largeur du viewport Typographie fluide qui s'adapte à la taille de l'écran
cqi Taille en ligne de la requête de conteneur Texte qui s'adapte à son conteneur, pas au viewport

Conseil : Utilisez rem pour la plupart des textes. Définissez une taille de police de base sur le body (par ex., 16px), puis définissez les titres et le corps du texte en rem. Quand vous changez la base, tout s'adapte proportionnellement. Vous pouvez aussi définir les tailles de police comme des variables CSS pour faciliter encore davantage la gestion du thème.

Contrôler la graisse de la police

Font-weight détermine l'épaisseur du texte. Silex propose une liste déroulante avec des valeurs nommées :

Valeur Nom
100 Thin
200 Extra-Light
300 Light
400 Normal
500 Medium
600 Semi-Bold
700 Bold
800 Extra-Bold
900 Ultra-Bold

Valeurs fixes : inherit, initial, unset, auto.

Toutes les polices ne prennent pas en charge toutes les graisses. Si vous choisissez une graisse que le fichier de police n'inclut pas, le navigateur choisit la graisse disponible la plus proche. Assurez-vous d'installer la variante correspondante dans la boîte de dialogue Fonts.

Ajuster la hauteur de ligne

Line-height définit la distance verticale entre les lignes de texte. C'est l'une des propriétés les plus importantes pour la lisibilité.

Unités : px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax.

Valeurs fixes : normal, initial, inherit, unset.

Règle d'or : Le corps du texte se lit le mieux avec une hauteur de ligne de 1,4 à 1,6 fois la taille de police. Les titres peuvent être plus serrés (1,1 à 1,3) car ils comportent moins de lignes. Utilisez un nombre sans unité (comme 1.5) ou em/% pour que la hauteur de ligne s'adapte à la taille de police.

Espacement entre les lettres et les mots

Letter-spacing ajoute ou supprime de l'espace entre les caractères individuels. Une petite valeur positive (0.5px ou 0.02em) peut améliorer la lisibilité du texte en majuscules. Les valeurs négatives resserrent les caractères.

Unités : px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax.

Valeurs fixes : normal, initial, inherit, unset.

Word-break contrôle si les lignes peuvent couper à l'intérieur des mots. Valeurs : normal, break-all, keep-all, break-word. Utilisez break-word pour empêcher les longues URL ou chaînes de déborder de leur conteneur.

Word-wrap (aussi connu sous le nom de Overflow-wrap) définit si le navigateur peut couper à l'intérieur d'un mot pour empêcher le débordement. Valeurs : normal, break-word.

Aligner le texte

Text-align contrôle l'alignement horizontal à l'intérieur de la boîte de l'élément.

Valeurs : left, center, right, justified, inherit, initial, unset.

Utilisez left pour le corps du texte dans les langues écrites de gauche à droite (c'est la valeur par défaut et la plus facile à lire). Utilisez center pour les titres, les courts libellés ou les textes héros. Utilisez justified avec parcimonie -- cela peut créer des « rivières » irrégulières d'espace blanc dans les colonnes étroites.

Transformer la casse du texte

Text-transform modifie la capitalisation du texte sans changer le contenu source.

Valeurs : none, capitalize, uppercase, lowercase.

Quand l'utiliser : Les liens de navigation, les boutons et les titres de section sont souvent plus propres en uppercase. Utilisez le CSS pour cela plutôt que de taper en majuscules -- cela garde le texte source lisible et vous permet de changer d'avis plus tard.

Conseil : Quand vous utilisez uppercase, ajoutez un léger Letter-spacing (0.05em ou 1px) pour améliorer la lisibilité.

Décorer le texte

Text-decoration est une propriété composite dans Silex avec quatre sous-propriétés :

Cas d'usage : Supprimer le soulignement des liens (none) et le restyler avec une couleur personnalisée et un style wavy au survol en utilisant une pseudo-classe.

Gérer le débordement et les espaces blancs

Text-overflow contrôle ce qui se passe quand le texte ne tient pas. Valeurs : clip, ellipsis, inherit, initial, unset.

Pour obtenir l'effet classique « tronqué avec des points de suspension », vous avez besoin de trois propriétés ensemble :

  1. Text-overflow : ellipsis
  2. White-space : nowrap
  3. Overflow (sur le même élément) : hidden

White-space contrôle comment les espaces blancs et les retours à la ligne du code source sont gérés. Valeurs : normal, nowrap, pre, pre-wrap, pre-line, break-spaces.

Valeur Réduit les espaces Retour à la ligne
normal Oui Oui
nowrap Oui Non
pre Non Non
pre-wrap Non Oui
pre-line Oui Oui (préserve les retours à la ligne)
break-spaces Non Oui (coupe aux espaces)

Couleur du texte

Color définit la couleur du texte. Dans Silex, elle apparaît sous forme d'un sélecteur de couleur pleine largeur dans la section Typographie. Vous pouvez saisir des valeurs en hexadécimal, rgb/rgba, hsl/hsla ou des couleurs nommées. Vous pouvez aussi appliquer une variable CSS à Color via le sélecteur de variables dans le Style Manager.

Pour les couleurs d'arrière-plan, consultez Couleurs et arrière-plans.

Exemple pratique : une hiérarchie de titres

  1. Sélectionnez le body ou une Section de premier niveau.
  2. Font-family : votre police de corps (par ex., "Inter"). Font-size : 16px. Line-height : 1.6. Color : un gris foncé.
  3. Pour les H1 : Font-size : 2.5rem. Font-weight : 700 (Bold). Line-height : 1.2. Letter-spacing : -0.02em (plus serré pour le texte de grande taille).
  4. Pour les H2 : Font-size : 1.75rem. Font-weight : 600 (Semi-Bold). Line-height : 1.3.
  5. Pour les petits libellés : Font-size : 0.75rem. Text-transform : uppercase. Letter-spacing : 0.08em. Font-weight : 500.

Comme les propriétés de police sont héritées, les paramètres du body se propagent à tout le texte. Vous ne surchargez que ce qui change à chaque niveau de titre.

Erreurs courantes

  • Trop de familles de polices. Chaque police supplémentaire est une requête réseau supplémentaire. Tenez-vous en à 2-3.
  • Variantes de police manquantes. Vous définissez Font-weight sur 600 mais n'avez installé que la variante regular. Le navigateur simule la graisse et le rendu est flou.
  • Utiliser px pour tout. Si vous souhaitez plus tard adapter le texte pour l'accessibilité ou le design responsive, les unités rem et em facilitent grandement les choses.
  • Texte justifié dans des colonnes étroites. Cela crée des espaces disgracieux. Utilisez plutôt l'alignement left.
  • Oublier la hauteur de ligne sur les titres. Le texte de grande taille avec la hauteur de ligne par défaut a trop d'espace vertical entre les lignes.

En savoir plus

Avancé : font-style, unités de requête de conteneur et intégration des variables CSS

Font style

Font-style (italic, oblique, normal) est disponible via la section typographie intégrée de GrapesJS. Utilisez-le pour mettre du texte en italique. Assurez-vous que la variante italique est installée dans la boîte de dialogue Fonts, sinon le navigateur inclinera artificiellement la variante normale (ce qui donne souvent un mauvais rendu).

Unités de requête de conteneur pour le texte fluide

Au lieu des unités de viewport (vw), vous pouvez utiliser les unités de requête de conteneur (cqi, cqw, etc.) pour la taille de police. Cela fait que le texte s'adapte par rapport à son conteneur le plus proche ayant Container-type défini sur inline-size ou size, plutôt que par rapport au viewport entier. C'est utile pour les composants qui peuvent apparaître à différentes tailles dans différentes mises en page.

Variables CSS pour les tailles de police

Le plugin CSS Variables (grapesjs-css-variables) s'intègre directement aux propriétés typographiques. Vous pouvez créer des variables de type taille pour Font-size, Letter-spacing et Line-height, et des variables de type font-family pour Font-family. Quand vous cliquez sur le bouton « + » à côté de l'une de ces propriétés dans le Style Manager, une liste déroulante affiche vos variables définies. En sélectionner une insère une référence var(--votre-variable). C'est l'approche recommandée pour maintenir une échelle typographique cohérente sur votre site.

Les types de variables qui s'appliquent à la typographie : - Variables de taille : s'appliquent à Font-size, Letter-spacing, Line-height - Variables de Font-family : s'appliquent à Font-family

Référence : toutes les propriétés typographiques
Propriété Type Valeurs / Unités MDN
Font-family sélection Polices installées + polices système par défaut lien
Font-size nombre px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax ; mots-clés : medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger, length, initial, inherit lien
Font-weight sélection 100 (Thin), 200 (Extra-Light), 300 (Light), 400 (Normal), 500 (Medium), 600 (Semi-Bold), 700 (Bold), 800 (Extra-Bold), 900 (Ultra-Bold) ; inherit, initial, unset, auto lien
Letter-spacing nombre px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax ; normal, initial, inherit, unset lien
Color couleur Toute valeur de couleur lien
Line-height nombre px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax ; normal, initial, inherit, unset lien
Text-align sélection left, center, right, justified, inherit, initial, unset lien
Word-break sélection normal, break-all, keep-all, break-word lien
Word-wrap sélection normal, break-word lien
White-space sélection normal, nowrap, pre, pre-wrap, pre-line, break-spaces lien
Text-decoration-line sélection none, underline, overline, line-through, blink ; auto, inherit, initial, revert, unset lien
Text-decoration-style sélection solid, double, dotted, dashed, wavy lien
Text-decoration-color couleur Toute valeur de couleur ; inherit, initial, revert, unset lien
Text-decoration-thickness entier px, %, em ; auto, inherit, initial, revert, unset lien
Text-transform sélection none, capitalize, uppercase, lowercase lien
Text-overflow sélection clip, ellipsis, inherit, initial, unset lien

Quiz

Q1 : Vous voulez que tout le texte de votre site utilise la même police de base. Quel est l'endroit le plus efficace pour définir Font-family ?

  • A) Sur chaque élément de texte individuellement
  • B) Sur le body ou un conteneur de premier niveau
  • C) Uniquement sur les titres
Réponse

B) Sur le body ou un conteneur de premier niveau -- Font-family est hérité. Le définir une seule fois au sommet signifie que chaque élément enfant l'utilise automatiquement. Vous ne le surchargez que sur les éléments spécifiques qui ont besoin d'une police différente.

Q2 : Vous avez installé une police Google mais vos titres en Semi-Bold semblent flous et artificiellement épais. Que s'est-il passé ?

  • A) La Font-size est trop grande.
  • B) Vous n'avez pas installé la variante 600 (Semi-Bold) dans la boîte de dialogue Fonts.
  • C) La Line-height est incorrecte.
Réponse

B) Vous n'avez pas installé la variante 600 (Semi-Bold) dans la boîte de dialogue Fonts. -- Sans le fichier de police réel pour cette graisse, le navigateur synthétise le gras en épaississant la variante regular, ce qui donne un mauvais rendu. Ouvrez la boîte de dialogue Fonts et activez la variante Semi-Bold.

Q3 : Vous voulez qu'un titre de carte affiche « ... » quand le texte est trop long pour une seule ligne. De quelles trois propriétés avez-vous besoin ?

  • A) Text-overflow : ellipsis, White-space : nowrap, Overflow : hidden
  • B) Text-overflow : clip, Word-break : break-all, Overflow : scroll
  • C) Text-transform : uppercase, White-space : pre, Overflow : auto
Réponse

A) Text-overflow : ellipsis, White-space : nowrap, Overflow : hidden -- Les trois sont nécessaires. White-space nowrap empêche le retour à la ligne, Overflow hidden masque le contenu qui dépasse, et Text-overflow ellipsis ajoute l'indicateur « ... ».

Q4 : Votre corps de texte utilise Font-size 16px et vous voulez un H1 2,5 fois plus grand. Quelle valeur s'adapte le mieux pour les ajustements responsives ?

  • A) Font-size : 40px
  • B) Font-size : 2.5rem
  • C) Font-size : 2.5vw
Réponse

B) Font-size : 2.5rem -- Utiliser rem signifie que le titre s'adapte proportionnellement à la taille de police racine. Si vous changez la racine de 16px à 18px à un point de rupture, le titre s'ajuste automatiquement. 40px est rigide, et 2.5vw fait dépendre le titre de la largeur du viewport, ce qui peut être trop petit sur les écrans étroits.

Q5 : Vous avez des liens de navigation en majuscules. Les lettres semblent trop serrées. Que devez-vous ajouter ?

  • A) Word-break : break-all
  • B) Line-height : 2
  • C) Letter-spacing : 0.05em
Réponse

C) Letter-spacing : 0.05em -- Le texte en majuscules bénéficie d'un espacement entre les lettres légèrement augmenté pour la lisibilité. C'est une pratique typographique courante.

Éditer cette page sur GitLab