Mettre en forme un texte

Le panneau Typographie met en forme le texte d’un bloc : police, taille, graisse, casse, interligne, soulignement, ombre et orientation. Cet article décrit chaque réglage. Vous saurez aussi fixer la taille de base de la page et marquer un passage écrit dans une autre langue.

Ouvrir le panneau Typographie

1. Sélectionnez un bloc qui porte du texte, par exemple un titre, un paragraphe ou un bouton.
2. Dans l’inspecteur, ouvrez l’onglet Styles.
3. Dépliez le panneau Typographie s’il est replié.

Le panneau compte la liste Police, la liste Taille du texte et la rangée Styles, dont chaque bouton ouvre un réglage. Selon le bloc, certains réglages ne s’affichent pas.

Comme tout réglage de l’onglet Styles, la typographie se règle par état et par écran. Se repérer dans l’éditeur décrit la rangée des états et celle des écrans.

Comprendre l’héritage

Un bloc neuf n’impose rien. Chaque réglage reprend la valeur du style du bloc, puis celle de la page. Vous ne posez que ce qui doit changer.

Une icône apparaît à côté de Police, de Taille du texte ou de Styles quand une valeur diffère de l’héritage. La flèche circulaire rend la valeur du style. Le cercle barré retire la valeur héritée. La corbeille retire votre valeur. Sur la ligne Styles, l’icône agit sur tous les réglages de la rangée d’un coup.

Un bouton de la rangée Styles montre la valeur en vigueur, celle du style comprise. Un texte peut donc s’afficher en gras sans réglage de votre part : la graisse vient de son style.

Choisir la police

1. Ouvrez la liste Police. Chaque police s’affiche dans sa propre fonte.
2. Choisissez une police installée sur votre site. Par défaut rend la police du style du bloc.

Un bloc qui porte un style du produit, comme Titre 2, affiche Police des titres, la police que le design de votre site attribue aux titres. Un paragraphe affiche Par défaut : il reprend la police des textes de la page. Choisir une police dans la liste la remplace sur ce bloc seulement.

Choisir la taille

1. Ouvrez la liste Taille du texte.
2. Choisissez une taille. Par défaut rend la taille du style du bloc.

Chaque taille s’affiche par sa valeur, par exemple 1rem ou 14px. Une taille fluide affiche ses deux bornes. La liste range les tailles par unité, px puis em puis rem, puis par valeur croissante.

Créer une taille

1. À côté de Taille du texte, cliquez sur Nouveau (+).
2. Dans le champ Taille, saisissez la valeur et choisissez son unité : px, em ou rem.
3. Cliquez sur Enregistrer. La taille s’applique au bloc et rejoint la liste de tous les blocs du site.

Pour un grand titre qui grandit avec l’écran, cochez Fluide. Les champs Minimum, Préférée et Maximum remplacent alors la taille. La taille préférée combine en général deux valeurs, par exemple 2rem + 3.6vw, avec le bouton ƒ Combiner deux valeurs avec calc(). Sans les trois valeurs, le formulaire répond Donnez les trois tailles (minimum, préférée et maximum) en longueurs ou en formules.

Modifier une taille

Seuls les administrateurs du site voient Nouveau et Modifier : les autres rôles choisissent une taille dans la liste.

Le bouton Modifier (crayon) s’affiche quand une taille est choisie. La nouvelle valeur vaut pour tous les blocs qui utilisent cette taille. Le formulaire rappelle Vos changements s’appliqueront à tous les blocs qui s’en servent.

Deux tailles ne portent jamais la même valeur. Une taille à une valeur déjà prise est refusée avec un message comme 1rem existe déjà. Choisissez plutôt cette valeur. 1rem et 16px sont deux valeurs différentes : la première suit la taille de base de la page et la seconde non.

L’échelle livrée avec votre site

Chaque site démarre avec dix tailles en rem. 1 rem vaut la taille de base de la page, soit 16 px chez presque tous les visiteurs. Un design du catalogue peut changer ces valeurs.

Le cran 6xl sert au titre court d’une ouverture, quelques mots en très grand. Une taille livrée ne se supprime pas et garde son nom de cran quand sa valeur change. Sa variable se reprend dans Ajouter du CSS avancé.

Les réglages de la rangée Styles

Chaque bouton de la rangée ouvre un petit menu. Un bouton enfoncé signale une valeur active. Par défaut, tous les réglages reprennent la valeur héritée.

Créer une ombre de texte

Une ombre de texte est une entrée du design system : vous la créez une fois et vous la posez sur autant de textes que vous voulez. Votre site n’en a aucune au départ.

