Typography in web design: the soul of your site

A lot of people starting out in web design think typography is a minor detail: you throw in Times New Roman, Inter or Roboto and you’re done. But choosing the right typeface for the specific website you’re designing is one of the most important decisions you’ll make. Today I want to explain why typography in web design matters so much and how to approach it, and at the end I’ll leave you a little script to test fonts instantly.

Typography is the soul of design

There’s a famous saying in chess that pawns are the soul of chess. Well, to me, typography is the soul of design. It’s the foundation everything else rests on, whether it’s a website or a poster.

This is how I see it: communication lives in the letters. A design without letters, to me, isn’t design anymore; it’s art. It’s what a painting or a sculpture makes you feel, which is wonderful, but it’s something else. Graphic design lives on the message, and that message is carried by typography. It doesn’t matter whether you use a little text or a lot: the shape of those letters is communicating the whole time.

Style first, typography second

The usual mistake is to pick the font first, almost at random. The right order is exactly the opposite. First you decide what design style you want and, above all, what you want your website to convey. Only then do you choose a typeface that fits that style.

Typography isn’t a layer you add at the end: it’s a consequence of the direction you’ve given the project. If you’re clear on that from the start, the choice becomes much simpler and more consistent.

Choosing a typeface for what you want to convey

Each type family communicates something different and, while there are no rigid rules, there are some guidelines that work really well. If you’re after elegance, a serif typeface usually fits beautifully: those little finishing strokes convey tradition, sophistication and trust. If what you want is to convey technology and make it clear you know what you’re doing, a sans serif almost always hits the mark, because they’re clean, modern and direct.

And if you need something with more personality, alternative or more decorative typefaces have their place: they can look great on the website of a restaurant that wants to be different, or on a museum’s site, where a more medieval-looking typeface might suit you because you’re showcasing something from precisely that era. The key is for the typeface to reinforce the business’s message, not go off and do its own thing.

A script to test fonts instantly

And now for the practical part. Often you’ve already got the site built in HTML and CSS, or even live, and you’re left wondering: is this the right typeface? Wouldn’t it look better with a different one?

To speed up those tests I use this little script. Just open your browser’s inspector, go to the Console tab and paste this in, swapping 'Inter' (on the first line) for the font you want to try:

var myFont = 'Inter'; // <--- TYPE THE FONT NAME HERE (e.g. 'Roboto', 'Lora', 'Poppins')

// --- Don't touch anything below this line, just copy and paste ---
var idLink = 'font-preview-link';
var linkEl = document.getElementById(idLink) || document.createElement('link');
linkEl.id = idLink; linkEl.rel = 'stylesheet';
linkEl.href = 'https://fonts.googleapis.com/css2?family=' + myFont.replace(/ /g, '+') + ':wght@400;700&display=swap';
document.head.appendChild(linkEl);

var idStyle = 'font-preview-style';
var styleEl = document.getElementById(idStyle) || document.createElement('style');
styleEl.id = idStyle;
styleEl.innerHTML = '* { font-family: "' + myFont + '", sans-serif !important; }';
document.head.appendChild(styleEl);

console.log('Testing font: ' + myFont);

Press Enter and the whole page will switch to that font instantly. Want to try another one? Just change the name on the first line — for example var myFont = 'Lora'; — and run it again. Repeat with as many fonts as you like until you find the one that fits best. It’s the fastest way I know to test fonts on a site that’s already built.

One note: while the test is active, some icons may look strange, because they rely on their own font. That’s completely normal and temporary; as soon as you reload the page, everything goes back to how it was.

And before you code, test in Figma

That said, ideally you shouldn’t reach that point with doubts. The best approach is to design the page in Figma first and try out different typefaces there to see which one fits best before you touch a single line of code.

The script is perfect for validating on the fly or for rescuing a site that’s already built; Figma is where you should make the real decision, calmly and with the full design in front of you.

Conclusion

Typography isn’t the last detail you decide in a rush: it’s the foundation the whole design is built on. Choose it with intention, keep it aligned with what you want to convey, and your website won’t just read better, it’ll communicate exactly what you want it to.