Typography Tools
Fonts make all the difference
Even when keeping the same words, selecting a different font pairs for headings and body/paragraph text can dramatically shift how your site is perceived.
For example, a traditional serif details such as Times New Roman can give the headings a measured, established character; rounded fonts such as Fredoka or Baloo 2 can turn the same site into a much more unserious, playful feel.
If you're a professional SaaS, cloud storage or hardcore games studio playful fonts would not typically resonate with your audience, whereas Space Grotesk will.
Explore some fonts pairings with this interactive tool to explore how the choices you make can change the emotions felt by your website visitors. Save a pairing to compare different layout styles, and finally explore Size & Spacing to see how heading scaling, line spacing and your body text size can also affect the layout.
Particularly take notice of how large headings are affected on the Phone preview: some words will move as the line wraps to the next line, and some words cannot be made to fit at the chosen font size so the only option is typically to select a smaller scale or font size.
Choose one style. Each has its own three suggestions for your website type.
Save this pairing, then open Compare to explore its spacing, scale and weight.
Save a pairing in Find your style first. It stays saved while this page is open.
Both panels use the same pairing. Size & spacing controls still apply. Save another pairing to change the fonts used here.
The scale sets the steps between sizes. Fluid sizing makes those steps gentler on small screens.
A useful starting point: 16px. This is the usual browser root size (1rem) and a common starting point for body text. Other sizes can work well: smaller text may be harder to read; larger text needs more room and wraps sooner. Changing body text alone does not change the root size.
Why should I care about typography?
The words on your website tell people what you do.
How those words look helps set the tone.
The same sentence can feel warm and welcoming, unassumingly confident, playful or formal depending on the font you choose. That makes typography part of how people experience your business even if they never consciously notice the typeface. ("Oh look, Inter. It's such a timeless, clean font")
It also affects how easily they can use your website. Clear headings help visitors find what matters. Comfortable text sizes, spacing and column layouts make information easier to read. A thoughtful balance between these gives people a natural route through the page, rather than leaving everything competing for attention. Heading hierarchy also helps people to effortlessly navigate your information to help guide them to the answers they're looking for.
You can see this in the lab’s Unplanned vs considered comparison. The words and fonts stay the same, but changes to their size and spacing make the page feel noticeably different.
There isn’t one perfect font or a scale that suits every website. A literary blog might benefit from the character of a classic serif font; a busy service page might need something more understated. Both can be beautifully designed.
Use this tool above to try font choices, compare the results and notice what feels right for your content. You don’t need to know the terminology to recognise when a page becomes clearer, more comfortable to read, or more like you.
The tool only uses a small selection of the hundreds of fonts freely available and usable across all website builders provided by Google Fonts. There's even an Ogham text font for something a little different to use on Irish websites.
Take some time to explore fonts to avoid common pairings used widely by AI website builders to help you stand out from the crowd. Take note of a handful of pairs to give to your chosen website designer as this will save them time and present yourself as someone who cares about the finer details in design.