# 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 Typographie d’un titre : la liste Police sur Police des titres, la liste Taille du texte sur 2.5rem avec ses boutons Modifier et Nouveau, puis la rangée Styles et ses dix boutons.](https://static.lovelyrender.com/uploads/2026/10/953-doc-pages-typographie.png)

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](https://lovelyrender.com/fr/documentation/editeur/) 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.

**Remarque :** Ce panneau applique une police déjà installée. Pour ajouter une police, suivez [Régler vos couleurs, vos polices et vos échelles](https://lovelyrender.com/fr/documentation/design-system/).

## 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.

![La liste Taille du texte ouverte sur un paragraphe : Par défaut cochée, puis les tailles du site de 0.75rem à 3.125rem et la taille fluide de 3.125rem à 4.75rem.](https://static.lovelyrender.com/uploads/2026/10/956-doc-pages-tailles.png)

### 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.

| Cran | Valeur | Sur une base de 16 px | Variable CSS |
| --- | --- | --- | --- |
| `xs` | 0,75 rem | 12 px | `--font-size-xs` |
| `s` | 0,875 rem | 14 px | `--font-size-s` |
| `m` | 1 rem | 16 px, la taille du texte courant | `--font-size-m` |
| `l` | 1,125 rem | 18 px | `--font-size-l` |
| `xl` | 1,25 rem | 20 px | `--font-size-xl` |
| `2xl` | 1,5 rem | 24 px | `--font-size-2xl` |
| `3xl` | 1,875 rem | 30 px | `--font-size-3xl` |
| `4xl` | 2,25 rem | 36 px | `--font-size-4xl` |
| `5xl` | 3 rem | 48 px | `--font-size-5xl` |
| `6xl` | De 3 à 4,5 rem selon la largeur de l’écran | De 48 px sur un téléphone à 72 px sur un écran de 1 440 px | `--font-size-6xl` |

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é](https://lovelyrender.com/fr/documentation/css-avance/).

## 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.

| Bouton | Réglages et valeurs |
| --- | --- |
| **Alignement du texte** | **Gauche**, **Centre**, **Droite**, **Justifié**, **Justifié avec la dernière ligne centrée** et **Justifié avec la dernière ligne à droite**. |
| **Gras** | **Par défaut**, puis les graisses de 100 à 900. **400 (Normal)** et **700 (Gras)** sont nommées. Chaque graisse s’affiche dans la police du bloc. |
| **Italique** | Met le texte en italique, ou le remet droit. Sur un texte que son style met en italique, le clic pose un texte droit. |
| **Soulignement** | **Trait** : aucun, souligné, surligné, les deux ou barré. **Style** : plein, double, pointillé, tirets ou ondulé. **Épaisseur (en px)**, de 1 à 16. **Décalage du soulignement (en px)**, de 0 à 128, pour le soulignement seulement. **Couleur** du trait. |
| **Changer la casse** | **Aucune transformation (annule l’héritage)**, **Majuscules**, **Minuscules** et **Petites capitales**. |
| **Retour à la ligne** | **Par défaut**, **Retour à la ligne**, **Pas de retour à la ligne**, **Équilibre** et **Soigné**. **Équilibre** donne des lignes de longueur proche, pour un titre. **Soigné** évite un mot seul sur la dernière ligne. Chaque choix montre un exemple au survol. |
| **Interligne** | Les valeurs 1.1 à 1.6, ou **Personnalisé**, de 0.8 à 3. |
| **Interlettrage** | Les valeurs -0.02, 0, 0.02, 0.05 et 0.1, ou **Personnalisé (relatif à la taille du texte)**, de -0.2 à 1. |
| **Ombre du texte** | **Aucun**, puis les ombres de texte du site par leur nom. |
| **Orientation du texte** | **Mode d’écriture** : horizontal, vertical aux lettres couchées ou vertical. **Orientation** : lettres latines couchées ou tous les caractères debout, pour un mode vertical seulement. |

**Remarque :** **Petites capitales** change la forme des lettres, pas leur casse. Choisir une autre casse retire les petites capitales.

### 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.

| Réglage du visiteur | Taille de base par défaut, `1rem` | Taille de base fixe, par exemple `16px` |
| --- | --- | --- |
| Zoom du navigateur | Tout grossit. | Tout grossit. |
| Taille de texte par défaut du navigateur | Le texte suit. | Sans effet. |
| Taille du texte du téléphone | Firefox sur Android agrandit. Safari sur iPhone et Chrome sur Android ne changent rien. | Firefox sur Android agrandit. Safari sur iPhone et Chrome sur Android ne changent rien. |

### 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.

**Remarque :** Une taille en `px` posée sur un bloc ne suit jamais la taille de texte du navigateur. Pour que tout le texte réagisse de la même façon, préférez les tailles de l’échelle.

## 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.

**Remarque :** Le passage marqué ne change pas d’apparence. Pour vérifier le marquage, placez le curseur dans le passage : le bouton **Langue de ce passage** apparaît enfoncé.

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](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/)
- [Régler vos couleurs, vos polices et vos échelles](https://lovelyrender.com/fr/documentation/design-system/)
- [Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/)
- [Espacer vos blocs](https://lovelyrender.com/fr/documentation/espacer-vos-blocs/)