typografie met Full Site Editing en theme.json

ict

[ad_1]

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.

Een vergelijking van twee serif lettertypes, Verdana en Georgia. De afbeelding toont hoofdletters en kleine letters - en cijfers - in beide lettertypes. Verdana lijkt meer gecondenseerd en geometrisch, terwijl Georgia meer uitgesproken schreefletters en een iets traditionelere uitstraling heeft.
Voorbeelden van de lettertypen Verdana en Georgia.

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.

De Google Fonts website toont lettertypevoorbeelden en filteropties. De voorbeeldtekst luidt “Iedereen heeft het recht op vrijheid van denken”, weergegeven in verschillende lettertypes, waaronder Roboto, SUSE en Noto Sans Hannunoo. Filteropties voor taal, schrijfsysteem en lettertype-eigenschappen zijn zichtbaar in de linker zijbalk.
De hoofdinterface van Google Fonts.

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:

De WordPress.org themavoorvertoning voor “Twenty Ten” toont een schilderachtige headerafbeelding van een met bomen omzoomd pad. De linker zijbalk toont thema-informatie en downloadopties, terwijl het hoofdgedeelte voorbeeldcontent en -lay-out toont.
De Twenty Ten demopagina van WordPress.org.

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.

[ad_2]

https://kinsta.com/nl/blog/wordpress-typografie-theme-json/