094 Choosing Website Fonts: Readability, Personality & Performance

There was a time when choosing a font for a website often started with a simple question:

"What font looks cool?"

Web designers wanted sites to look different, and an unusual typeface could immediately give a website personality.

There is nothing wrong with personality. Fonts remain an important part of design and branding. But after years of building and using websites, I have become less interested in finding a font simply because it looks interesting.

Today, I think the better question is:

"What font makes this website comfortable to read while supporting the personality and purpose of the site?"

That small change in thinking opens up a much larger discussion about readability, accessibility, performance, branding, privacy, and even how fonts are delivered to the visitor.

A Font Has a Job to Do

Before choosing a font, it helps to ask what we expect it to accomplish.

A font may need to:

• Make long articles comfortable to read
• Give headings visual personality
• Support a company's brand
• Feel modern, traditional, artistic, technical, elegant, or informal
• Remain readable on a small phone
• Work well when text is enlarged
• Load quickly
• Provide the characters and weights the website needs

Those requirements are much more useful than simply asking whether a font looks interesting.

The Best Font May Be the One You Don't Notice

This idea initially sounds strange.

Why spend time choosing a font if we don't want people to notice it?

Because most website typography exists to communicate information.

If someone reads a long article and never thinks about the font, but comfortably reads from beginning to end, the typography has done its job extremely well.

A body font should usually support the words rather than compete with them.

That doesn't mean a website needs to be boring. Personality can come from headings, colors, photography, spacing, illustrations, layout, logos, and other design elements.

The body text can quietly concentrate on being readable.

Serif and Sans-Serif

One of the first decisions in typography is often whether to use a serif or sans-serif typeface.

Serif fonts have small finishing strokes on many letters. They can suggest tradition, publishing, history, craftsmanship, literature, or elegance.

Sans-serif fonts omit those finishing strokes. They often create a clean, contemporary, straightforward appearance.

Neither category is automatically more accessible or more readable in every situation.

The quality of the individual typeface, font size, spacing, weight, contrast, screen, and reading environment all matter.

A well-designed serif can be wonderfully readable. So can a well-designed sans-serif.

System Fonts: An Excellent Option

One option is to use fonts that are already available on the visitor's computer or device.

A traditional example might look like this:

font-family: Arial, Helvetica, sans-serif;

The browser tries Arial first. If Arial is unavailable, it tries Helvetica. If neither is available, it uses the system's default sans-serif font.

A modern system font stack can go further:

font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

This approach allows the website to use a familiar interface font provided by the visitor's operating system.

There are several advantages:

• No additional font file needs to be downloaded
• Fonts generally render quickly
• The typeface is familiar to the visitor's device
• There is no dependence on an outside font service

For many websites, a good system font stack may be all that is necessary.

Custom Fonts Still Have a Place

There are also excellent reasons to use a custom font.

A custom font can help establish a recognizable visual identity. It can reinforce the character of a historic property, an artist, a wedding venue, a craftsman, or a particular brand.

The key is using that personality deliberately.

A decorative font that looks beautiful in a large heading may be exhausting when used for a 1,500-word article.

This leads to a useful strategy:

Use personality where personality helps, and readability where reading matters most.

We Don't Need One Font to Do Everything

A website can use one typeface for body copy and another for headings.

For example, an elegant serif or distinctive display face could give headings character while a highly readable sans-serif handles paragraphs, forms, navigation, and other functional text.

Or the arrangement could be reversed.

A clean sans-serif heading paired with a comfortable serif body font can create an editorial or traditional feeling.

There is no universal combination that works for every website.

The important thing is that the fonts complement each other rather than compete for attention.

Don't Use Too Many Fonts

If two fonts can create a clear visual system, adding a third, fourth, and fifth rarely makes the site better.

Every additional font can introduce more visual complexity and potentially more files for the visitor to download.

In many cases, one well-designed font family with several weights may be enough for an entire website.

We can create hierarchy using size, weight, spacing, color, and capitalization without changing typefaces every time we want something to look different.

Font Weight Matters

Fonts are often available in several weights:

font-weight: 400;  /* regular */
font-weight: 500;  /* medium */
font-weight: 600;  /* semi-bold */
font-weight: 700;  /* bold */

