theme.json<\/code> bestand helpt ontwikkelaars om WordPress thema’s te bouwen die hier gebruik van maken.<\/p>\nDit artikel onderzoekt WordPress typografie voor zowel FSE als theme.json<\/code>. Maar de discussie gaat ook over belangrijke contexten zoals de technologie die je gebruikt, de technische overwegingen waarmee je rekening moet houden en de evolutie van hoe we lettertypes gebruiken in design.<\/p>\n<\/div><\/kinsta-auto-toc>\nTypografie op het web: een korte geschiedenis<\/h2>\n
Als je terugkijkt naar de eerste webontwerpen<\/a>, zie je dat ondanks de variatie in layouts, lettertypes een consistente presentatie hebben gehad. Dit is deels beschikbaarheid en deels noodzaak. In het kort: zonder de technologie die we nu hebben, kunnen woorden op het web alleen lettertypes gebruiken die beschikbaar zijn op je computer.<\/p>\nEen “websurfer” van midden tot eind jaren ’90 zou slechts een handvol voorspelbare lettertypes hebben: Times New Roman, Arial, Helvetica, Georgia en Verdana. De laatste twee zijn van Microsoft die goed renderen voor het web, ongeacht het tijdperk.<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/verdana-georgia.png\")
Voorbeelden van de lettertypen Verdana en Georgia.<\/figcaption><\/figure>\nDeze primitieve selectie is consistent en betrouwbaar, maar mist flexibiliteit. Diensten zoals Google Fonts en Adobe Fonts<\/a> gebruiken het WOFF bestandsformat om je toegang te geven tot een bibliotheek van duizenden lettertypes, met een eenvoudig insluitproces.<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/google-fonts.png\")
De hoofdinterface van Google Fonts.<\/figcaption><\/figure>\nDit geeft je meer mogelijkheden om de leesbaarheid te verbeteren, onderscheidende ontwerpen te maken en de gebruikerservaring (UX) voor je site aan te passen. Nadelen zijn onder andere mogelijke prestatieproblemen (zoals een verschuiving van hoe content ingedeeld wordt<\/a>), afhankelijkheid van externe diensten om het meest cruciale element op je site weer te geven en privacyproblemen.<\/p>\nDit brengt veel webdesigners ertoe om af te zien van lettertypebibliotheken en het gebruik van systeemlettertypen<\/a> te heroverwegen. De snellere verwerking en controle die je hebt over het toepassen van een “stapel systeemlettertypen” die prioriteit geeft aan native lettertypen en ook terugvalopties gebruikt, is een solide aanpak.<\/p>\nWordPress en typografie<\/h3>\n
WordPress legt sterk de nadruk op typografie om je te helpen boeiende en leesbare inhoud te maken. Door de geschiedenis heen hebben de standaardthema’s<\/a> van WordPress allemaal lettertypen gebruikt die een balans vinden tussen esthetiek en functionaliteit.<\/p>\nDe huidige standaardthema’s gebruiken systeemlettertypen voor een strakke, moderne en krachtige presentatie. Oudere standaardthema’s gebruiken combinaties zoals Noto Sans en Noto Serif (voor Twenty Fifteen<\/a>) en Montserrat en Merriweather (voor Twenty Sixteen<\/a>).<\/p>\nOm deze typografische “cirkel van het leven” te laten zien, gebruikt Twenty Sixteen Helvetica en Georgia als terugvalopties. Het standaardthema van Twenty Ten<\/a> gebruikt alleen Helvetica, Arial en Georgia:<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/twenty-ten.png\")
De Twenty Ten demopagina van WordPress.org.<\/figcaption><\/figure>\nHoewel deze keuzes de toon zetten voor het WordPress ontwerp binnen elk thema, kunnen ze je ook inspireren om goed op te letten hoe je typografie gebruikt – iets waar WordPress FSE bij helpt.<\/p>\n
Een korte inleiding over Full Site Editing en theme.json<\/h2>\n
FSE<\/a> en theme.json<\/code> staan centraal in hoe je typografie beheert in WordPress, dus een goed begrip van beide is essentieel. FSE maakt gebruik van de Block Editor en voegt daar meer functionaliteit aan toe om de Site Editor te worden.<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/site-editor.png\")
De interface van de WordPress Site Editor lijkt veel op de Block Editor, maar met meer aanpassingsmogelijkheden.<\/figcaption><\/figure>\nDit verenigt de ontwerpopties van je site op een aantal manieren:<\/p>\n
\n- Je gebruikt de bewerkingsaanpak van blokken voor de hele site, niet alleen voor je inhoud.<\/li>\n
- Een templatebibliotheek maakt deel uit van de setup, dus je kunt deze bewerken met dezelfde tools als je content.<\/li>\n
- Styling gebeurt ook binnen de Site Editor en biedt een globaal instellingenschema.<\/li>\n
- Voor het bewerken van sites is geen code nodig om de beschikbare opties te implementeren. Dit overbrugt de kloof tussen ontwikkeling en eindgebruikersontwerp.<\/li>\n<\/ul>\n
Je kunt het theme.json<\/code> bestand beschouwen als een ontwikkelversie van FSE. Je hebt JavaScript Object Notation (JSON) kennis nodig om met het bestand te kunnen werken, maar dit ligt binnen de mogelijkheden van de meeste site-eigenaren. Het is een centraal configuratiebestand voor het beheer van je globale stijlen en instellingen.<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/theme-json.png\")
Een theme.json bestand getoond in een code editor.<\/figcaption><\/figure>\nElke instelling gebruikt een sleutel\/waarde-paar van option:value<\/code>, en je kunt dit op een aantal manieren implementeren:<\/p>\n\n- Globale kleurenpaletten defini\u00ebren.<\/li>\n
- Lettertypefamilies en -groottes instellen.<\/li>\n
- Blokspecifieke stijlen configureren.<\/li>\n
- Voorkeuren voor spati\u00ebring en layout beheren.<\/li>\n<\/ul>\n
Door gebruik te maken van theme.json<\/code> kun je meer consistente en aanpasbare thema’s maken zonder dat je custom CSS<\/a> nodig hebt (hoewel dit ook mogelijk is). De aanpasbaarheid en flexibiliteit van theme.json<\/code> betekent dat dit een belangrijk onderdeel is van het ontwikkelen van thema’s voor WordPress. De optimale aanpak is om beide op verschillende manieren te gebruiken voor al je thema-ontwerp – en typografie is daarop geen uitzondering.<\/p>\nTypografie instellen in de WordPress Site Editor<\/h2>\n
Als je weet hoe je de Block Editor moet gebruiken, kun je ook de Site Editor gebruiken. Navigeer binnen WordPress naar het scherm Appearance <\/strong>> Editor<\/strong>. Dit toont het beginscherm van de Site Editor:<\/p>\n![\"Het](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/site-editor-home.png\")
Het beginscherm van de Site Editor.<\/figcaption><\/figure>\nHet Styles<\/strong> scherm in de linker navigatie geeft je een aantal globale ontwerpopties waaronder typografische wijzigingen:<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/styles-options.gif\")
Verschillende vooringestelde stijlen binnen de WordPress Site Editor.<\/figcaption><\/figure>\nVoor de meeste toepassingen bieden individuele instellingen voor verschillende typografie-aspecten meer waarde. Bovenaan het Styles<\/strong> scherm staan twee kleine icoontjes die verdere opties openen: het Style Book en het Potlood icoon Edit Styles<\/strong>.<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/styles-sidebar-icons.png\")
De stijlen bewerken pictogrammen in de Site Editor.<\/figcaption><\/figure>\nDaarnaast kun je typografische opties instellen op elementniveau en voor elk blok.<\/p>\n
De Font Library<\/h3>\n
Het scherm Edit Styles <\/strong>> Typography <\/strong>toont de lettertypebibliotheek, de Font Library, hoewel deze niet expliciet deze naam heeft in de Site Editor. Hiermee kun je op een paar manieren omgaan met lettertypen en lettertypen:<\/p>\n\n- Je kunt eigen lettertypes uploaden en beheren.<\/li>\n
- Er is een optie om Google Fonts rechtstreeks binnen WordPress te gebruiken.<\/li>\n
- Lettertypeverzamelingen<\/a> maken met behulp van PHP.<\/li>\n<\/ul>\n
Klik op het pictogram Manage Fonts <\/strong>om toegang te krijgen tot de lettertypenbibliotheek in de sectie Typography in de zijbalk van de Site Editor:<\/p>\n![\"Het](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/manage-fonts-icon.png\")
Het pictogram Manage fonts<\/strong> in de WordPress Site Editor.<\/figcaption><\/figure>\nHier zie je op het tabblad Library <\/b>de huidige geregistreerde lettertypen voor je thema en wordt aangegeven welke actief zijn:<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-library-dialog.png\")
De interface van de WordPress lettertypebibliotheek.<\/figcaption><\/figure>\nDoor er doorheen te klikken kun je individuele lettertypes activeren of deactiveren:<\/p>\n![\"Het](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/active-fonts.png\")
De huidige actieve lettertypen in de lettertypenbibliotheek van de Site Editor.<\/figcaption><\/figure>\nOp het tabblad Upload <\/b>gebruik je een drag-and-drop uploader dialoogvenster om je eigen lettertypen te installeren in TTF, WOFF, WOFF2 en OTF formats.<\/p>\n
Het tabblad Install Fonts <\/strong>maakt verbinding met Google Fonts, zodat je die bibliotheek binnen je thema kunt gebruiken. Merk op dat deze aanpak lettertypen downloadt en aflevert vanaf je eigen site, in plaats van een Google CDN<\/a>:<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/google-fonts-library.png\")
De Google Fonts bibliotheek in de WordPress Site Editor.<\/figcaption><\/figure>\nSelecteer hier de lettertypen die je wilt installeren uit de uitgebreide lijst en klik vervolgens op de knop Install<\/strong>. Zodra de succesmelding verschijnt, worden deze lettertypen weergegeven op het tabblad Library<\/strong>:<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/installed-fonts.png\")
De ge\u00efnstalleerde lettertypen voor een WordPress instantie.<\/figcaption><\/figure>\nHiermee kun je de lettertypen gebruiken zoals je dat met alle andere op je site zou doen. Nu moet je ze nog aanpassen aan je behoeften.<\/p>\n
Het Style Book<\/h3>\n
Een van de gevaren van het kiezen en instellen van lettertypes is dat je niet weet hoe ze eruit zullen zien in combinatie met kleurenschema’s, layouts en opmaakpatronen. Het Style Book is van onschatbare waarde, omdat je hiermee een voorbeeld van je typografie-instellingen voor verschillende elementen kunt bekijken.<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/style-book.png\")
Het Site Editor Style Book.<\/figcaption><\/figure>\nAls je het oog-icoontje kiest, wordt het Style Book geopend en er zijn vijf tabbladen:<\/p>\n
\n- Text<\/strong>: Ga hierheen om te werken met alinea’s, koppen, lijsten en andere elementen die gericht zijn op tekst.<\/li>\n
- Media<\/strong>: Hier kun je afbeeldingen, video en audio design presentaties aanpassen.<\/li>\n
- Design<\/strong>: Dit onderdeel verzamelt structurele ontwerpfacetten, zoals kolommen, scheidingstekens en knoppen.<\/li>\n
- Widgets<\/strong>: Er zijn twee elementen in dit scherm: dynamische generaties, zoals lijsten met archieven en commentaren. Je werkt hier ook met de zoekbalk, pictogrammen voor sociale media en tagclouds.<\/li>\n
- Theme<\/strong>: Dit richt zich op de header-elementen van je site, zoals de titel, tagline, navigatie en het logo.<\/li>\n<\/ul>\n
Als je in het Style Book op een element klikt, heb je in de zijbalk verschillende opties om mee te spelen. Je werkt hier eerder met de typografie-instellingen voor elk blok dan met specifieke elementen:<\/p>\n![\"Het](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/style-book-editing.png\")
Je hebt alle mogelijkheden om de typografie rechtstreeks vanuit het Style Book te bewerken.<\/figcaption><\/figure>\nJe kunt op dezelfde schermen terechtkomen via het gedeelte Styles <\/strong>> Blocks<\/strong> op de startpagina van de Site Editor. Met de opties die je ziet, kun je de typografie (en meer) van elk blok tot in detail aanpassen.<\/p>\nTypografie-opties aanpassen in de Site Editor<\/h3>\n
Voor alle blokken en elementen heb je dezelfde kernopties tot je beschikking. Hier volgt een overzicht van elke optie in het paneel.<\/p>\n
Lettertype en -grootte<\/h4>\n
Het vervolgkeuzemenu Typography <\/b>is eenvoudig: kies het lettertype dat je wilt toepassen op het specifieke element of blok:<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-drop-down.png\")
Een lettertype kiezen uit de beschikbare selectie op het tabblad Typography.<\/figcaption><\/figure>\nDe presets voor Size <\/b>hebben de minste aanpassingsmogelijkheden binnen de Site Editor. Je kiest een grootte uit een reeks tussen Small en XXL:<\/p>\n![\"Het](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/size-presets.png\")
WordPress biedt presets voor lettergrootte binnen de Site Editor.<\/figcaption><\/figure>\nAls je theme.json<\/code> bewerkt, kun je deze vooringestelde waarden wijzigen – maar dat kan niet vanuit de Site Editor. De knop Custom Size<\/strong> <\/b>geeft je een manier om een aangepaste grootte in te stellen met behulp van een reeks grootte-eenheden:<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-size-custom.png\")
Een aangepaste lettergrootte en -eenheid kiezen.<\/figcaption><\/figure>\nEr zijn meer manieren om typografie aan te passen in de Site Editor, waaronder methoden waarvoor je meestal CSS gebruikt.<\/p>\n
Uiterlijk, regelhoogte en letterafstand<\/h4>\n
Het vervolgkeuzemenu Appearance <\/b>lijkt eenvoudig: kies een lettertypegewicht uit een uitgebreide lijst en het wordt toegepast op je tekst. Maar vaak heb je niet alle beschikbare lettertypen voor elk gewicht.<\/p>\n![\"Het](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/appearance-drop-down.png\")
Het Appearance uitklapmenu in de WordPress Site Editor.<\/figcaption><\/figure>\nUit onze tests blijkt dat WordPress deze lijst niet filtert om alleen beschikbare lettertypegewichten te tonen. Bovendien past het een “dichtstbijzijnde overeenkomst” toe als je een gewicht selecteert zonder bijpassend lettertype. We gebruiken bijvoorbeeld Cardo Normal, Cardo Bold en Cardo Bold Italic voor onze voorbeeldsite. Als je Semi Bold, Bold, Extra Bold of Black kiest, wordt alleen Cardo Bold gebruikt:<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/bold-appearance.gif\")
Het uiterlijk van tekst wijzigen binnen de WordPress Site Editor.<\/figcaption><\/figure>\nLine Height maakt geen gebruik van presets en brengt je lettertypekeuze, uiterlijk en grootte in balans. Deze waarde geeft meer ruimte tussen elke regel en is vaak een praktische implementatie als tekst er opgepropt uitziet:<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/line-height.gif\")
De regelhoogte wijzigen in de WordPress Site Editor.<\/figcaption><\/figure>\nDe spati\u00ebring van letters is vergelijkbaar en volgt de CSS gewoonte om zichzelf toe te voegen aan de natuurlijke spati\u00ebring die aanwezig is:<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/letter-spacing.png\")
Je kunt de letterafstand te ver opdrijven om nog bruikbaar te zijn.<\/figcaption><\/figure>\nNet als bij de aangepaste lettergrootte kun je verschillende maateenheden kiezen. Het kiezen van een relatieve waarde heeft hier vaak de voorkeur. WordPress stelt de letterafstand in op een CSS standaardwaarde van “normaal” Dit laat de browser de waarde kiezen en in onze ervaring is dit ideaal.<\/p>\n
Het is gebruikelijk om kleine positieve spati\u00ebringswaarden te gebruiken – vaak niet meer dan 0,12rem\/em – en nauwelijks negatieve spati\u00ebring.<\/p>\n
Met de laatste keuzemogelijkheid – hoofdletter – kun je ervoor kiezen om tekst hoofdletter, kleine letter of zinsletter te maken. Je kunt ook de hoofdletter verwijderen. Dit is geweldig voor consistentie als het gaat om lettertypes, omdat je niet specifiek een bepaald hoofdlettergebruik hoeft te gebruiken bij het maken van inhoud.<\/p>\n
Hoe je theme.json gebruikt om de typografie van je WordPress thema te defini\u00ebren<\/h2>\n
De Site Editor is geweldig voor sitegebruikers zonder technische kennis. Met het bestand theme.json<\/code> zorg je ervoor dat de Site Editor gebruikers geeft wat ze nodig hebben om hun sites aan te passen. Het is het configuratiebestand dat de basis vormt voor de ontwikkeling van je thema.<\/p>\nWe gaan niet in op de structuur en opmaak van het hele theme.json <\/code>bestand, maar we bekijken wel hoe je typografie kunt defini\u00ebren, instellen en toepassen.<\/p>\nDe structuur van theme.json begrijpen en globale instellingen defini\u00ebren<\/h3>\n
Je gebruikt JSON om alle elementen binnen theme.json<\/code> te defini\u00ebren, inclusief typografie. Het typography<\/code> element wordt genest onder het settings<\/code> object in dat bestand. Van daaruit kun je andere elementen, properties en objecten nesten om de typografie van je site op te bouwen:<\/p>\n{\n \"version\": 3,\n \"settings\": {\n \"typography\": {\n \"fontFamilies\": [\n {\n \"fontFamily\": \"-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif\",\n \"slug\": \"system-font\",\n \"name\": \"System Font\"\n }\n ],\n \"fontSizes\": [\n {\n \"slug\": \"small\",\n \"size\": \"13px\",\n \"name\": \"Small\"\n },\n {\n \"slug\": \"medium\",\n \"size\": \"20px\",\n \"name\": \"Medium\"\n }\n ]\n }\n }\n}<\/code><\/pre>\nAl deze elementen volgen een vergelijkbaar patroon. De standaardinstellingen – en het gemakkelijkst te begrijpen – zijn de globale instellingen. Deze worden op een eenvoudige manier genest, maar je kunt ook typografie-instellingen defini\u00ebren voor individuele blokken:<\/p>\n
\"styles\": {\n \"blocks\": {\n \"core\/paragraph\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--primary)\",\n \"fontSize\": \"var(--wp--preset--font-size--medium)\",\n \"lineHeight\": \"1.5\"\n }\n },\n \"core\/heading\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--secondary)\",\n \"fontWeight\": \"700\"\n }\n }\n }\n}<\/code><\/pre>\nHiervoor gebruik je de property blocks<\/code> en een specifieke namespace voor elk blok dat je wilt targeten. Hoewel het twee extra lagen toevoegt, is er geen alternatief voor deze aanpak. Je hebt hierbij een heleboel properties om mee te spelen.<\/p>\nLettertypen registreren<\/h3>\n
Voor typografie heb je dezelfde mate van aanpassing<\/a> als in de Site Editor interface – in sommige gevallen meer. Op basisniveau nestel je je font stack in de property fontFamilies<\/code> en geef je het een slug en naam:<\/p>\n\nfontFamily<\/code> komt overeen met de CSS waarde font-family<\/code> en is de stack met lettertypen die je in je thema wilt gebruiken.<\/li>\nname<\/code> is wat je ziet in de Site Editor wanneer je een lettertype selecteert, dus het zal menselijk leesbaar zijn.<\/li>\nslug<\/code> voegt toe aan een custom CSS property voor verder gebruik.<\/li>\n<\/ul>\nVoor systeemlettertypen is dit eenvoudig:<\/p>\n
\u2026\n \"typography\": {\n \"fontFamilies\": [\n {\n \"name\": \"Primary\",\n \"slug\": \"primary\",\n \"fontFamily\": \"Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif\"\n },\n {\n \"name\": \"Secondary\",\n \"slug\": \"secondary\",\n \"fontFamily\": \"system-ui, sans-serif\"\n }<\/code><\/pre>\nVoor het registreren van custom webfonts moet je de property fontFace<\/code> gebruiken en enkele attributen defini\u00ebren:<\/p>\n\u2026\n\"name\": \"Secondary\",\n\"slug\": \"secondary\",\n\"fontFamily\": \"'Open Sans', sans-serif\",\n \"fontFace\": [\n {\n \"fontFamily\": \"Open Sans\",\n \"fontWeight\": \"300 800\", \/\/ This is a range of font weight values.\n \"fontStyle\": \"normal\", \/\/ This has to be a valid CSS font-style value.\n \"fontStretch\": \"normal\", \/\/ This also needs to be a valid CSS font-stretch value.\n \"src\": [ \"file:.\/assets\/fonts\/open-sans.woff2\" ] \/\/ This is an array of URLs for custom fonts, and can support multiple formats.\n },\n\u2026<\/code><\/pre>\nZodra je lettertypen hebt geregistreerd, selecteer je ze uit de verschillende vervolgkeuzemenu’s in de Site Editor.<\/p>\n
Er zijn een paar manieren waarop je lettertypen voor je thema kunt registreren. Je hebt de font library binnen de interface van de Site Editor, de typische PHP registratie<\/a> en de plugin Create Block Theme<\/a>:<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/create-block-theme.png\")
De Create Block Theme header afbeelding van WordPress.org.<\/figcaption><\/figure>\nDit is een boilerplate voor het bouwen van een thema, maar je kunt er ook typografie mee registreren en defini\u00ebren. Zodra je lettertypen hebt geregistreerd op een manier die je prettig vindt (wij raden de lettertypenbibliotheek aan), kun je beginnen met de grootte.<\/p>\n
Lettergrootte en presets instellen in theme.json<\/h3>\n
Een andere kerntaak bij typografie is het instellen van lettergrootte. Hiervoor wordt de property fontSizes<\/code> gebruikt en kun je presets defini\u00ebren voor de Site Editor:<\/p>\n\"settings\": {\n \"typography\": {\n \"fontSizes\": [\n {\n \"slug\": \"small\",\n \"size\": \"12px\",\n \"name\": \"Small\"\n },\n {\n \"slug\": \"x-large\",\n \"size\": \"32px\",\n \"name\": \"Extra Large\"\n }\n ]\n }\n}<\/code><\/pre>\nNet als bij andere typografie-instellingen genereert WordPress een custom CSS property voor elke preset met behulp van de slug die je opgeeft:<\/p>\n
body {\n--wp--preset--font-size--small: 12px;\n--wp--preset--font-size--x-large: 32px;\n}<\/code><\/pre>\nWordPress schakelt vloeiende typografie standaard uit, maar je kunt dit inschakelen met behulp van booleaanse waarden. Het is een optie die je op globaal niveau kunt instellen..<\/p>\n
{\n \"version\": 2,\n \"settings\": {\n \"typography\": {\n \"fluid\": true\n }\n }\n}<\/code><\/pre>\n…of voor elke preset en grootte die je definieert:<\/p>\n
{\n \"name\": \"Medium\",\n \"size\": \"1.25rem\",\n \"slug\": \"md\",\n \"fluid\": {\n \"min\": \"1rem\",\n \"max\": \"1.5rem\"\n }\n},<\/code><\/pre>\nMet de waarden min<\/code> en max<\/code> kun je het schaalbaarheidsbereik bepalen voor elke lettergrootte die je definieert.<\/p>\nGeavanceerde typografische features implementeren<\/h3>\n
De theme.json<\/code> biedt een volledige verzameling opties, vergelijkbaar met wat je kunt vinden in de Site Editor. Hiermee kun je de typografie op je site aanpassen aan een reeks standaardinstellingen die passen bij je thema:<\/p>\n\"styles\": {\n \"typography\": {\n \"letterSpacing\": \"0.02em\",\n \"textTransform\": \"uppercase\",\n \"textDecoration\": \"underline\",\n \"lineHeight\": \"1.55rem\",\n \"fontStyle\": \"normal\"\n }\n}<\/code><\/pre>\nJe kunt ervoor kiezen om deze opties in of uit te schakelen<\/a>. Elke optie heeft een booleaanse waarde, wat betekent dat je ook enkele aanpassingsopties hebt voor de Site Editor. Er zijn een paar aanpassingen die je kunt maken die verder gaan dan de Site Editor:<\/p>\n\ncustomFontSize<\/code> staat standaard aan en laat gebruikers hun eigen lettergrootte invoeren – maar je kunt het uitschakelen als je de beschikbare opties strikt wilt controleren.<\/li>\ndropCap<\/code> staat standaard op false, maar als je dit inschakelt, heeft de gebruiker de optie om drop caps in te schakelen voor de beginletters van alineablokken.<\/li>\ntextColumns<\/code> schakelt een “kolommen” optie in voor elke tekst binnen een blok, en deze is standaard uitgeschakeld.<\/li>\nwritingMode<\/code> opties om de tekststand in de Site Editor te wijzigen. Je kunt gebruikers de keuze geven tussen horizontale en verticale tekst.<\/li>\n<\/ul>\nDe reikwijdte van theme.json<\/code> betekent dat je daar eerst aan moet werken, vooral als je een thema bouwt. Met de opties in de Site Editor kunnen jij of je gebruikers de typografie van WordPress verfijnen.<\/p>\nTypografie implementeren met theme.json: een praktisch voorbeeld<\/h2>\n
FSE maakt ontwerpen en ontwikkelen met WordPress eenvoudiger dan ooit tevoren. Bovendien is een deel van het algemene proces van het selecteren en implementeren van die lettertypes eenvoudiger geworden. Een deel hiervan is te wijten aan ontwerptrends, maar de tools bestaan om gaten te dichten waar je geen grafisch ontwerper beschikbaar hebt om te helpen.<\/p>\n
We kunnen beginnen met je belangrijkste lettertypeselecties.<\/p>\n
<\/div><\/kinsta-auto-toc>\n1. Combineer complementaire lettertypes<\/h3>\n
Er is een reden waarom er zoveel geschreven wordt over het kiezen van lettertypen<\/a> en lettertypen. Het kan namelijk een lastige taak zijn. Je moet bijvoorbeeld rekening houden met de branding van de site, het doel ervan en wat je wilt overbrengen.<\/p>\nMaar dankzij de huidige ontwerptrends is hier veel minder werk aan. Dit komt omdat je bodytekst systeemlettertypen kan gebruiken – in het bijzonder het primaire lettertype van het besturingssysteem (OS). De enige taak voor jou is om iets te kiezen dat ernaast werkt.<\/p>\n
Dit is geen handleiding over het combineren van lettertypes, maar we hebben wel wat tips voor je:<\/p>\n
\n- OS lettertypes voor de hoofdtekst zijn meestal schreefloos. Dit betekent dat je op zoek moet gaan naar een schreefloos lettertype of een ander schreefloos lettertype dat er anders uitziet, uniek is en opvalt.<\/li>\n
- Houd het simpel en overweeg misschien om alleen het OS lettertype te gebruiken als dat past bij het ontwerp.<\/li>\n
- Test verschillende combinaties uit, zodat je een gevoel krijgt voor welke lettertypes samen werken (en welke niet).<\/li>\n<\/ul>\n
Een goed paar voor een stack systeemlettertypen is Playfair Display<\/a>, een serif Google Font<\/a>:<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/playfair-display.png\")
De Google Fonts voorbeeldpagina voor Playfair Display.<\/figcaption><\/figure>\nBij een lettertypepaar moet je rekening houden met hun grootte, niet alleen op de pagina, maar ook ten opzichte van elkaar.<\/p>\n
2. Vind de juiste absolute en relatieve grootte<\/h3>\n
Het kiezen van de grootte van lettertypen is ook cruciaal, omdat de verkeerde absolute maten je UX\/UI kunnen verpesten. Dit is ook een gebied waar je je misschien beter aan de standaardwaarden kunt houden. We moedigen je echter aan om hier te experimenteren, omdat elke combinatie zijn eigen “ruimte” heeft voor de lettertypen.<\/p>\n
Typescale<\/a> is een uitstekend hulpmiddel dat je kan helpen om de juiste WordPress typografie te maken, wat je ook nodig hebt:<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/typescale-site.png\")
De website van Typescale.<\/figcaption><\/figure>\nEen van de beste aspecten van de tool zijn de schaalkeuzes. Het doet in wezen veel werk voor je bij het kiezen van complementaire lettergroottes. We kiezen hier een grote terts met een factor 1,2 en een basisgrootte van 16px:<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-sizing-scale.png\")
De opties voor het schalen van lettertypes binnen Typeface.<\/figcaption><\/figure>\nIn het middelste paneel zie je de resulterende groottes voor elke kop en alinea en kun je kiezen uit een aantal maateenheden. Merk op dat je met Typescale ook de letterafstand, regelhoogte, lettertypegewicht en meer kunt wijzigen: allemaal aanpasbaar binnen theme.json<\/code>.<\/p>\n3. Pas standaardinstellingen toe in theme.json<\/h3>\n
Als je eenmaal de juiste lettertypen en afmetingen hebt, kun je ze implementeren in je theme.json<\/code> bestand. Hier is een voorbeeld van hoe een typisch theme.json<\/code> bestand eruit ziet:<\/p>\n{\n \"version\": 3,\n \"settings\": {\n \"typography\": {\n \"fontFamilies\": [\n {\n \"fontFamily\": \"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif\",\n \"slug\": \"ubuntu-sans\",\n \"name\": \"Ubuntu Sans\"\n },\n {\n \"fontFamily\": \"\"Playfair Display\", serif\",\n \"slug\": \"playfair\",\n \"name\": \"Playfair Display\"\n }\n ],\n \"fontSizes\": [\n {\n \"slug\": \"small\",\n \"size\": \"13px\",\n \"name\": \"Small\"\n },\n {\n \"slug\": \"medium\",\n \"size\": \"16px\",\n \"name\": \"Medium\"\n },\n {\n \"slug\": \"large\",\n \"size\": \"20px\",\n \"name\": \"Large\"\n },\n {\n \"slug\": \"x-large\",\n \"size\": \"25px\",\n \"name\": \"Extra Large\"\n },\n {\n \"slug\": \"huge\",\n \"size\": \"31px\",\n \"name\": \"Huge\"\n }\n ]\n }\n },\n \"styles\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--system)\",\n \"fontSize\": \"var(--wp--preset--font-size--medium)\",\n \"lineHeight\": \"1.8\"\n },\n \"blocks\": {\n \"core\/paragraph\": {\n \"typography\": {\n \"fontSize\": \"var(--wp--preset--font-size--medium)\"\n }\n },\n \"core\/heading\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--playfair)\",\n \"fontWeight\": \"700\"\n }\n },\n \"core\/post-title\": {\n \"typography\": {\n \"fontSize\": \"var(--wp--preset--font-size--huge)\"\n }\n }\n }\n }\n}<\/code><\/pre>\nJe kunt deze lettertypes ook toepassen op elk blok, en er zelfs over nadenken om elke kop op een unieke manier te stylen. Zorg voor een consistent en hi\u00ebrarchisch WordPress typografiesysteem dat de basis vormt van het ontwerp van je thema. Het zorgt voor een samenhangend uiterlijk op je hele site, terwijl de Site Editor je meer flexibiliteit en aanpassingsmogelijkheden biedt.<\/p>\n
De rol van Kinsta in de ontwikkelingsworkflow van je WordPress thema<\/h2>\n
De krachtige hosting van Kinsta biedt genoeg om je te helpen een effici\u00ebnte en snelle website te maken. Het biedt echter ook robuuste ontwikkeltools, waaronder DevKinsta<\/a>, een lokale ontwikkelomgeving die draait op Docker containers<\/a>.<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/devkinsta-home.png\")
Het DevKinsta logo.<\/figcaption><\/figure>\nHet is belangrijk om ervoor te zorgen dat je WordPress typografie werkt voordat je deze live zet. Dit is waar Kinsta’s testomgevingen essentieel zullen zijn. Vooral Selective Push<\/a> zul je veel gebruiken. Hiermee kun je specifieke bestanden en mappen pushen – elke asset die je maar wilt – in plaats van alles in \u00e9\u00e9n keer.<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/selective-push.png\")
Kinsta’s Selective Push tool.<\/figcaption><\/figure>\n