Hello everyone, I’m going to show you how we can customize fonts and what you generally need to keep in mind when it comes to typography. I’m on the homepage right now and first of all I’ll create a demo heading by simply typing Headline 1 and then Headline 2. Then I’ll save that and take a look at it in the browser.

So, we can now see the preconfigured standard font sizes, and importantly, WordPress supports so-called fluid font sizes, meaning the font size depends on the viewport width – the width of my browser window – and changes accordingly. If I look at this now, how large is this headline currently at, say, 1016 pixels in width? We have a certain font size. We can see it in this small tooltip: it says 37.39 pixels. In code, that’s of course an em or rem value, a relative font unit.

But the browser always converts that to display pixels. Right now we have roughly 37.39 pixels at the display size, and if I change the viewport, you can see that too – it gets a bit smaller. And if I go down to smartphone size, this heading suddenly has only 30 pixels font size. So everything shrinks dynamically, and that applies not just to fonts but also to spacing and everything that is defined relative to the font size. This can be turned off, but by default it’s something we want in all projects, so that the different viewing distance from smartphone to desktop, and the different amount of space available on different devices, is also taken into account in the design.

Good, that’s the basic overview. If I now want to see how this system is structured, I go into the Site Editor – I can configure everything there under Design → Editor → Styles → Typography.

Of course I have the option to change the font. By default we use a sans-serif system font, which means it can differ between Windows and Mac, for example, or even vary by browser, but it is always sans-serif.

If a different font is to be used, you go here and add your own font either via “Install Fonts” or via Upload. With Upload you could, for example, upload a purchased font in woff2 format, and here you would have the option to connect Google Fonts.

WordPress would then download that font for you and store it on your server so everything stays GDPR-compliant. At the end, not just this one system font would be available, but also the second one you have set up.

I think that’s fairly straightforward, so I won’t go into too much detail there. Of course I also have the various elements where I can assign fonts – for example, if I had installed a serif font, I could say I want all headings to use the serif font and all other elements not to. And further down it gets more interesting for me: that’s where we get to the font size presets.

Now, looking at Headline 1 and Headline 2, they have been assigned certain sizes, and overall we have prepared 10 sizes. Currently they are all named after what they look like, although they are of course dynamic – meaning the typical display size corresponds to this value. You can rename all of these. If you want this one to be called “Tiny” and that one “Huge”, you can adjust that in theme.json. We want to start from this baseline because it gives us the most flexibility across different projects.

I could go and look at how a particular font size – say 32px – is defined. Then I can see it’s a fluid font size that WordPress has activated, varying between 2 and 2.5rem. So these 32 pixels we currently use as a label correspond to the minimum value of 2rem. The base font size in the browser is always 16px, so 2 × 16 = 32, and it can grow up to a maximum of 2.5rem. You could override this for any of these font sizes, though it can get relatively complicated – it’s easy to go down a rabbit hole and end up spending a lot of time tweaking things.

So we don’t change much there. We invested effort once to establish baseline font sizes that give us a lot of flexibility. Apart from potentially renaming them – the label the client sees, not the code identifier. In the code, fonts are named font-1, font-2, etc., whereas the label is what the client sees in the admin. What makes sense as a label is very project-specific, which is why we often don’t adjust the font size itself or the code at all – only the label the client sees, to make it easier to choose the right font size and avoid mistakes. If I want the client to always use a specific heading for a certain element, it might make sense to name that heading accordingly – for example “Boxtitle” – so the client always picks the right one. But again, that’s very project-specific.

That’s how font size presets work. And then of course I have the option to assign these font sizes to headings. This is all preconfigured in theme.json. If I go into headings, I’d grab h1 for example and see that h1 is mapped to our 32px font size. So we defined a list of font sizes, there are standard HTML heading sizes, and we’ve mapped them here. If you want to change this mapping, you’d go into the heading settings (not “all” but the individual one to be changed) and adjust the mapping.

You could say h4 should no longer be 24px, or you could assign a different size, or you could change how those 24px scale fluidly, or simply rename the 24px preset.

That would currently need to happen in theme.json, simply because WordPress doesn’t yet offer that option in the Site Editor. But whenever we need to make a client-specific adjustment, we work in theme.json anyway, so it’s no extra overhead for us.

That’s really all you need to know about fonts. I’ll briefly show where in theme.json you would make these adjustments. I go back to Tools → Theme File Editor. I’ll show this in the parent theme – theme.json is a bit dense there, but the location is the same. I open theme.json and find the Settings section, which contains Color settings, Layout, and so on. After scrolling past all the color definitions, I’ll eventually reach Spacing, Shadows, Border Radius, and then Typography starts here.

That’s where they’re all defined. For example, the 32px font size – I can see the slug (the code name) is font-10, it’s fluid between 2rem and 2.5rem, and the label visible to the client (and to us in the admin) is “32 Pixel”. This is where you’d rename it – to something like “Page Title” or whatever makes sense for the project.