Best practices for website fonts sizes and typography

The importance of typography in website design is often overlooked. The font size, typeface, and spacing between letters all affect the readability of your website.

In this blog post, I’ll share some best practices for font sizes and typography to ensure that your website meets accessibility standards while maintaining a professional look.

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Why should you even care about your fonts?

It’s important for your website to be easy on the eyes. You want people to read what you have to say without getting distracted by how it looks. That’s why typography is so important! The right font size and typography will keep readers engaged with your content longer than they would otherwise be if you don’t take these things into consideration.

Your website should look good on any device or screen size, whether that means a smartphone, tablet, or desktop computer. With the right font sizes and typography in place, your site will always look its best no matter where someone views it from!

Think about accessibility

Having the right settings also helps you with accessibility. Making sure your site is accessible is not only a decent human thing to do, but also it opens up the market for your site to a wider audience. It’s not only the visually impaired who benefit from accessible websites, but also people with reading disabilities or those on slower connections, and anyone looking for content in another language.

There are no official WCAG / ADA guidelines but there are many resources to gather from. My 2 cents:

Mobile font-size.

Mobile text should never be under 13px (12px and under is considered too small for google’s standards). This one is something where depending on the font you are using a size 12px might still be a good choice since most screens allow for crisps lines.

Line height.

About 50% of the font size, so if your content is 16px high then you would use 32px for line-height. This one also depends on what type of fonts are used and how much space the text takes up in a row because more lines might need less spacing between them to keep everything easy to read.

Desktop font-size.

16px is a good average for retina displays to keep it readable for consistency.

Left align as much as possible.

Never justified if possible(it is the hardest to read for visually impaired users), center for smaller chunks of attention-grabbing blocks is fine but not to be abused. Left align helps the eye be guided and provides an easy-to-read flow.

White space

WCAG has white space guidance but in terms of margins, having at least 10px per side on mobile helps things stay off the edge, and consider the same on the desktop design since that is the breakpoint for tablets and anything off your design (usually 1500px, but for my Showit users, 1200px designer will be cut off completely).

Typography choices with letters that are clear to identify help the reader to read your website content more smoothly.

Use sans serif fonts for body text if your brand is community-oriented, friendly, or with a soft tone of voice in the messaging. Serifs are great for more educational, modern, or “colder” types of brands. Both are great, it’s a matter of picking one that allows your brand to be represented while keeping it easy to read.

Designer pro tip:

Avoid at all costs using all caps with script fonts. This is a mistake that I see way too often, and it’s just going to show your brand as an amateur and with a lack of care about the details. nd trust me, it’s unreadable.

The font size, typeface and spacing between letters all affect how consumers feel about your site. If you’ve noticed that some parts of your webpage are difficult to read or use less space than others, consider hiring a professional designer like my studio to help you pick out assets for your brand!

We offer free consultations so we can get to know more about what you need from our end-to-end branding services and create the best possible plan with typography as one of its main focuses. Get back to being able to focus on running your business without worrying about the aesthetics.