--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/typographie' title: 'Changer la taille et la couleur du texte | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:44:08+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Agrandissez une phrase d’accroche, mettez une citation aux couleurs de votre marque, ou passez un titre en blanc sur une photo sombre. Avec Font size et Font color dans le panneau Style, vous changez tout le texte d’un élément. Pour une partie d’un texte, utilisez plutôt la barre d’outils de l’éditeur de texte. Pour des tailles et couleurs partagées par toutes les pages, utilisez votre thème. La vidéo suit la recette ci-dessous : elle transforme une phrase en accroche avec une taille plus grande et une couleur de marque. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Changer la taille et la couleur du texte' description: |- Agrandissez une phrase d’accroche, mettez une citation aux couleurs de votre marque, ou passez un titre en blanc sur une photo sombre. Avec Font size et Font color dans le panneau Style, vous changez tout le texte d’un élément. Pour une partie d’un texte, utilisez plutôt la barre d’outils de l’éditeur de texte. Pour des tailles et couleurs partagées par toutes les pages, utilisez votre thème. La vidéo suit la recette ci-dessous : elle transforme une phrase en accroche avec une taille plus grande et une couleur de marque. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:44:08+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/typographie' articleSection: 'Styler vos éléments' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/typographie' description: |- Agrandissez une phrase d’accroche, mettez une citation aux couleurs de votre marque, ou passez un titre en blanc sur une photo sombre. Avec Font size et Font color dans le panneau Style, vous changez tout le texte d’un élément. Pour une partie d’un texte, utilisez plutôt la barre d’outils de l’éditeur de texte. Pour des tailles et couleurs partagées par toutes les pages, utilisez votre thème. La vidéo suit la recette ci-dessous : elle transforme une phrase en accroche avec une taille plus grande et une couleur de marque. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Styler vos éléments](/fr/hc/documentation/learn-dxpr-builder/element-settings) # Changer la taille et la couleur du texte. Apprendre DXPR BuilderCréer des pagesStyler vos éléments ## Dans ce guide Guides associés - [Lier vers des sections et réutiliser des styles avec des classes](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/css-personnalise) Agrandissez une phrase d’accroche, mettez une citation aux couleurs de votre marque, ou passez un titre en blanc sur une photo sombre. Avec **Font size** et **Font color** dans le panneau **Style**, vous changez tout le texte d’un élément. Pour une partie d’un texte, utilisez plutôt la barre d’outils de l’éditeur de texte. Pour des tailles et couleurs partagées par toutes les pages, utilisez votre thème. La vidéo suit la recette ci-dessous : elle transforme une phrase en accroche avec une taille plus grande et une couleur de marque. ## Avant de commencer - Ouvrez la page dans DXPR Builder ; pointer vers un élément affiche sa barre de contrôle avec **Plus**. Nouveau dans le constructeur ? Voir [Votre première page](/fr/hc/documentation/apprendre-dxpr-builder/demarrage/premiere-page). - **Enregistrer** dans la boîte de dialogue garde un changement dans l’éditeur. **Enregistrer** sur la barre d’outils du constructeur au-dessus de votre contenu stocke la page et affiche « Saved field ». - **Utilisez le panneau Style** pour un élément : un paragraphe d’accroche, une citation, un titre sur une photo. - **Utilisez l’éditeur de texte** pour une partie d’un texte et pour la structure. Faites d’un titre un vrai titre avec **Heading 2** ou **Heading 3**, pas une ligne **Normal** plus grande. Les lecteurs d’écran et les moteurs de recherche lisent le niveau, pas la taille. - **Utilisez la liste Styles de l’éditeur** pour les styles de texte de marque. Votre webmestre les définit sous **General Settings** > **Text Editor** > **Custom styles** (`/admin/dxpr_studio/dxpr_builder/settings`). - **Utilisez votre thème** pour la police du corps, les tailles de titres et les couleurs de liens. ## Recette : une phrase d’accroche aux couleurs de votre marque 1. Ajoutez un élément **Text** et saisissez une ou deux phrases comme texte **Normal**. 2. Survolez-le, cliquez sur **Plus**, puis sur **Paramètres**. 3. Ouvrez le panneau **Style** et glissez **Font size** sur 20. Le texte grandit pendant le glissement. 4. Ouvrez **Font color** et choisissez votre couleur de marque dans les nuanciers, ou saisissez son code, par exemple #1a4d8f, dans le champ de couleur. 5. Cliquez sur **Enregistrer** dans la boîte de dialogue. À 20 px, la phrase compte comme du texte normal, il lui faut donc un contraste de 4,5 pour 1. Saisissez votre code couleur et la couleur d’arrière-plan dans un vérificateur de contraste ; une page blanche vaut #ffffff. 6. Cliquez sur **Enregistrer** sur la barre d’outils. ## Ce que vous voyez La phrase grandit à 20 px et prend votre couleur de marque. Les titres et liens dans le même élément de texte prennent aussi cette couleur, mais les titres gardent leur taille. ## Comment les paramètres marchent ### Taille de police **Font size** va de 0 à 100 px, et 0 garde la taille de votre thème. La valeur est la même sur toutes les tailles d’écran : une ligne de 48 px sur un bureau fait 48 px sur un téléphone aussi. La taille va sur l’élément, et le texte qui a sa propre taille la garde. Les titres l’ont d’habitude, car Bootstrap les taille depuis la taille de base de la page. Le texte taillé avec l’outil de taille de police de l’éditeur garde aussi sa taille. ### Couleur de police Le sélecteur montre la palette de votre thème en nuanciers, quand votre site en a une. Il a aussi un curseur d’opacité et un champ où saisir un code couleur, par exemple #1a4d8f. **Clear** dans le sélecteur rend le texte à la couleur du thème. Sur un élément de contenu comme Text, Card ou Alert, la couleur atteint tout à l’intérieur, titres et liens inclus. Sur une **Section**, elle n’atteint que le texte sans couleur propre. Les titres et liens colorés par votre thème gardent leur couleur là. Les classes de couleur Bootstrap sont marquées `!important`, elles battent donc **Font color**. Un exemple est la pastille **Primary text color** sous **HTML classes**. Un autre est un style d’éditeur comme **Primary Brand Text** sur une partie du texte. Sur un **Bouton**, la couleur va sur le bouton lui-même et remplace la couleur de survol du thème. Réglez aussi **Font color** dans **Hover style**. ### Survol Le panneau **Hover style** a ses propres **Font color** et **Font size**. Une taille plus grande au survol pousse le contenu autour, un changement de couleur est donc d’habitude le choix plus calme. ## Contraste Pour un texte que la plupart peuvent lire, les règles WCAG 2 au niveau AA demandent ce contraste : | Texte | Contraste avec son arrière-plan | |---|---| | Texte normal | au moins 4,5 pour 1 | | Grand texte : 24 px (18 pt) ou plus, ou 19 px (14 pt) ou plus en gras | au moins 3 pour 1 | Sur une photo, mesurez contre la partie la plus claire derrière le texte. Testez votre paire de couleurs avec un vérificateur de contraste, comme le [vérificateur de contraste WebAIM](https://webaim.org/resources/contrastchecker/). ## Si rien ne s’affiche - **Le titre dans le texte n’a pas grandi.** Le titre a sa propre taille depuis votre thème. Choisissez un autre niveau de titre dans l’éditeur de texte, ou utilisez son outil de taille de police. - **Liens et titres gardent leur couleur.** Sur une Section, le texte avec sa propre couleur de thème la garde. Réglez plutôt **Font color** sur l’élément de texte. - **Font color ne fait rien du tout.** Une classe de couleur comme **Primary text color** ou **White text** sous **HTML classes** gagne. Retirez sa pastille. - **Une partie du texte garde une autre couleur.** Un style d’éditeur sur cette partie, comme **Primary Brand Text**, gagne. Retirez le style dans l’éditeur de texte. - **Font size ne fait rien sur un compteur.** Les compteurs circulaires et de nombres ont leur propre **Font size**. Utilisez celui-là. - **Une couleur de nuancier ne correspond plus à la marque.** Un nuancier copie la couleur quand vous le choisissez. Après un changement de palette, choisissez de nouveau le nuancier. - **La couleur de marque échoue au contrôle de contraste.** Choisissez-en une nuance plus sombre. Ou faites le texte d’au moins 24 px, pour que la cible de 3 pour 1 s’applique. - **Le texte est dur à lire sur une photo.** Le contraste est trop faible. Assombrissez la photo avec un dégradé, comme montré sur la page [Arrière-plans](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/arriere-plan). - **Le bouton a perdu sa couleur de texte au survol.** Votre **Font color** remplace la couleur de survol du thème. Réglez aussi **Font color** dans **Hover style**. ## Et ensuite ? - [ID et classes HTML](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/css-personnalise) : réutilisez un style de texte via une classe au lieu de le définir sur chaque élément.