Een revolutie in WordPress: typografie met Full Site Editing en theme.json

Woorden vormen de ruggengraat van het internet, ondanks de wildgroei aan andere soorten media. Maar dit betekent ook dat de lettertypen die je kiest voor je site een cruciaal aspect zijn van je layout en ontwerp.

WordPress typografie kan een bepaalde stemming oproepen, helpen bij branding en nog veel meer. Full Site Editing (FSE) in WordPress legt het aanpassen van deze typografie in de handen van gebruikers – en het theme.json bestand helpt ontwikkelaars om WordPress thema’s te bouwen die hier gebruik van maken.

Dit artikel onderzoekt WordPress typografie voor zowel FSE als theme.json. 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.

Typografie op het web: een korte geschiedenis

Als je terugkijkt naar de eerste webontwerpen, 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.

Een “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.

Deze primitieve selectie is consistent en betrouwbaar, maar mist flexibiliteit. Diensten zoals Google Fonts en Adobe Fonts gebruiken het WOFF bestandsformat om je toegang te geven tot een bibliotheek van duizenden lettertypes, met een eenvoudig insluitproces.

Dit 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), afhankelijkheid van externe diensten om het meest cruciale element op je site weer te geven en privacyproblemen.

Dit brengt veel webdesigners ertoe om af te zien van lettertypebibliotheken en het gebruik van systeemlettertypen 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.

WordPress en typografie

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 van WordPress allemaal lettertypen gebruikt die een balans vinden tussen esthetiek en functionaliteit.

De 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) en Montserrat en Merriweather (voor Twenty Sixteen).

Om deze typografische “cirkel van het leven” te laten zien, gebruikt Twenty Sixteen Helvetica en Georgia als terugvalopties. Het standaardthema van Twenty Ten gebruikt alleen Helvetica, Arial en Georgia:

Hoewel 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.

Een korte inleiding over Full Site Editing en theme.json

FSE en theme.json 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.

Dit verenigt de ontwerpopties van je site op een aantal manieren:

• Je gebruikt de bewerkingsaanpak van blokken voor de hele site, niet alleen voor je inhoud.
• Een templatebibliotheek maakt deel uit van de setup, dus je kunt deze bewerken met dezelfde tools als je content.
• Styling gebeurt ook binnen de Site Editor en biedt een globaal instellingenschema.
• Voor het bewerken van sites is geen code nodig om de beschikbare opties te implementeren. Dit overbrugt de kloof tussen ontwikkeling en eindgebruikersontwerp.

Je kunt het theme.json 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.

Elke instelling gebruikt een sleutel/waarde-paar van option:value, en je kunt dit op een aantal manieren implementeren:

• Globale kleurenpaletten definiëren.
• Lettertypefamilies en -groottes instellen.
• Blokspecifieke stijlen configureren.
• Voorkeuren voor spatiëring en layout beheren.

Door gebruik te maken van theme.json kun je meer consistente en aanpasbare thema’s maken zonder dat je custom CSS nodig hebt (hoewel dit ook mogelijk is). De aanpasbaarheid en flexibiliteit van theme.json 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.

Typografie instellen in de WordPress Site Editor

Als je weet hoe je de Block Editor moet gebruiken, kun je ook de Site Editor gebruiken. Navigeer binnen WordPress naar het scherm Appearance > Editor. Dit toont het beginscherm van de Site Editor:

Het Styles scherm in de linker navigatie geeft je een aantal globale ontwerpopties waaronder typografische wijzigingen:

Voor de meeste toepassingen bieden individuele instellingen voor verschillende typografie-aspecten meer waarde. Bovenaan het Styles scherm staan twee kleine icoontjes die verdere opties openen: het Style Book en het Potlood icoon Edit Styles.

Daarnaast kun je typografische opties instellen op elementniveau en voor elk blok.

De Font Library

Het scherm Edit Styles > Typography 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:

• Je kunt eigen lettertypes uploaden en beheren.
• Er is een optie om Google Fonts rechtstreeks binnen WordPress te gebruiken.
• Lettertypeverzamelingen maken met behulp van PHP.

