Menu

What’s In A Font? Researching Website Typography

While redesigning my website I wanted to get the experience right, so I’ve been researching website typography. This post talks about what I’ve learned from that research and the changes I’ve made to this site as a result.

Choosing the right font for your website is incredibly important, especially if your site is a blog, as those fonts will be used by every one of your visitors to consume your content.

I received some feedback on my old site saying that the typography needed some work. I wasn’t really sure what they were referring to when talking about some of the nuances of typography, I so went down a rabbit hole of typographic research.

Typography isn’t just about choosing the right font. It’s so much more than that. It’s about the height & width of your lines, the spacing between those lines, the colours you choose, the weight of your fonts and a whole lot more.

The reading experience on my previous theme was pretty good, but I wanted to abide by as many typography best practices as I could for the new design. So let’s jump in, shall we?

Visual Hierarchy

Visual hierarchy is all a about arranging the different elements on a page so that readers can easily navigate their way around.

So you have a gap between between each line, then a slightly larger gap between each paragraph. Then, when using headings, it’s good to have an even larger gap so that the heading breaks the page up into separate sections.

Here’s a diagram that explains what I mean in a more visual way:

Typography visual hierarchy

As you can see, the title, lines, paragraphs and section headers are all distinct. Because of this, the page is naturally broken up into separate parts, which makes things flow better for the reader.

Visual hierarchy also helps with skim reading. Not many people read an entire post word for word; many skim through and pick the parts that are pertinent to them. By carving your posts up in this way you’re making skim reading much easier.

I have managed to attain what I think is a good visual hierarchy on this website by using 3 different techniques:

  1. Different type faces – my paragraph text uses Merriweather, which is a serif font. However, my headings are using the Fira Condensed font, which is sans-serif.
  2. Font size & weight – not only are my headings larger than my paragraph text, they’re also using a heavy weight to make them bolder.
  3. Positioning – I have used spacings between lines, paragraphs and headings in the same way as described in the image above.

A lot of sites also use different colours for their headings. I didn’t feel this was necessary for my theme, as the differences in typeface, size and weight make the headings and paragraphs significantly different already.

Choosing the right fonts

Choosing the right fonts for your website typography is extremely important. If you get them wrong your pages will not only look bad, but your readers will find them difficult to read.

If you get this really wrong, you could actually be damaging your reader’s eyes. So yeah, it’s pretty important.

Serif vs sans serif

So what actually is the difference between serif and sans serif when we’re talking about fonts?

Well, serifs are the little ticks that you see at the end of some letters. The word “sans” is French for “without”. So sans serif literally means fonts without serifs.

Serif vs sans serif

Should I use serif or sans serif for my fonts then?

That’s a great question, dear reader. And the answer is use whatever you like. From the research I’ve done, there doesn’t appear to be any hard and fast rules about which type of fonts you should use.

Want to use one of each? Go for it. Want to use all serif? Be my guest. Is all sans serif more your bag? Do it. It’s completely up to you.

Just make sure that whatever fonts you do you use, the paragraph and heading fonts are different enough to be distinct from one another.

Avoid script

I would like to caveat the above statements about using which ever fonts you like with the following:

DO NOT USE SCRIPT FONTS!

Script fonts are for decorative purposes and don’t really work for website typography. There are some exclusions to this, of course, but the general rule of thumb is to avoid script fonts if at all possible.

Typography script example

How many fonts?

The recommendation for the number of fonts you should use is quite simple – use a maximum of 2 fonts. Any more than this can be confusing for the reader and ruin the flow of your content.

On this site, pretty much every element is using Fira Sans Condensed, except for my paragraph font which is Merriweather.

Another option I was considering was having Merriweather as my paragraph font, and Merriweather Sans everywhere else.

Although this would have worked well, as they’re both from the same font family, I decided not to do it in the end. To be honest, the main reason was that I just don’t like the look of Merriweather Sans all that much.

Web fonts

When declaring which fonts you want to use for your website typography, your visitors will need to have that font installed on their system in order for it to display.

Obviously most of my readers won’t have Merriweather and Fira installed on their system. That’s where web fonts come in.

Web fonts are served from the Internet, either from your own server, or from services like Google Fonts. I prefer to self-host my web fonts, because of the various privacy concerns I have with Google.

When defining your web fonts, it’s extremely important to also define backup fonts. These tell your browser to try different fonts if the main font doesn’t load.

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "fira", helvetica, arial, sans-serif;
}

The code above is from my CSS stylesheet. This tells the browser to try using Fira, but if that isn’t available for whatever reason, use Helvetica. If Helvetica also isn’t available, use Ariel. Most machines have Ariel installed on them, but just in case they don’t, I’ve finally told the browser to just load whatever the system sans-serif font is.

This will ensure that my header fonts are always sans serif, and serif fonts are never loaded. This is the same for my paragraph text too:

p {
    font-family: "merriweather", Georgia, serif;
}

Font size

It’s really important to ensure that your fonts are large enough to be easily readable on a variety of screens. The default size of the paragraph text in most browsers is 16px. That’s pretty good, but a 16px font size can result is wildly different rendered text depending on which font you’re using.

16px font examples

As you can see, the differences can be significant, so it’s worth testing the size of your fonts on your site before you settle. For example, I’ve increased the base size of my paragraph fonts to 17px as I think that works better with Merriweather.

You can use relative font sizes, such as em and rem which adjust the font size depending on the display size, but I personally find it easier to just use px as my unit of measure. Since writing this post I have switched all my typography to em measurements.