The exact appearance of these weights depends on the font family.

Weight can create hierarchy without requiring another font. A heading might use a heavier version of the same typeface used for body text.

But we should not automatically load every available weight.

If a site only uses regular and bold, there may be little reason to make visitors download several additional font files that never appear on the page.

Variable Fonts

Modern web typography also gives us variable fonts.

Traditionally, regular, medium, semi-bold, bold, and italic versions of a typeface might require separate font files.

A variable font can store a range of variations within one font resource.

Depending on the font, those variations can include weight, width, slant, optical size, or other characteristics.

This can provide considerable design flexibility and, in the right situation, reduce the number of separate font files a website needs.

Variable fonts are not automatically the best solution for every website, but they are an important part of modern web typography and worth understanding when evaluating a font family.

Self-Hosting Fonts

When we decide to use a custom web font, another decision appears:

Where should the font come from?

Many websites load fonts from third-party font services. That can be convenient, but it also means the page depends on another server to provide part of its design.

When licensing permits it, I generally prefer to host the font files with the website itself.

The basic CSS can look something like this:

@font-face {
    font-family: "OurFont";
    src: url("/fonts/ourfont.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

Then we can use it normally:

body {
    font-family: "OurFont", Arial, sans-serif;
}

This approach gives us direct control over the font files used by the site and removes an unnecessary dependency on an outside font server.

Why WOFF2?

Fonts designed for desktop publishing can come in formats such as TTF and OTF.

For modern websites, WOFF2 is generally the preferred web-font format because it provides efficient compression and has broad support in modern browsers.

A smaller font file means fewer bytes need to travel across the network before the browser can display it.

That matters because fonts are part of website performance.

Fonts Affect Page Speed

Every custom font file is another resource the browser may need to download.

Suppose we use two font families and load regular, medium, semi-bold, bold, and italic versions of each.

We could quickly turn a simple typography choice into numerous additional downloads.

Instead, we can ask:

Which fonts and weights does this website actually use?

If we need only regular and bold, we can often keep things much simpler.

This is another place where good design and good performance support each other.

What Is font-display: swap?

When using @font-face, we may include:

font-display: swap;

This tells the browser that displaying the text promptly is more important than waiting for the custom font.

The browser can initially display the text using a fallback font and then replace it when the custom font becomes available.

The visitor gets readable content instead of unnecessarily waiting for typography.

Again, the words come first.

Fallback Fonts Are Important

Even when we use a custom font, we should provide alternatives:

font-family: "OurFont", Arial, Helvetica, sans-serif;

If the custom font cannot load for some reason, the visitor still gets readable text.

A good fallback should ideally have reasonably similar proportions to the primary font. A dramatic difference between the two can cause text and page elements to shift when the custom font loads.

Font Licensing Matters

Finding a font file online does not automatically mean we have permission to put that file on a public website.

Fonts are creative works and their licenses vary.

Some are open source and explicitly allow web use and self-hosting. Others require a commercial license. Some licenses allow desktop use but have separate requirements for web use.

Before self-hosting a font, we should verify that its license allows us to do so.

This is an important part of choosing a font, not an afterthought.

Font Choice and Accessibility

Accessibility does not require every website to use Arial.

But accessibility should influence our choices.

We should look at characteristics such as:

• Are individual letters easy to distinguish?
• Are lowercase letters comfortably sized?
• Is the font still clear at normal body-text sizes?
• Are thin strokes disappearing on some screens?
• Does bold text remain readable?
• Are numbers and punctuation clear?
• Does italic text remain legible?
• Does the typeface work well when enlarged?

We can also look at easily confused characters.

Depending on the font, a lowercase l, uppercase I, and the number 1 can look surprisingly similar.

The same can happen with the letter O and the number 0.

That can be particularly important on websites displaying phone numbers, addresses, passwords, codes, technical information, or other material where identifying the exact character matters.

ALL CAPS and Small Caps

Capital letters can be effective for short headings, labels, navigation elements, or decorative treatments.

But long passages written entirely in capital letters are generally more difficult to scan and read comfortably.

Small caps can also create an attractive traditional or editorial appearance, but they should be used deliberately.

The same rule keeps returning:

Decoration should support communication, not interfere with it.

Letter Spacing

CSS gives us control over the space between characters:

letter-spacing: 0.05em;

A little additional spacing can work beautifully for short uppercase labels and headings.

Too much spacing in normal paragraphs, however, can make reading less natural.

Typography involves relationships: font family, size, weight, line height, line length, and letter spacing all work together.

Different Websites Can Have Different Personalities

This is where font selection becomes fun.

A technology and website consulting site may benefit from a clean, contemporary typeface that feels capable and approachable.

A historic estate could support a typeface with more traditional character.

A wedding venue might use an elegant heading font while maintaining extremely readable body copy.

A woodworking site could use typography that feels warm and crafted without becoming rustic to the point of distraction.

A health and wellness site may benefit most from calm, exceptionally readable typography.

There is no reason all of these sites need to use exactly the same font simply because they were built by the same web designer.

The typography should serve the site.

A Useful Font Comparison

Rather than browsing through hundreds of fonts, a more useful exercise may be to take the same paragraph and compare a handful of different approaches.

1. Traditional Sans-Serif

Arial and Helvetica provide a familiar baseline. They are not exciting choices, but they remind us how valuable straightforward readability can be.

2. Modern System Font

A system font stack can make the website feel naturally integrated with the visitor's device while requiring no additional font download.

3. Self-Hosted Sans-Serif

A carefully selected sans-serif can add a little more identity while preserving excellent readability.

4. Self-Hosted Serif

A serif can introduce an editorial, historic, literary, or traditional feeling while still being highly readable when carefully chosen.

5. A Display Typeface

A more distinctive typeface can provide considerable personality in headings while being intentionally kept away from long paragraphs.

Seeing the same words in each approach makes the differences much easier to understand than simply looking through a catalog of font names.

Test the Font with Real Content

A font can look fantastic when the sample says:

"Beautiful Typography"

That tells us very little about what it will be like to read a real website.

Instead, test it with:

• A long paragraph
• A short paragraph
• Several heading sizes
• Navigation
• Buttons
• A form
• Numbers
• Uppercase and lowercase letters
• Bold and italic text
• A phone screen

Then read it rather than merely looking at it.

That distinction is important.

Don't Forget the Phone

A typeface that looks elegant on a 27-inch monitor may feel completely different on a phone.

This connects directly with responsive typography.

Font selection and font sizing cannot really be separated. The family, size, weight, spacing, and available screen width all affect readability.

And yes, we can once again apply the highly unofficial "Where Are My Glasses?" test.

If the typography becomes unnecessarily difficult to read in an ordinary real-world situation, perhaps we should reconsider it.

A Simple Font Strategy

For many websites, a good starting strategy could be surprisingly simple:

• Choose readability first for body text
• Use a system font when a custom font provides little benefit
• Use a custom font when it adds meaningful character
• Self-host custom fonts when practical and properly licensed
• Prefer efficient modern web-font formats such as WOFF2
• Load only the weights and styles actually needed
• Always provide sensible fallback fonts
• Use distinctive display fonts selectively
• Test with real content on real devices

From "Cool Font" to Good Typography

Perhaps the biggest change is not technological at all.

It is how we think about the decision.

Years ago, I might have started by asking:

"Can we find a cool font for this website?"

Today, I am more likely to ask:

"What typography will make this website easy to read and appropriate for the people and organization it represents?"

Sometimes the answer may still be a beautiful and distinctive custom font.

Sometimes it may be Arial.

Sometimes it may be the font already built into the visitor's operating system.

Good design isn't about choosing the fanciest option.

It is about choosing the option that does the job best.

Final Thought

Typography is interesting because visitors encounter it almost everywhere on a website.

They see photographs occasionally. They press buttons occasionally. They use navigation occasionally.

But they are constantly looking at text.

That makes font selection much more than decoration.

It affects readability, accessibility, performance, branding, and the overall experience of using the site.

Perhaps the ultimate compliment for a website font is not:

"Wow, that's a cool font."

Perhaps it is:

"I read the whole thing."