Klik op het pictogram Manage Fonts om toegang te krijgen tot de lettertypenbibliotheek in de sectie Typography in de zijbalk van de Site Editor:

Hier zie je op het tabblad Library de huidige geregistreerde lettertypen voor je thema en wordt aangegeven welke actief zijn:

Door er doorheen te klikken kun je individuele lettertypes activeren of deactiveren:

Op het tabblad Upload gebruik je een drag-and-drop uploader dialoogvenster om je eigen lettertypen te installeren in TTF, WOFF, WOFF2 en OTF formats.

Het tabblad Install Fonts 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:

Selecteer hier de lettertypen die je wilt installeren uit de uitgebreide lijst en klik vervolgens op de knop Install. Zodra de succesmelding verschijnt, worden deze lettertypen weergegeven op het tabblad Library:

Hiermee 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.

Het Style Book

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.

Als je het oog-icoontje kiest, wordt het Style Book geopend en er zijn vijf tabbladen:

• Text: Ga hierheen om te werken met alinea’s, koppen, lijsten en andere elementen die gericht zijn op tekst.
• Media: Hier kun je afbeeldingen, video en audio design presentaties aanpassen.
• Design: Dit onderdeel verzamelt structurele ontwerpfacetten, zoals kolommen, scheidingstekens en knoppen.
• Widgets: 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.
• Theme: Dit richt zich op de header-elementen van je site, zoals de titel, tagline, navigatie en het logo.

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:

Je kunt op dezelfde schermen terechtkomen via het gedeelte Styles > Blocks 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.

Typografie-opties aanpassen in de Site Editor

Voor alle blokken en elementen heb je dezelfde kernopties tot je beschikking. Hier volgt een overzicht van elke optie in het paneel.

Lettertype en -grootte

Het vervolgkeuzemenu Typography is eenvoudig: kies het lettertype dat je wilt toepassen op het specifieke element of blok:

De presets voor Size hebben de minste aanpassingsmogelijkheden binnen de Site Editor. Je kiest een grootte uit een reeks tussen Small en XXL:

Als je theme.json bewerkt, kun je deze vooringestelde waarden wijzigen – maar dat kan niet vanuit de Site Editor. De knop Custom Size geeft je een manier om een aangepaste grootte in te stellen met behulp van een reeks grootte-eenheden:

Er zijn meer manieren om typografie aan te passen in de Site Editor, waaronder methoden waarvoor je meestal CSS gebruikt.

Uiterlijk, regelhoogte en letterafstand

Het vervolgkeuzemenu Appearance 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.

Uit 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:

Line 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:

De spatiëring van letters is vergelijkbaar en volgt de CSS gewoonte om zichzelf toe te voegen aan de natuurlijke spatiëring die aanwezig is:

Net 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.

Het is gebruikelijk om kleine positieve spatiëringswaarden te gebruiken – vaak niet meer dan 0,12rem/em – en nauwelijks negatieve spatiëring.

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.

Hoe je theme.json gebruikt om de typografie van je WordPress thema te definiëren

De Site Editor is geweldig voor sitegebruikers zonder technische kennis. Met het bestand theme.json 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.

We gaan niet in op de structuur en opmaak van het hele theme.json bestand, maar we bekijken wel hoe je typografie kunt definiëren, instellen en toepassen.

De structuur van theme.json begrijpen en globale instellingen definiëren

Je gebruikt JSON om alle elementen binnen theme.json te definiëren, inclusief typografie. Het typography element wordt genest onder het settings object in dat bestand. Van daaruit kun je andere elementen, properties en objecten nesten om de typografie van je site op te bouwen:

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif",
          "slug": "system-font",
          "name": "System Font"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "13px",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "20px",
          "name": "Medium"
        }
      ]
    }
  }
}

Al 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ëren voor individuele blokken:

