Kort antwoord: Om tekst in CSS cursief te maken, gebruik je de eigenschap `font-style: italic;` bij elke selector. Voor semantische nadruk gebruik je de HTML-tag. Voor puur visuele styling gebruik je de ` <a>`-tag of pas je de CSS-eigenschap direct toe.
Cursivering is een van die kleine ontwerpbeslissingen die onopvallend een groot verschil maken. Het leidt de aandacht van de lezer, geeft ritme aan de tekst en creëert visuele hiërarchie zonder dat er een extra regel code nodig is.
Als je een website bouwt en wilt weten hoe je tekst correct cursiveert met CSS, inclusief wanneer je welke methode moet gebruiken en waarom dit belangrijk is voor zowel het ontwerp als de toegankelijkheid, dan ben je hier aan het juiste adres.
In deze handleiding nemen we je mee door alles, van de basisprincipes van de eigenschap `font-style` tot geavanceerde technieken zoals responsief cursief, overwegingen met betrekking tot lettertypefamilies en veelvoorkomende ontwikkelaarsfouten die je moet vermijden.
Kort samengevat: alles wat je moet weten over het cursiveren van tekst in CSS
- Gebruik `font-style: italic;` voor alle cursieve opmaak op basis van CSS. Dit is de standaardeigenschap en werkt in elke moderne browser zonder dat er omwegen nodig zijn.
- Externe stylesheets zijn altijd de beste aanpak. Schrijf je cursieve stijlen in een apart .css-bestand in plaats van inline of in de <head> van de HTML-code. Dit houdt je code overzichtelijk en onderhoudbaar naarmate je website groeit.
- De `em`-tag en de `i`-tag zijn niet hetzelfde. De ` em`-tag heeft een semantische betekenis en beïnvloedt hoe schermlezers uw inhoud interpreteren. De ` i`-tag is puur visueel en heeft geen betekenis.
- Niet alle lettertypen hebben een echte cursieve variant. Als het door u gekozen lettertype geen cursieve versie heeft, zal de browser er zelf een genereren door de tekst mechanisch schuin te zetten, wat er meestal wat onnatuurlijk uitziet. Laad daarom altijd de cursieve variant van uw lettertypeleverancier.
- Schuin en cursief zijn verschillende waarden. Cursief gebruikt de van nature schuine lettervormen van het lettertype. Schuin kantelt het normale lettertype kunstmatig. Als je de keuze hebt, is cursief de nettere optie.
- Overmatig gebruik van cursief doet afbreuk aan de impact ervan. Gebruik het alleen voor korte zinnen, bijschriften, titels en belangrijke termen. Grote blokken cursieve tekst vermoeien de ogen en verliezen hun vermogen om iets te benadrukken.
- Toegankelijkheid mag geen bijzaak zijn. Gebruik cursief nooit als enige signaal voor belangrijke informatie. Combineer het met vetgedrukte tekst, labels of omringende context, zodat alle gebruikers, inclusief gebruikers van schermlezers, uw inhoud volledig kunnen begrijpen.
Wat doet het cursiveren van tekst eigenlijk in CSS?
Wanneer je tekst cursief maakt in CSS, geef je de browser de opdracht om een woord, zin of tekstblok schuin weer te geven. Maar er gebeurt meer dan alleen een visuele kanteling.
Browsers maken onderscheid tussen twee dingen wanneer ze cursieve tekst tegenkomen:
- Visuele weergave: De tekst lijkt schuin op de pagina te staan.
- Semantische betekenis: Afhankelijk van de HTML-tag die je gebruikt, kunnen browsers en schermlezers die tekst als benadrukte inhoud beschouwen, wat van invloed is op hoe deze wordt voorgelezen en hoe zoekmachines het belang ervan interpreteren.
Dit onderscheid is precies de reden waarom het zo belangrijk is om de CSS-eigenschap `font-style` te begrijpen in combinatie met de juiste HTML-tags. Laten we het eens goed bekijken.
Zorg ervoor dat uw website er net zo goed uitziet als hij presteert.
Van typografie tot prestaties, elk detail telt. Wij ontwerpen WordPress-websites die overzichtelijk, snel en conversiegericht zijn.
De CSS-eigenschap `font-style` uitgelegd
De eigenschap `font-style` is de belangrijkste CSS-tool voor het bepalen van de schuine stand van je tekst. Het is overzichtelijk, eenvoudig en wordt door alle moderne browsers ondersteund.
Wat is de eigenschap font-style?
De CSS-eigenschap `font-style`, onderdeel van de `font`-afkorting, bepaalt of tekst rechtop, cursief of schuin wordt weergegeven. Je past deze eigenschap toe op elke CSS-selector, en de wijziging wordt automatisch doorgevoerd naar onderliggende elementen, tenzij deze wordt overschreven.
De basissyntaxis ziet er als volgt uit:
selector { font-style: italic; }De drie waarden van letterstijl
De eigenschap font-style accepteert de volgende waarden:
| Waarde | Wat het doet | Voorbeeld |
|---|---|---|
| normaal | Standaardwaarde. Tekst wordt rechtop weergegeven. | lettertype: normaal; |
| cursief | Geeft tekst weer in de echte cursieve versie van het lettertype, indien beschikbaar. | lettertype: cursief; |
| schuin | Geeft de tekst een kunstmatige hellingshoek. Handig wanneer een lettertype geen echte cursieve variant heeft. | lettertype: schuin; |
Het verschil tussen cursief en schuin is subtiel, maar wel belangrijk om te weten. Bij cursief wordt het daadwerkelijke cursieve ontwerp van het lettertype gebruikt, wat vaak een iets andere lettervorm is. Schuin kantelt het normale lettertype simpelweg mechanisch. Bij twijfel, gebruik cursief.
Drie manieren om cursief te gebruiken op je webpagina
CSS biedt drie methoden om de eigenschap `font-style` toe te passen, en elk daarvan heeft zijn eigen nut, afhankelijk van de grootte en structuur van je project.
Inline stijlen
Je schrijft de stijl rechtstreeks in het HTML-element met behulp van het `style`-attribuut.
<p style="font-style: italic;">Deze tekst wordt cursief weergegeven.</p>Dit is snel en handig voor eenmalige aanpassingen of snelle prototyping. Het is echter niet ideaal voor grote projecten, omdat het je markup combineert met je styling, waardoor toekomstige updates lastiger te beheren zijn.
Interne stijlbladen
Je plaatst je CSS binnen een<style> block in the <head> of your HTML document.
<head> <style> p { font-style: italic; } </style> </head>Deze aanpak werkt goed voor projecten met één pagina of kleine websites waar het logisch is om alles in één bestand te bewaren. Het is overzichtelijker dan inline stijlen, maar koppelt je ontwerp nog steeds aan een specifiek HTML-bestand.
Externe stylesheets (aanbevolen)
Je schrijft je CSS in een apart .css-bestand en koppelt dit aan je HTML-document. Dit is de aanpak die we aanbevelen voor elke serieuze productiewebsite.
<!-- In your HTML head --><link rel="stylesheet" href="styles.css" />/* In styles.css */ .highlight { font-style: italic; }Externe stylesheets zorgen ervoor dat uw code georganiseerd, herbruikbaar en gemakkelijk te onderhouden blijft op meerdere pagina's. Ze laden ook efficiënter wanneer ze in de cache van de browser worden opgeslagen, wat de prestaties van uw website .
Let op: Inline stijlen hebben de hoogste specificiteit, gevolgd door interne stylesheets en vervolgens externe stylesheets. Maar voor onderhoudbaarheid op de lange termijn en om consistentie op uw hele website te garanderen, kunt u het beste altijd externe stylesheets gebruiken.
Hoe kan ik specifieke elementen cursiveren?
Je wilt zelden alle tekst op een pagina cursiveren. Met CSS-selectors kun je cursivering precies toepassen waar je het nodig hebt.
Elementselectoren
Selecteer alle instanties van een specifiek HTML-element.
p { font-style: italic; }Dit maakt elke alinea op de pagina cursief. Gebruik dit spaarzaam, want het overal toepassen kan de leesbaarheid negatief beïnvloeden.
Klasselecteurs
Dit is de meest flexibele methode om cursivering toe te passen op meerdere specifieke elementen.
.pullquote { font-style: italic; font-size: 1.1em; }<p class="pullquote">Ontwerp gaat niet alleen over hoe iets eruitziet, maar ook over hoe het werkt.</p>Klasseselectoren zijn ideaal voor het stylen van componenten zoals citaten, bijschriften, disclaimers of elk herhalend element dat visueel moet opvallen.
ID-selectoren
Richt je op één uniek element op de pagina.
#boektitel { lettertype: cursief; }Gebruik ID-selectors spaarzaam. Ze hebben een zeer hoge specificiteit, waardoor het later lastiger kan zijn om je CSS aan te passen als je ontwerp verandert.
Een korte toelichting over CSS-specificiteit
wordt deze waarschijnlijk overschreven door een specifiekere regel elders in je CSS
De em-tag versus de i-tag: semantische versus stilistische nadruk
Dit is een van de meest voorkomende misverstanden over tekststijlen in HTML en CSS. Beide tags zetten tekst standaard cursief om, maar ze hebben een heel verschillende betekenis.
De em-tag en semantische nadruk
De tag staat voor nadruk. Het is een semantisch HTML- element dat browsers, schermlezers en zoekmachines vertelt dat de tekst die eromheen is geplaatst, nadruk bevat. Zie het als het schriftelijke equivalent van je stem verheffen bij een bepaald woord.
<p>Je mag toegankelijkheidstesten <em>nooit</em> overslaan.</p>Schermlezers passen hun toon of intonatie aan wanneer ze een <em>tag tegenkomen.</em>.
Dit is cruciaal voor gebruikers met een visuele beperking, omdat het de beoogde betekenis van de zin behoudt. Zoekmachines herkennen dit ook als een signaal van belang, wat uw on-page SEO op een subtiele manier kan ondersteunen.
De i-tag en visuele vormgeving
De <i><i>-tag, ofwel het <i>-element, is een puur stilistische tag. Het zet tekst om in cursief zonder extra betekenis of semantische waarde toe te voegen. De HTML-specificatie definieert wel degelijk het juiste gebruik van de <i><i>-tag, waaronder:</i></i>
- Technische of wetenschappelijke termen
- Vreemde woorden of uitdrukkingen
- Scheepsnamen (een aloude typografische conventie)
- Titels van werken in de doorlopende tekst
- Alternatieve stem of gedachtegang in creatief schrijven
<p>Het schip <i>HMS Endeavour</i> vertrok in 1768.</p>Beste werkwijze: Gebruik dit wanneer de nadruk de betekenis van een zin verandert. Gebruik het voor visuele conventies zonder semantische betekenis. En als je tekst alleen cursief wilt maken zonder enige HTML-betekenis, gebruik dan de CSS-eigenschap `font-style: italic;` op een klasse.
Cursief combineren met andere CSS-tekststijlen
Cursivering werkt zelden op zichzelf. Door het te combineren met andere CSS-eigenschappen voeg je extra nadruk toe en zorg je ervoor dat belangrijke tekst nog duidelijker opvalt.
Cursief en vetgedrukt samen
Door cursieve tekst te combineren met vetgedrukte tekst ontstaat een sterke visuele nadruk die moeilijk te missen is.
strong em { font-style: italic; font-weight: bold; }<p>Lees de <strong><em>algemene voorwaarden</em></strong> aandachtig door.</p>Gebruik deze combinatie voor belangrijke mededelingen, waarschuwingen of vetgedrukte tekst die de lezer echt moet laten stoppen met lezen.
Cursief en tekstdecoratie
Je kunt de stijl `font-style: italic;` combineren met de tekstdecoratie `underline;` om cursieve links te onderscheiden van de omringende cursieve tekst. Dit is handig wanneer je hoofdtekst al cursief is en je wilt dat links visueel opvallen.
.italic-link { font-style: italic; text-decoration: underline; color: #f05a28; }Vermijd overmatige opmaak van tekst. Als er te veel stijlen worden gecombineerd, kan het er rommelig uitzien en de lezer eerder afleiden dan begeleiden.
Lettertypefamilies en hoe beïnvloeden ze de weergave van cursief?
Niet alle lettertypen verwerken cursief op dezelfde manier. Dit is iets wat veel ontwikkelaars over het hoofd zien, en het kan ongemerkt je ontwerp verstoren.
Wanneer je `font-style: italic;` instelt, zoekt de browser naar een echte cursieve versie van het lettertype dat je gebruikt. Als die cursieve versie binnen de lettertypefamilie bestaat, wordt die geladen.
Als het lettertype niet bestaat, genereert de browser een schuine stand door het normale lettertype mechanisch te kantelen. Gegenereerde cursieve letters zien er vaak onhandig uit, vooral bij grotere lettergroottes.
Let op het volgende:
- Schreeflettertypen zoals Georgia of Playfair Display hebben vaak rijke, kenmerkende cursieve varianten. Ze zijn een veilige keuze voor hoofdtekst die regelmatig cursief zal worden weergegeven.
- Schreefloze lettertypen zoals Open Sans of Lato hebben doorgaans strakkere, eenvoudigere cursieve varianten die goed werken in gebruikersinterfaces.
- Variabele lettertypen bieden nog meer controle. Met variabele lettertypen kunt u de hellingshoek nauwkeurig afstellen met behulp van `font-style: oblique 15deg;`, waardoor u precies kunt bepalen hoe schuin of cursief de tekst eruitziet.
Google gebruikt , selecteer dan altijd de cursieve variant naast de normale variant.
Als je alleen de normale variant laadt, zal de browser cursief genereren, en het resultaat zal er merkbaar anders uitzien dan het echte cursieve ontwerp van het lettertype.
Responsieve cursieve tekst: tekststijl die er op elk apparaat goed uitziet
Cursieve tekst kan zich anders gedragen op kleine schermen. Sommige lettertypen geven hun cursieve variant anders weer bij kleinere formaten, wat resulteert in verminderde leesbaarheid, met name op schermen met een lage resolutie.
Gebruik mediaqueries om de lettergrootte van cursieve passages op mobiele apparaten aan te passen:
@media (max-width: 768px) { .pullquote { font-size: 1em; /* Iets groter voor betere leesbaarheid op kleine schermen */ line-height: 1.9; } }Nog een paar dingen om in gedachten te houden bij responsieve cursieve tekst:
- Verhoog de regelafstand iets voor blokken cursieve tekst. Cursieve tekst neemt van nature bij bepaalde lettergroottes wat meer horizontale ruimte in beslag, en een kleinere regelafstand kan de leesbaarheid bemoeilijken.
- Test je cursieve opmaakstijlen op echte apparaten, niet alleen in verkleinde browservensters. Weergaveverschillen tussen iOS Safari, Android Chrome en desktopbrowsers kunnen aanzienlijk zijn.
- Vermijd het gebruik van grote blokken cursieve tekst als hoofdtekst op mobiele apparaten. Reserveer cursief voor korte zinnen, bijschriften en accentuering.
Toegankelijkheidsaspecten bij het gebruik van cursieve tekst
Goed webdesign betekent ontwerpen voor iedereen. Hier zie je hoe cursieve tekst samenhangt met toegankelijkheid.
Hoe gaan schermlezers om met cursieve tekst?
Schermlezers reageren op semantische HTML, niet op visuele opmaak. Daarom is het verschil tussen <em>en <i>in de praktijk zo belangrijk.</i></em>.
- Tekst binnen <em>tags zorgt bij de meeste schermlezers voor een verandering in de stemintonatie, waardoor de klemtoon voor de luisteraar behouden blijft.</em>.
- Tekst binnen <i>tags wordt in dezelfde toon gelezen als de omringende tekst, omdat deze geen semantische betekenis heeft.</i>.
- Tekst die puur via CSS cursief is opgemaakt, zonder semantische tag, wordt door schermlezers als gewone tekst behandeld.
Cursieve tekst inclusief maken
Enkele praktische tips om ervoor te zorgen dat het gebruik van cursief geen belemmeringen vormt:
- Gebruik cursiefschrift nooit alleen om een belangrijke betekenis over te brengen. Combineer het altijd met een andere aanwijzing, zoals vetgedrukte tekst, een label of de omringende context.
- Zorg voor voldoende kleurcontrast, zelfs wanneer tekst cursief is. De schuine stand van cursieve letters kan het waargenomen contrast enigszins verminderen.
Vermijd het gebruik van grote blokken cursieve tekst voor belangrijke instructies of waarschuwingen. Grote blokken cursieve tekst zijn moeilijker te lezen voor mensen met dyslexie.
Test je pagina's vóór publicatie met toegankelijkheidstools zoals WAVE of Axe om eventuele problemen met de opmaak van nadruk op te sporen.
Veelgemaakte fouten van ontwikkelaars bij het cursiveren van tekst in CSS
Zelfs ervaren ontwikkelaars maken deze fouten. Hieronder vind je de meest voorkomende fouten met cursieve tekst en hoe je ze kunt corrigeren.
- Het i-element gebruiken voor semantische nadruk. Als je wilt aangeven dat een woord extra belangrijk is in een zin, gebruik dan <i> , niet <i> . Het i-element heeft geen semantische betekenis en zal die belangrijkheid niet overbrengen aan schermlezers of zoekmachines.
- Het cursiveren van hele alinea's. Grote blokken cursieve tekst zijn echt moeilijker te lezen. Cursivering verliest zijn impact bij overmatig gebruik en kan aanvoelen als visuele ruis in plaats van betekenisvolle nadruk.
- Vergeten de cursieve variant te laden. Als je een Google Font laadt zonder de cursieve variant mee te nemen, genereert de browser een schuine versie die er meestal niet mooi uitziet. Laad altijd de specifieke cursieve varianten die je nodig hebt.
- Weergave op mobiele apparaten wordt buiten beschouwing gelaten. Cursieve tekst kan op bepaalde mobiele apparaten aanzienlijk kleiner of moeilijker leesbaar lijken. Test altijd op echte apparaten en niet alleen op desktopvoorbeelden.
- Vertrouwen op de standaard browserstijlen. Niet alle lettertypen hebben een standaardwaarde voor cursieve weergave die eruitziet zoals je verwacht. Definieer de letterstijl altijd expliciet in je CSS in plaats van ervan uit te gaan dat de browser deze consistent op alle platforms verwerkt.
Snel naslagwerk: Spiekbriefje voor cursief in CSS
Je hoeft niet elke keer de documentatie door te spitten. Hier is een snel overzicht van alle essentiële CSS-waarden voor cursivering, selectors en HTML-tags die je daadwerkelijk zult gebruiken.
letterstijl Waarden
/* Normale, rechtopstaande tekst */ p { font-style: normal; } /* Echt cursief met de cursieve variant van het lettertype */ p { font-style: italic; } /* Mechanisch schuine tekst */ p { font-style: oblique; } /* Variabele schuine tekst met controle over de hoek */ p { font-style: oblique 20deg; }Veelvoorkomende selectiepatronen
/* Alle alinea's */ p { font-style: italic; } /* Elementen met een klasse */ .caption { font-style: italic; } /* Een uniek element */ #tagline { font-style: italic; } /* Genest: em binnen een blockquote */ blockquote em { font-style: italic; font-weight: bold; }HTML-tagreferentie
| Tag | Type | Wanneer te gebruiken |
|---|---|---|
| <em> | Semantisch | Nadruk leggen op iets dat de betekenis verandert |
| <i> | Stijlvol | Technische termen, buitenlandse woorden, scheepsnamen, titels |
| CSS-klasse | Alleen visueel | Vormgeving zonder semantische intentie |
Conclusie
Cursiveren van tekst in CSS is eenvoudig als je het hele plaatje begrijpt. De eigenschap `font-style` geeft je precieze controle over hoe tekst wordt gekanteld, en door deze te combineren met de juiste HTML-tags zorg je ervoor dat je styling betekenis heeft voor zowel mensen als machines.
Om de belangrijkste conclusies samen te vatten:
- Gebruik `font-style: italic;` in een extern stylesheet voor schone, onderhoudbare code.
- Gebruik dit <em>wanneer de nadruk de betekenis van een zin verandert. Gebruik het <i>voor stilistische conventies zoals scheepsnamen, buitenlandse woorden of een alternatieve vertelstem.</i></em>.
- Laad altijd de cursieve variant van het door u gekozen lettertype om door de browser gegenereerde schuine standen te voorkomen.
- Houd rekening met toegankelijkheid. Gebruik nooit alleen cursiefschrift om belangrijke tekst over te brengen.
- Test je cursieve opmaak op mobiele apparaten en in verschillende browsers voordat je publiceert.
een website bouwt of en elk detail, van typografie tot laadsnelheid, door experts wilt laten verzorgen, dan staat Seahawk Media voor u klaar.
Ons team bouwt websites met hoge prestaties die er strak uitzien en goed scoren in zoekresultaten. Neem contact met ons op om uw volgende project te bespreken.
Veelgestelde vragen over het cursiveren van tekst in CSS
Heeft het cursiveren van tekst in CSS invloed op SEO?
Het gebruik van puur CSS-cursief heeft geen directe impact op SEO. Echter, het gebruik van De tag stuurt een subtiel semantisch signaal naar zoekmachines, waarmee wordt aangegeven dat de tekst die eromheen is geplaatst, belangrijk is op de pagina.
Waarom wordt mijn cursieve CSS-stijl niet weergegeven?
Een specifiekere regel heeft waarschijnlijk voorrang. Open de ontwikkelaarstools van je browser, inspecteer het element en controleer welke stijlen zijn doorgestreept. Een ontbrekende link naar een stylesheet of een typefout in de waarde kan dit ook veroorzaken.
Moet ik em, i of CSS gebruiken om tekst cursief te maken?
Gebruik voor betekenisvolle nadruk die de zinsbetekenis beïnvloedt. Gebruik Voor visuele conventies zoals buitenlandse woorden of scheepsnamen, gebruik je een CSS-klasse voor puur decoratieve cursivering.
Wat is het verschil tussen cursief en schuin?
Cursief gebruikt de natuurlijke, ontworpen hellingshoek van het lettertype. Schuin kantelt het normale lettertype kunstmatig. Gebruik altijd cursief als uw lettertype een speciale cursieve variant heeft.
