--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/typografie' title: 'Tekstgrootte en -kleur instellen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:59:21+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Maak een leadzin groter, zet een citaat in je merkkleur, of maak een kop wit op een donkere foto. Met Lettergrootte en Letterkleur in het paneel Stijl wijzig je alle tekst in één element. Voor een deel van een tekst gebruik je juist de werkbalk van de teksteditor. Voor groottes en kleuren die elke pagina deelt, gebruik je je thema. De video volgt het recept hieronder: hij maakt van één zin een lead met een grotere grootte en een merkkleur. 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: 'Tekstgrootte en -kleur instellen' description: |- Maak een leadzin groter, zet een citaat in je merkkleur, of maak een kop wit op een donkere foto. Met Lettergrootte en Letterkleur in het paneel Stijl wijzig je alle tekst in één element. Voor een deel van een tekst gebruik je juist de werkbalk van de teksteditor. Voor groottes en kleuren die elke pagina deelt, gebruik je je thema. De video volgt het recept hieronder: hij maakt van één zin een lead met een grotere grootte en een merkkleur. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:59:21+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/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/typografie' articleSection: 'Elementen stylen' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/typografie' description: |- Maak een leadzin groter, zet een citaat in je merkkleur, of maak een kop wit op een donkere foto. Met Lettergrootte en Letterkleur in het paneel Stijl wijzig je alle tekst in één element. Voor een deel van een tekst gebruik je juist de werkbalk van de teksteditor. Voor groottes en kleuren die elke pagina deelt, gebruik je je thema. De video volgt het recept hieronder: hij maakt van één zin een lead met een grotere grootte en een merkkleur. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/nl/hc/documentation/learn-dxpr-builder/element-settings) # Tekstgrootte en -kleur instellen. DXPR Builder lerenPagina’s bouwenElementen stylen ## In deze gids Gerelateerde gidsen - [Naar secties linken en stijlen hergebruiken met klassen](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/aangepaste-css) Maak een leadzin groter, zet een citaat in je merkkleur, of maak een kop wit op een donkere foto. Met **Lettergrootte** en **Letterkleur** in het paneel **Stijl** wijzig je alle tekst in één element. Voor een deel van een tekst gebruik je juist de werkbalk van de teksteditor. Voor groottes en kleuren die elke pagina deelt, gebruik je je thema. De video volgt het recept hieronder: hij maakt van één zin een lead met een grotere grootte en een merkkleur. ## Voordat je begint - Open de pagina in DXPR Builder; als je op een element wijst toont hij zijn besturingsbalk met **More**. Nieuw in de builder? Zie [Je eerste pagina](/nl/hc/documentatie/dxpr-builder-leren/aan-de-slag/eerste-pagina). - **Opslaan** in het dialoogvenster bewaart een wijziging in de editor. **Opslaan** op de builder-werkbalk boven je inhoud slaat de pagina op en toont “Veld opgeslagen”. - **Gebruik het paneel Stijl** voor één element: een leadalinea, een citaat, een kop op een foto. - **Gebruik de teksteditor** voor een deel van een tekst en voor structuur. Maak van een kop een echte kop met **Kop 2** of **Kop 3**, niet een grotere regel **Normaal**. Schermlezers en zoekmachines lezen het niveau, niet de grootte. - **Gebruik de Stijlenlijst van de editor** voor merkkleur-tekststijlen. Je webmaster stelt ze in onder **Algemene instellingen** > **Teksteditor** > **Aangepaste stijlen** (`/admin/dxpr_studio/dxpr_builder/settings`). - **Gebruik je thema** voor het body-lettertype, kopgroottes en linkkleuren. ## Recept: een leadzin in je merkkleur 1. Voeg een **Tekst**-element toe en typ een of twee zinnen als **Normale** tekst. 2. Beweeg erover, klik op **More** en daarna **Instellingen**. 3. Open het paneel **Stijl** en sleep **Lettergrootte** naar 20. De tekst groeit terwijl je sleept. 4. Open **Letterkleur** en kies je merkkleur uit de stalen, of typ zijn code, zoals #1a4d8f, in het kleurveld. 5. Klik in het dialoogvenster op **Opslaan**. Op 20 px telt de zin als normale tekst, dus hij heeft een contrast van 4,5 op 1 nodig. Voer je kleurcode en de achtergrondkleur in in een contrastchecker; een witte pagina is #ffffff. 6. Klik op **Opslaan** op de werkbalk. ## Wat je ziet De zin groeit naar 20 px en krijgt je merkkleur. Koppen en links in hetzelfde Tekst-element krijgen die kleur ook, maar koppen behouden hun eigen grootte. ## Hoe de instellingen werken ### Lettergrootte **Lettergrootte** loopt van 0 tot 100 px, en 0 behoudt de grootte van je thema. De waarde is hetzelfde op elk schermformaat: een regel van 48 px op een desktop is ook 48 px op een telefoon. De grootte komt op het element, en tekst met een eigen grootte behoudt hem. Koppen meestal wel, omdat Bootstrap ze bemeten vanaf de basisgrootte van de pagina. Tekst die je met het lettergrottetool van de editor hebt bemeten behoudt zijn grootte ook. ### Letterkleur De kiezer toont het palet van je thema als stalen, als je site er een heeft. Hij heeft ook een dekkingsregelaar en een veld waarin je een kleurcode typt, zoals #1a4d8f. **Wissen** in de kiezer zet de tekst terug naar de themakleur. Op een inhoudselement zoals Tekst, Kaart of Melding reikt de kleur tot alles binnenin, koppen en links inbegrepen. Op een **Sectie** reikt hij alleen tot tekst zonder eigen kleur. Koppen en links die je thema kleurt behouden daar hun kleur. Bootstrap-kleurenklassen zijn gemarkeerd met `!important`, dus ze winnen van **Letterkleur**. Een voorbeeld is de chip **Primaire tekstkleur** onder **HTML-klassen**. Een ander is een editorstijl zoals **Primaire merktekst** op een deel van de tekst. Op een **Knop** komt de kleur op de knop zelf en vervangt hij de zweefkleur van het thema. Stel **Letterkleur** ook in in **Zweefstijl**. ### Hover De **Zweefstijl** heeft zijn eigen **Letterkleur** en **Lettergrootte**. Een grotere grootte bij hover duwt de inhoud eromheen weg, dus een kleurwijziging is meestal de rustigere keuze. ## Contrast Voor tekst die de meeste mensen kunnen lezen, vragen de WCAG 2-regels op niveau AA om zoveel contrast: | Tekst | Contrast met zijn achtergrond | |---|---| | Normale tekst | minstens 4,5 op 1 | | Grote tekst: 24 px (18 pt) of meer, of 19 px (14 pt) of meer in vet | minstens 3 op 1 | Meet op een foto tegen het lichtste deel achter de tekst. Test je kleurenpaar met een contrastchecker, zoals de [WebAIM-contrastchecker](https://webaim.org/resources/contrastchecker/). ## Als je het niet ziet - **De kop in de tekst groeide niet mee.** De kop heeft zijn eigen grootte uit je thema. Kies een ander kopniveau in de teksteditor, of gebruik zijn lettergrottetool. - **Links en koppen behouden hun kleur.** Op een Sectie behoudt tekst met zijn eigen themakleur hem. Stel **Letterkleur** in op het Tekst-element. - **Letterkleur doet helemaal niets.** Een kleurenklasse zoals **Primaire tekstkleur** of **Witte tekst** onder **HTML-klassen** wint. Verwijder zijn chip. - **Een deel van de tekst behoudt een andere kleur.** Een editorstijl op dat deel, zoals **Primaire merktekst**, wint. Verwijder de stijl in de teksteditor. - **Lettergrootte doet niets op een teller.** Cirkelteller en Getalenteller hebben hun eigen **Lettergrootte**. Gebruik die. - **Een staalkleur past niet meer bij het merk.** Een staal kopieert de kleur als je hem kiest. Kies na een paletwijziging de staal opnieuw. - **De merkkleur haalt de contrastcheck niet.** Kies een donkerdere tint ervan. Of maak de tekst minstens 24 px, zodat het doel van 3 op 1 geldt. - **De tekst is moeilijk te lezen op een foto.** Het contrast is te laag. Maak de foto donkerder met een verloop, zoals op de pagina [Achtergronden](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/achtergrond). - **De knop verloor zijn zweeftekstkleur.** Je **Letterkleur** vervangt de zweefkleur van het thema. Stel **Letterkleur** ook in in **Zweefstijl**. ## Wat nu? - [HTML-ID en klassen](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/aangepaste-css): hergebruik een tekststijl via een klasse in plaats van hem op elk element in te stellen.