CSS tekst opmaken: lettertypen, grootte, gewicht, onderstreping, uitlijning
Speeltuin voor CSS-tekstopmaak
CSS tekst opmaken: lettertype, grootte, vet, onderstrepen, centreren | We.Inc
Eén live speeltuin voor CSS-tekst: lettertype, grootte in px, rem of clamp(), gewicht, stijl van de onderstreping, uitlijning, regelhoogte en spatiëring, met Tailwind-classes.
U maakt tekst op in CSS met een handvol properties: font-family kiest het lettertype, font-size bepaalt de grootte (rem is het best), font-weight: 700 maakt het vet, text-decoration voegt een onderstreping toe en text-align: center centreert het. line-height en letter-spacing regelen de spatiëring. Wijzig ze in de speeltuin hieronder en kopieer de CSS.
De properties die u het meest gebruikt
Doel
CSS
Tailwind
Vet
font-weight: 700
Cursief
font-style: italic
Onderstrepen
text-decoration: underline
Tekst centreren
text-align: center
Grotere tekst
font-size: 1.25rem
Ruimere regels
line-height: 1.6
leading-relaxed (1.625)
In plaats van zes losse naslagpagina's behandelt deze ene speeltuin lettertype, grootte, gewicht, stijl, details van de onderstreping, uitlijning, regelhoogte en letterafstand samen, schrijft de CSS en de Tailwind-classes terwijl u ze wijzigt, en voegt geteste recepten toe voor tekst centreren, font stacks en het laden van webfonts.
Typ uw eigen zin in de speeltuin of houd de voorbeeldtekst.
Wijzig de instellingen voor lettertype, grootte-eenheid, gewicht, decoratie en spatiëring. De preview en de CSS worden direct bijgewerkt.
Kopieer het CSS-blok, of de Tailwind-classes voor dezelfde instellingen.
Gebruik de recepten verderop voor centreren, font stacks en @font-face.
Lopende tekst leest het best rond 16 tot 18 pixels, met een regelhoogte van 1.5 tot 1.7 en regels van ongeveer 60 tot 75 tekens.
Stel lettergroottes in rem in zodat ze de browserinstelling van de lezer volgen. Gebruik clamp() voor koppen die met het scherm moeten meegroeien.
Laad alleen de lettergewichten die u gebruikt. Elk extra gewicht van een webfont is weer een bestand om te downloaden.
Onderstreep geen tekst die geen link is. Lezers verwachten dat onderstreepte woorden klikbaar zijn.
Veelgestelde vragen
Hoe maak ik tekst vet in CSS?
Gebruik font-weight: bold of een getal zoals 600 of 700. Getallen tussen 100 en 900 kiezen uit de gewichten die het lettertype levert. Heeft het lettertype alleen een normaal gewicht, dan faket de browser vet door de letters dikker te maken, wat zwaarder en minder scherp oogt dan een echt vet bestand.
Hoe centreer ik tekst verticaal?
text-align centreert alleen horizontaal. Om verticaal te centreren in een vak, maakt u van het vak een flex- of grid-container: display: grid; place-items: center; centreert de tekst in één regel in beide richtingen. Voor één regel in een balk met vaste hoogte werkt ook een line-height gelijk aan de hoogte van de balk.
Hoe verander ik de kleur of dikte van de onderstreping?
Gebruik text-decoration-color, text-decoration-thickness en text-underline-offset. Bijvoorbeeld text-decoration: underline; text-decoration-color: #4F98FB; text-decoration-thickness: 2px; text-underline-offset: 4px; geeft een dikkere blauwe onderstreping met ruimte onder de letters.
Moet line-height een eenheid hebben?
Meestal niet. Een waarde zonder eenheid zoals 1.5 wordt vermenigvuldigd met de eigen lettergrootte van elk element, zodat koppen en kleine lettertjes in het blok een logische spatiëring houden. Een vaste waarde zoals 24px wordt ongewijzigd doorgegeven en kan grotere tekst krap maken.
Wat is een font stack?
Een door komma's gescheiden lijst lettertypen in font-family. De browser gebruikt de eerste die beschikbaar is en gaat de lijst af als die ontbreekt, eindigend met een generieke familie zoals sans-serif of serif die altijd bestaat.
Grootte-eenheden: px, rem en clamp()
Pixels geven een exacte grootte die de voorkeursgrootte van de lezer negeert. rem is relatief ten opzichte van de lettergrootte van de root, standaard 16px, dus 1.125rem is voor de meeste mensen 18px en groeit mee voor lezers die een grotere standaard instellen.
clamp(min, preferred, max) is voor groottes die met het venster moeten schalen. clamp(1.75rem, 1.2rem + 2.5vw, 3rem) is nooit kleiner dan 28px of groter dan 48px en beweegt er vloeiend tussen. Houd een rem-deel in de middelste waarde zodat browserzoom en tekstinstellingen effect blijven hebben.
Leesbare standaardwaarden
De meeste leesproblemen komen voort uit drie instellingen: tekst die te klein is, regels die te lang zijn en regels die te dicht op elkaar staan. Een max-width van ongeveer 65ch op alinea's, een lettergrootte van minstens 1rem en een regelhoogte rond 1.6 lossen de meeste op, nog voor enige verdere opmaak.
Grote koppen willen het tegenovergestelde: een krappere regelhoogte, rond 1.1 tot 1.2, en vaak een licht negatieve letter-spacing. Kleine labels in hoofdletters lezen beter met een beetje positieve letter-spacing.
Webfonts laden zonder de pagina te vertragen
Elk webfont is een download die tekst kan vertragen. font-display: swap toont meteen het fallback-lettertype en wisselt zodra het webfont binnen is, zodat lezers nooit naar onzichtbare tekst staren. WOFF2-bestanden zelf hosten voorkomt een verbinding met een ander domein.
Gebruikt u Google Fonts, vraag dan in één link alleen de families en gewichten op die u nodig hebt, en voeg de preconnect-hints toe die het voorstelt. Een fallback in de stack met vergelijkbare verhoudingen verkleint de sprong wanneer het lettertype wordt ingewisseld.
Tekst horizontaal en verticaal centreren
Horizontaal: text-align
text-align centreert de regels binnen het blok. Om het blok zelf te centreren, geeft u het een breedte en margin-inline: auto.
Beide richtingen: grid met place-items
Twee regels CSS op de container centreren alle inhoud in beide richtingen, ongeacht de grootte.
Onderstrepingen die ontworpen ogen
Kleur, dikte, offset en stijl
De decoration-properties veranderen de onderstreping zonder de tekstkleur aan te raken. text-decoration-skip-ink voorkomt dat lijnen door de staarten van letters snijden.
Een lettertype laden met @font-face of Google Fonts
Zelf gehost lettertype met @font-face
Laat src naar uw WOFF2-bestand wijzen. Eén blok per gewicht en stijl die u echt gebruikt.
Google Fonts-link
Vraag alleen de gewichten op die u gebruikt. display=swap stelt font-display voor u in.
Leesbare standaardwaarden om mee te beginnen
Een kleine, verstandige basis voor tekst
Lettergrootte, regelhoogte en regellengte één keer ingesteld; koppen krapper. Pas de kleuren en groottes aan uw ontwerp aan.
Tailwind-equivalenten
CSS en de bijbehorende Tailwind-classes (standaardthema)