"styles": {
  "blocks": {
    "core/paragraph": {
      "typography": {
        "fontFamily": "var(--wp--preset--font-family--primary)",
        "fontSize": "var(--wp--preset--font-size--medium)",
        "lineHeight": "1.5"
      }
    },
    "core/heading": {
      "typography": {
        "fontFamily": "var(--wp--preset--font-family--secondary)",
        "fontWeight": "700"
      }
    }
  }
}

Hiervoor gebruik je de property blocks 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.

Lettertypen registreren

Voor typografie heb je dezelfde mate van aanpassing als in de Site Editor interface – in sommige gevallen meer. Op basisniveau nestel je je font stack in de property fontFamilies en geef je het een slug en naam:

• fontFamily komt overeen met de CSS waarde font-family en is de stack met lettertypen die je in je thema wilt gebruiken.
• name is wat je ziet in de Site Editor wanneer je een lettertype selecteert, dus het zal menselijk leesbaar zijn.
• slug voegt toe aan een custom CSS property voor verder gebruik.

Voor systeemlettertypen is dit eenvoudig:

…
  "typography": {
    "fontFamilies": [
    {
      "name": "Primary",
      "slug": "primary",
      "fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
    },
    {
      "name": "Secondary",
      "slug": "secondary",
      "fontFamily": "system-ui, sans-serif"
      }

Voor het registreren van custom webfonts moet je de property fontFace gebruiken en enkele attributen definiëren:

…
"name": "Secondary",
"slug": "secondary",
"fontFamily": "'Open Sans', sans-serif",
  "fontFace": [
    {
      "fontFamily": "Open Sans",
      "fontWeight": "300 800", // This is a range of font weight values.
      "fontStyle": "normal", // This has to be a valid CSS font-style value.
      "fontStretch": "normal", // This also needs to be a valid CSS font-stretch value.
      "src": [ "file:./assets/fonts/open-sans.woff2" ] // This is an array of URLs for custom fonts, and can support multiple formats.
    },
…

Zodra je lettertypen hebt geregistreerd, selecteer je ze uit de verschillende vervolgkeuzemenu’s in de Site Editor.

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 en de plugin Create Block Theme:

Dit is een boilerplate voor het bouwen van een thema, maar je kunt er ook typografie mee registreren en definiëren. Zodra je lettertypen hebt geregistreerd op een manier die je prettig vindt (wij raden de lettertypenbibliotheek aan), kun je beginnen met de grootte.

Lettergrootte en presets instellen in theme.json

Een andere kerntaak bij typografie is het instellen van lettergrootte. Hiervoor wordt de property fontSizes gebruikt en kun je presets definiëren voor de Site Editor:

"settings": {
  "typography": {
    "fontSizes": [
      {
        "slug": "small",
        "size": "12px",
        "name": "Small"
      },
      {
        "slug": "x-large",
        "size": "32px",
        "name": "Extra Large"
      }
    ]
  }
}

Net als bij andere typografie-instellingen genereert WordPress een custom CSS property voor elke preset met behulp van de slug die je opgeeft:

body {
--wp--preset--font-size--small: 12px;
--wp--preset--font-size--x-large: 32px;
}

WordPress 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..

{
  "version": 2,
    "settings": {
      "typography": {
        "fluid": true
      }
    }
}

…of voor elke preset en grootte die je definieert:

{
  "name": "Medium",
  "size": "1.25rem",
  "slug": "md",
  "fluid": {
    "min": "1rem",
    "max": "1.5rem"
  }
},

Met de waarden min en max kun je het schaalbaarheidsbereik bepalen voor elke lettergrootte die je definieert.

Geavanceerde typografische features implementeren

De theme.json 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:

"styles": {
  "typography": {
    "letterSpacing": "0.02em",
    "textTransform": "uppercase",
    "textDecoration": "underline",
    "lineHeight": "1.55rem",
    "fontStyle": "normal"
  }
}

Je kunt ervoor kiezen om deze opties in of uit te schakelen. 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:

• customFontSize staat standaard aan en laat gebruikers hun eigen lettergrootte invoeren – maar je kunt het uitschakelen als je de beschikbare opties strikt wilt controleren.
• dropCap 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.
• textColumns schakelt een “kolommen” optie in voor elke tekst binnen een blok, en deze is standaard uitgeschakeld.
• writingMode opties om de tekststand in de Site Editor te wijzigen. Je kunt gebruikers de keuze geven tussen horizontale en verticale tekst.

De reikwijdte van theme.json 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.

Typografie implementeren met theme.json: een praktisch voorbeeld

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.

We kunnen beginnen met je belangrijkste lettertypeselecties.

1. Combineer complementaire lettertypes

Er is een reden waarom er zoveel geschreven wordt over het kiezen van lettertypen 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.

Maar 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.

Dit is geen handleiding over het combineren van lettertypes, maar we hebben wel wat tips voor je:

• 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.
• Houd het simpel en overweeg misschien om alleen het OS lettertype te gebruiken als dat past bij het ontwerp.
• Test verschillende combinaties uit, zodat je een gevoel krijgt voor welke lettertypes samen werken (en welke niet).

Een goed paar voor een stack systeemlettertypen is Playfair Display, een serif Google Font:

Bij een lettertypepaar moet je rekening houden met hun grootte, niet alleen op de pagina, maar ook ten opzichte van elkaar.

2. Vind de juiste absolute en relatieve grootte

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.

Typescale is een uitstekend hulpmiddel dat je kan helpen om de juiste WordPress typografie te maken, wat je ook nodig hebt:

Een 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:

In 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.

3. Pas standaardinstellingen toe in theme.json

Als je eenmaal de juiste lettertypen en afmetingen hebt, kun je ze implementeren in je theme.json bestand. Hier is een voorbeeld van hoe een typisch theme.json bestand eruit ziet:

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif",
          "slug": "ubuntu-sans",
          "name": "Ubuntu Sans"
        },
        {
          "fontFamily": ""Playfair Display", serif",
          "slug": "playfair",
          "name": "Playfair Display"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "13px",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "16px",
          "name": "Medium"
        },
        {
          "slug": "large",
          "size": "20px",
          "name": "Large"
        },
        {
          "slug": "x-large",
          "size": "25px",
          "name": "Extra Large"
        },
        {
          "slug": "huge",
          "size": "31px",
          "name": "Huge"
        }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--system)",
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.8"
    },
    "blocks": {
      "core/paragraph": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        }
      },
      "core/heading": {
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--playfair)",
          "fontWeight": "700"
        }
      },
      "core/post-title": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--huge)"
        }
      }
    }
  }
}