1. Dans la rangée Styles, cliquez sur Ombre du texte, puis sur Nouveau (+).
2. Saisissez un Nom. Il est obligatoire.
3. Dans Couche 1, réglez le décalage X et Y en pixels, le Flou et la couleur.
4. Pour superposer un second effet, cliquez sur Ajouter une couche. Une ombre compte jusqu’à huit couches, que Monter et Descendre réordonnent. La première couche est peinte au-dessus.
5. Cliquez sur Enregistrer. L’ombre s’applique au texte.

Un texte porte une seule ombre. Pour une ombre différente au survol, choisissez-en une autre sur l’état Survol. Le bouton Modifier change l’ombre pour tous les textes qui la portent.

Une ombre de texte n’a ni étalement ni ombre intérieure. Un nom vide ou une couche qui ne règle rien est refusé, avec Le nom est obligatoire. ou Donnez à chaque couche un décalage, un flou ou une couleur.

Par exemple, un titre blanc sur une photo chargée se détache avec deux couches : la première nette, courte et sombre et la seconde large et très floue.

Régler la taille de base de la page

Les tailles de l’échelle en rem se calculent sur la taille de base de la page. Changer cette taille agrandit ou réduit tout le texte du site, dans les mêmes proportions.

Par défaut, la page vaut 1rem : la taille de texte que le visiteur a choisie dans son navigateur, 16 px pour presque tout le monde. Une personne qui a demandé un texte plus grand voit votre site plus grand. La mise en page tient, puisque toutes les tailles grandissent ensemble.

Fixer la taille de base

Pour une mise en page qui ne doit pas bouger, par exemple un grand titre calé sur une ligne, donnez à la page une taille fixe en pixels.

1. Ouvrez Apparence > Aperçu et sélectionnez le bloc Corps de page, qui enveloppe tout l’aperçu.
2. Dans l’onglet Styles, panneau Typographie, cliquez sur le Nouveau (+) de Taille du texte et créez une taille de 16 px. Si le formulaire répond que 16px existe déjà, choisissez cette taille dans la liste.
3. Dans la liste Styles, sur la ligne du style Page, cliquez sur Mettre à jour. Laissez le groupe Typographie coché, puis cliquez sur Oui, mettre à jour. La mise à jour est préparée.
4. Dans la barre latérale Catalogue de design, cliquez sur Appliquer ce design à tout le site puis sur Oui, appliquer. La page se recharge.

L’aperçu n’enregistre rien avant Appliquer ce design à tout le site, ni la taille créée ni la mise à jour du style Page. Si vous quittez la page avant, le navigateur vous prévient et ces changements sont perdus. Une fois le design appliqué, le zoom du navigateur continue d’agrandir tout le site.

Pour revenir à la taille par défaut, cliquez sur Supprimer (corbeille) sur la ligne du style Page, puis sur Oui, réinitialiser. Appliquez ensuite le design.

Marquer un passage écrit dans une autre langue

Un lecteur d’écran prononce une page dans la langue qu’elle déclare. Une citation anglaise dans un texte français est lue avec les sons du français. Marquer sa langue lui fait prendre la bonne prononciation, le temps du passage.

1. Sélectionnez le passage, au mot près, sans la ponctuation française qui l’entoure.
2. Dans la barre d’outils du bloc, cliquez sur Langue de ce passage.
3. Saisissez le code de la langue dans Code de langue, par exemple en, puis cliquez sur Appliquer. Sur un site en plusieurs langues, un clic sur l’une d’elles, sous le champ, applique son code.

Pour retirer le marquage, placez le curseur dans le passage, cliquez de nouveau sur Langue de ce passage puis sur Retirer.

• Le code commence par deux à huit lettres, suivies ou non d’une région : en, de, es, pt-BR. Appliquer reste grisé tant que le code n’en a pas la forme.
• Le champ accepte une langue que votre site ne publie pas.
• L’outil se trouve dans un paragraphe, un titre, une liste, un bloc simple, une cellule de tableau et un bouton. Le libellé d’un lien de menu, d’un champ ou d’un bouton de formulaire et les boutons du bandeau de consentement ne le proposent pas.

Un mot passé dans l’usage, comme « week-end », n’a pas besoin d’être marqué. Le marquage sert à une citation, un titre d’œuvre ou un nom propre étranger.

Voir aussi

• Colorer un bloc
• Régler vos couleurs, vos polices et vos échelles
• Enregistrer le style d’un bloc
• Espacer vos blocs