Responsieve typografie en spatiëring
Pas tekengroottes en spatiëring aan bij verschillende breakpoints om op alle apparaten leesbare en proportionele ontwerpen te behouden.
Responsieve typografie en spatiëring is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Tailwind CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Waarom typografie moet meegroeien
Een kop die er op een desktopmonitor elegant uitziet met 48px, is overweldigend op een telefoonscherm van 375px. Omgekeerd wordt hoofdtekst van 14px die prettig leesbaar is op mobiel, klein en moeilijk te lezen op een groot 4K-scherm. Responsieve typografie lost dit op door verschillende tekengroottes te definiëren voor verschillende viewportbreedtes, zodat de leesbaarheid op alle apparaten behouden blijft. Tailwind maakt dit eenvoudig met responsieve hulpprogramma's voor tekstgrootte.
<!-- Hero headline: grows with screen size -->
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold leading-tight">
Build Beautiful UIs
</h1>Responsieve tekengroottes
De text-*-hulpprogramma's van Tailwind passen goed bij responsieve voorvoegsels. Een gebruikelijke schaal voor koppen begint op mobiel met text-2xl en loopt op desktop op tot text-5xl of hoger. Hoofdtekst kan bijvoorbeeld van text-sm op mobiel naar text-base op desktop gaan. Het belangrijkste is dat je prettige startgroottes kiest voor de kleinste apparaten en die vervolgens stapsgewijs vergroot.
<!-- Typography scale across breakpoints -->
<div class="space-y-6 p-6 max-w-4xl">
<!-- Display heading: large jump from mobile to desktop -->
<h1 class="text-3xl md:text-5xl lg:text-7xl font-black tracking-tight">
Display Heading
</h1>
<!-- Section heading -->
<h2 class="text-xl md:text-2xl lg:text-3xl font-bold">Section Heading</h2>
<!-- Body copy -->
<p class="text-sm md:text-base lg:text-lg text-gray-700 leading-relaxed max-w-prose">
Body copy scales from small on mobile to base on tablet to large on desktop for comfortable reading at every size.
</p>
<!-- Caption / meta -->
<p class="text-xs md:text-sm text-gray-500">Caption text</p>
</div>Responsieve regelhoogte
Regelhoogte heeft bij verschillende groottes een verschillend effect op de leesbaarheid. Grote displaytekst heeft een kleinere regelhoogte nodig (leading-tight of leading-none) om samenhangend te ogen, terwijl hoofdtekst baat heeft bij ruime tussenruimte (leading-relaxed of leading-loose). Bij grote breakpoints veranderen displaykoppen vaak hun regelhoogte: leading-tight md:leading-none voorkomt een onhandige stapeling van een kop die uit twee regels bestaat, maar op desktopbreedtes één regel wordt.
<!-- Leading adapts with font size -->
<h1 class="text-3xl leading-snug md:text-5xl md:leading-tight lg:text-7xl lg:leading-none font-black">
This Long Headline Wraps
</h1>
<p class="text-sm leading-normal md:text-base md:leading-relaxed lg:text-lg lg:leading-loose text-gray-600 max-w-prose mt-4">
Paragraph text uses relaxed line-height for comfortable reading across all screen sizes.
</p>Responsieve letterafstand
Ook letterafstand (tracking) profiteert van responsieve aanpassingen. Tekst voor grote displays met een krappe letterafstand kan er op kleine groottes opeengepakt uitzien, terwijl een ruimere letterafstand compacte koppen luchtiger maakt. Het patroon tracking-tight md:tracking-tighter verkleint de letterafstand verder naarmate de tekengrootte op desktop toeneemt. Dit is een professionele typografische conventie voor grote displaytekst.
<!-- Letter spacing tightens as font size grows -->
<h1 class="text-3xl tracking-normal md:text-5xl md:tracking-tight lg:text-7xl lg:tracking-tighter font-black">
Brand Name
</h1>
<!-- Uppercase labels: wider tracking for legibility -->
<p class="text-xs md:text-sm font-semibold uppercase tracking-widest text-gray-500">
CATEGORY LABEL
</p>Responsieve tekstuitlijning
Tekstuitlijning is een van de meest ingrijpende responsieve veranderingen. Herosecties en beschrijvingen van functies zijn meestal gecentreerd op mobiel (waar het scherm smal is en centreren voor visuele balans zorgt), maar links uitgelijnd op desktop (waar lange regels gecentreerde tekst moeilijk leesbaar worden en losstaand aanvoelen). Het patroon text-center md:text-left past deze gebruikelijke conventie toe.
<!-- Center on mobile, left-align on desktop -->
<div class="flex flex-col md:flex-row gap-8 items-center p-8">
<div class="md:w-1/2 text-center md:text-left">
<p class="text-sm font-semibold uppercase tracking-widest text-blue-500 mb-2">New Release</p>
<h2 class="text-3xl md:text-4xl font-bold mb-4">Tailwind CSS v4</h2>
<p class="text-gray-600 max-w-prose md:max-w-none">
The next generation of utility-first CSS.
</p>
<button class="mt-6 bg-blue-600 text-white px-6 py-3 rounded-lg">
Read the Docs
</button>
</div>
<div class="md:w-1/2">
<div class="aspect-video bg-gradient-to-br from-blue-400 to-indigo-600 rounded-2xl"></div>
</div>
</div>Responsieve opvulling voor secties
De opvulling van een sectie bepaalt de ademruimte tussen UI-blokken. Gebruikelijk is compacte opvulling op mobiel (py-10 px-4) en ruime opvulling op desktop (lg:py-24 lg:px-8). De binnenste container krijgt zijn eigen beperking voor horizontale opvulling via max-w-7xl mx-auto, terwijl de buitenste sectie een achtergrond kan hebben die zich over de volledige breedte uitstrekt. Deze opvulling in twee lagen vormt de basis van de meeste paginalay-outs.
<!-- Two-layer padding: outer section + inner container -->
<section class="bg-gray-50 py-10 px-4 sm:py-14 sm:px-6 lg:py-20 lg:px-8">
<!-- Inner container constrains content width -->
<div class="max-w-6xl mx-auto">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-6 lg:mb-12">
Our Services
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-xl shadow-sm">Service 1</div>
<div class="bg-white p-6 rounded-xl shadow-sm">Service 2</div>
<div class="bg-white p-6 rounded-xl shadow-sm">Service 3</div>
</div>
</div>
</section>Responsieve tussenruimte tussen elementen
Het verticale ritme — de tussenruimte tussen koppen, alinea's en secties — moet op bredere schermen verhoudingsgewijs groter zijn. Met Tailwinds space-y-* en responsieve voorvoegsels verhoogt space-y-4 md:space-y-6 lg:space-y-8 de tussenruimte tussen gestapelde onderliggende elementen bij grotere breakpoints. Zo blijft de visuele hiërarchie behouden wanneer elementen op bredere schermen verder uit elkaar komen te staan.
<!-- Vertical spacing scales with screen width -->
<article class="max-w-prose mx-auto px-4 py-8">
<div class="space-y-4 md:space-y-6 lg:space-y-8">
<h1 class="text-2xl md:text-3xl font-bold">Article Title</h1>
<p class="text-gray-700 leading-relaxed">
First paragraph. The space between elements grows as the screen gets wider.
</p>
<h2 class="text-xl md:text-2xl font-semibold">Section Heading</h2>
<p class="text-gray-700 leading-relaxed">
Second section content with proportional vertical spacing.
</p>
</div>
</article>Responsieve max-w voor leesbaarheid
Hoofdtekst moet op brede schermen worden beperkt tot een leesbare regellengte. Zonder een max-width kan tekst op een monitor van 1920px meer dan 200 tekens per regel bevatten — veel meer dan prettig leesbaar is. Pas max-w-prose toe op tekstcontainers; dit beperkt de regellengte tot 65 tekens (65ch). Op mobiel wordt de tekst vanzelf afgebroken voordat die limiet wordt bereikt, waardoor max-w-prose in feite responsief werkt zonder breakpointvoorvoegsel.
<!-- max-w-prose for readable text at any viewport -->
<div class="px-4 py-8">
<h1 class="text-3xl font-bold mb-4">Long Form Content</h1>
<!-- Constrained to 65ch for reading comfort -->
<div class="max-w-prose">
<p class="text-gray-700 leading-relaxed mb-4">
This paragraph is constrained to a comfortable reading width of 65 characters
per line regardless of the viewport size. On mobile it wraps naturally.
On desktop monitors it stays narrow and readable.
</p>
<p class="text-gray-700 leading-relaxed">
Long form writing, documentation, and blog posts benefit enormously
from this constraint. Wide text is one of the most common readability
mistakes in web design.
</p>
</div>
</div>Responsief lettergewicht en responsieve stijl
Hoewel het minder vaak voorkomt, kunnen ook lettergewicht en stijl responsief zijn. Een bedrijfsnaam of slogan kan op mobiel in normale dikte worden weergegeven (lichter laden en beter renderen op kleine groottes) en op desktop vet (waar het lettertype scherp wordt weergegeven op grote groottes). font-medium md:font-bold bereikt dit. Responsief cursief (md:not-italic) kan decoratieve stijlen die alleen op kleine schermen nodig zijn op vergelijkbare wijze normaliseren.
<!-- Responsive font weight and style -->
<div class="space-y-2 p-4">
<p class="font-medium md:font-bold text-xl">Company Name</p>
<p class="text-sm font-light md:font-normal text-gray-600">
Subheading text gets slightly heavier on larger screens
</p>
<!-- Label: thin on mobile, bold on desktop -->
<span class="text-xs font-thin sm:font-medium uppercase tracking-widest text-blue-500">
FEATURED
</span>
</div>Vloeiende typografie met Clamp
Hoewel de breakpointbenadering van Tailwind in de meeste behoeften voorziet, maakt CSS clamp() werkelijk vloeiende tekengroottes mogelijk die zonder sprongen continu tussen een minimum en maximum schalen. Met de syntaxis voor willekeurige waarden van Tailwind stelt text-[clamp(1.5rem,5vw,3rem)] het lettertype in op minimaal 1.5rem en maximaal 3rem, waarbij het daartussen vloeiend schaalt met 5% van de viewportbreedte. Zo voorkom je de plotselinge sprongen in grootte bij breakpoints en krijgt de pagina een verfijnder, tijdschriftachtig uiterlijk.
<!-- Fluid heading using CSS clamp -->
<h1
class="font-black tracking-tight leading-none"
style="font-size: clamp(2rem, 6vw, 5rem)"
>
Fluid Heading
</h1>
<!-- Same with Tailwind arbitrary value (JIT) -->
<p
class="text-[clamp(0.875rem,2.5vw,1.125rem)] text-gray-700 leading-relaxed max-w-prose"
>
Fluid body text scales from 14px at mobile widths to 18px at wide screens.
</p>Volledige responsieve artikelindeling
Hier is een volledige, productierijpe artikelkop waarin alle responsieve technieken voor typografie en tussenruimte uit deze les worden toegepast. De kop, subkop, metagegevens en hoofdtekst gebruiken allemaal responsieve grootte, gewicht, uitlijning en tussenruimte. Zo ontstaat een professionele leeservaring van mobiel tot desktop, zonder ook maar één regel aangepaste CSS.
<article class="px-4 py-10 sm:px-6 sm:py-14 lg:py-20">
<div class="max-w-3xl mx-auto">
<!-- Label -->
<p class="text-xs sm:text-sm font-semibold uppercase tracking-widest text-blue-500 mb-3">Tutorial</p>
<!-- Headline -->
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-black leading-tight sm:leading-snug mb-4">
Mastering Responsive Typography in Tailwind
</h1>
<!-- Subheadline -->
<p class="text-lg sm:text-xl text-gray-600 leading-relaxed max-w-2xl mb-6">
Learn how font sizes, spacing, and alignment adapt across breakpoints.
</p>
<!-- Meta -->
<div class="flex items-center gap-4 text-sm text-gray-400">
<span>June 21, 2024</span>
<span>•</span>
<span>5 min read</span>
</div>
</div>
</article>Korte controle
Test je begrip van de concepten uit Tailwind CSS Mastery in deze les.
Samenvatting van de les
In deze les heb je geleerd: text-3xl sm:text-4xl lg:text-6xl maakt een responsieve schaal voor koppen van mobiel tot desktop, text-center md:text-left is het standaardpatroon voor responsieve tekstuitlijning in herosecties, en max-w-prose beperkt hoofdtekst tot 65 tekens per regel voor prettig lezen zonder breakpoints. Hierna verkennen we hoe je elementen responsief weergeeft en verbergt.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Responsieve typografie en spatiëring” gratis?
Ja — de volledige tekst van “Responsieve typografie en spatiëring” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Tailwind CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Responsieve typografie en spatiëring”?
Pas tekengroottes en spatiëring aan bij verschillende breakpoints om op alle apparaten leesbare en proportionele ontwerpen te behouden. Je oefent met Tailwind CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Tailwind CSS Academy te beginnen?
Ervaring vooraf is niet nodig. Tailwind CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Responsieve typografie en spatiëring”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Tailwind CSS Academy?
Ja. Elke les over Tailwind CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Het breakpoint-systeem van Tailwind
- Responsieve lay-outs met Flex en Grid
- Responsieve typografie en spatiëring
- Elementen responsief tonen en verbergen