Je 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ërarchisch 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.

De rol van Kinsta in de ontwikkelingsworkflow van je WordPress thema

De krachtige hosting van Kinsta biedt genoeg om je te helpen een efficiënte en snelle website te maken. Het biedt echter ook robuuste ontwikkeltools, waaronder DevKinsta, een lokale ontwikkelomgeving die draait op Docker containers.

Het 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 zul je veel gebruiken. Hiermee kun je specifieke bestanden en mappen pushen – elke asset die je maar wilt – in plaats van alles in één keer.

Op deze manier kun je discrete ontwerpwijzigingen doorvoeren door afzonderlijke bestanden te pushen (zoals theme.json). Daarnaast kun je het risico minimaliseren dat je delen van het ontwerp van je site beschadigt waar je tevreden over bent en kun je de typografie van je site vaker incrementeel bijwerken.

Samenvatting

FSE wordt volwassen en theme.json staat centraal in de hele benadering van WordPress bewerken. Typografie is een kritieke factor en WordPress biedt tools op ontwikkelaarsniveau en toegang tot elementen waarvoor voorheen een grondige kennis van CSS en PHP nodig was.

Met de intuïtieve interface van de Site Editor en het aanpassingsvermogen van theme.json kun je typografie creëren die de esthetiek van je site verbetert, aansluit bij je huisstijl en de algehele gebruikerservaring een boost geeft.

We zijn benieuwd naar jouw ervaringen met WordPress typografie en of FSE voor jou de sleutel tot succes is. Deel je gedachten met ons in de comments hieronder.