Headers

As a general rule of thumb, your main header should be between 180-200% of your paragraph text and your secondary header should be between 130-150%.

So by sticking to those guidelines, my h2 headings are 32px and my h3 are 28px. My h3 is a little bigger than the 150% guideline, but I felt that 26px in Fira wasn’t that much bigger than 17px in Merriweather, so I increased it slightly.

Remember, these are guidelines, not rules. So you can tweak them to suit your own needs.

Line width

Before researching website typography, I’d never really considered my line width. I’ve always preferred to have wider lines so that there’s less white space either side of the content.

However, this turned out to be all kinds of wrong. The golden zone is around 60 characters per line on a larger screen and 30-40 characters on a mobile device.

Typography line width

The rationale behind these numbers is that your subconscious mind gets excited when you start a new line. Apparently, at the beginning of a new line your attention is focussed, so by being in this golden zone, it’s easier to keep your reader’s attention.

Having to move your eyes from left to right over over wider spaces can cause eye strain, but having lines that are too narrow can make reading awkward. So it’s important to get this right.

By having a width of 640px for my content on this site, I’ve managed to keep the line widths somewhere in the region of where they need to be.

Line height

Line height, or leading as it’s known in typography circles, is the white space between your lines of text. Your leading should be around 30% more than the character height.

So if your paragraph font is 18px, the leading should be around 6px.

Typography line height

Colour

I’ve read in a number of places that it’s a bad idea to use pitch black as your font colour for digital displays. Instead it’s recommended to use dark grey, such as #333. I’ve always used #333 for my paragraph text, so at least I got something right! 🙂

When it comes to using other colours, the advice is to use them sparingly. Personally, the only colour I use on this site is for an accent colour on a few elements and on hyperlinks. Speaking of which…

Hyperlinks

By default, hyperlinks are always underlined, but according to practical typography that’s a huge no no.

In a printed document, don’t underline. Ever. It’s ugly and it makes text harder to read.

Practical Typography

On my previous theme all of my hyperlinks were underlined, even when hovering over them. The only animation is that the solid underline changed to a dotted one.

After taking this advice onboard, I don’t have traditional underlines on the vast majority of the links on this site. I do still underline links when elements have text and links the same colour however. For example, on my coloured notification banners. This helps differentiate the normal text from the hyperlink.

I’m a notification banner, my links are the same colour as my text, so they need to be underlined.

I still wanted a way of highlighting links within my posts while injecting some colour. So I decided to add a fun animation that swipes a background colour behind my links when they are hovered over. Although it looks like an underline, it isn’t. 🙂

Technically, my links are still underlined, but I really like this design so I’m going to stick with it. 🙂

If you’re going to use colour within your typography, it’s best to keep it to a minimum. If you are going to use colour for something other than hyperlinks do not use the same colour.

Your hyperlinks should always be unique so that your visitors know that a particular colour or design are always links. Otherwise things get confusing.

Conclusion

I’ve really enjoyed learning about website typography, and I think as a result of my research the experience on this site should have improved.

I hope you’ve learned something new from this post too. If you have any tips or feedback for me, feel free to leave a comment below.

Further Reading

If you want to do some more reading on typography, here are links to some to sites I’ve found useful while doing this research.

This post is day 25 of my #100DaysToOffload challenge. Visit https://100daystooffload.com to get more info, or to get involved.

Subscribe for more!

You will receive monthly emails with updates and previews of upcoming posts. To find out more, click here.

Please enter a valid email address.
That email address is already subscribed.
The security code entered was incorrect
Thanks for signing up!

«

»


Comments

Please read my commenting guidelines before posting a comment.

  1. @kev Interesting, useful read, thanks for posting and further reading links at the end.
    Just wanted to let you know of a small typo, it’s Arial with an ‘a’ not Ariel (5th para of ‘Web fonts’) 🙂

  2. @kev When I read the first part of your post title “What’s in a font?”, I was expecting to read about the construction of a font: what you should take into account while designing characters, spacing between them, ligatures, etc.Nevertheless, I really enjoyed reading your take on web page typography!

  3. @kev I was reading through the post to see if you mentioned Practical Typography and was pleasantly surprised to see that you did 😉 I’ve been working my way through it for a little while now and have learned a lot. I’m seriously considering buying Valkyrie and using it everywhere but the price is hard to justify right now.

  4. @sheogorath they’re ok as a last resort, but I’d personally prefer to use fonts loaded from the server to get things how I want it to look.If I were to use system fonts on my site, I’d end up with Times New Roman as my body and god knows what as my headings (sans fonts vary widely between systems).Also, from the research I’ve done, system fonts are fairly low quality by all accounts.

  5. @kev What’s your thought on system fonts?I tried using them recently and they appear to be a bit unpredictable when it comes to the representation in a browser. Do you have any hints there?System fonts like in:https://github.com/jonathantneal/system-font-csshttps://css-tricks.com/snippets/css/system-font-stack/Is it useful to have them on your blog or do they make it too hard to figure the entire typography out?
    jonathantneal/system-font-css

    1. Yeah, I think it does; and if it doesn’t, it’s pretty darn close. 🙂

Reposts

  • Daryl Sun
  • kylaver@cybre.space
  • vandys@mst.vsta.org
  • FOSS4Everyone 🇳🇱
  • Freddy :verified:
  • viduno
  • ~ashwinvis
  • Mike Stone :ubuntumate:
  • Adrian Cochrane

Leave a Reply

Your email address will not be published. Required fields are marked *