Why good typography is so important for your website & actionable tips for getting it right!

— 12 mins 45 secs —

Typography and written content is the most human element of any website. It’s the part that speaks to us, helping us understand what the site is about and guiding us from one page to another.

It’s this that makes website typography so important, and why it’s essential to get it right. When building a new website for your brand, it’s easy to get pulled into thinking it’s all about the imagery and brand colours. These are very important, yes, but without the right words written and displayed in the right way, your website’s visitors aren’t going to get very far.

In this blog we’ll teach you all the different ways typography can make a big difference to your website, and give you a few top typography tips along the way. Let’s start with the practical stuff:

Typography for Readability & Accessibility

A website that nobody can read is next to useless. Readability and accessibility are, therefore, two of the most important factors to get right when it comes to website typography. Making your website text readable and accessible means considering key factors like font size, style, colour, contrast, paragraph length and line length.

Text that is too small and displayed in an unnecessarily fancy font will be difficult to see and understand. Text formatted in huge block paragraphs or in page-wide lines will act like visual obstacles that your users will not want to tackle. And text that is not contrasted clearly enough against its background could be ignored or missed entirely.

A readable and accessible website is one that absolutely everybody can use with ease, including those with visual impairments and disabilities. Users will not want to sit and squint at their screens to try and read tiny text in a scawly font, and a person with visual impairments will certainly struggle if your text is too pale to be seen against a similarly pale background. All of these things need to be considered carefully when populating a website with written content, and it’s important to favour practical factors like readability and accessibility over style and fancy designs.

Actionable Tips on Readability and Accessibility

To ensure your site is as readable and accessible as possible, follow these simple tips:

  • Keep line lengths somewhere between 40 and 70 characters long for typical website landing page text. Blog posts can be a little longer, as readers expect to delve deeper into the content.
  • Choose clearly contrasting colours for text displays. Dark coloured text on top of white or light backgrounds works best for blocks of copy as these are less tiring on the eyes, while light colours on top of darker backgrounds can work perfectly well for hero banner designs and menu navigations.
  • Avoid colour combinations like red and blue, as these do not contrast clearly enough. If you’re unsure, try mocking up several options and ask people to choose the ones they find easiest to read.
  • Left-justified text is the best option for alignment. Avoid fully-justified as this can make your words look stretched and unnatural. Neaten up your right-hand edges to avoid drastically uneven line lengths where possible.
  • Aim for a minimum of 16pt font size for all website body text. This is only a guide, however, and your optimum font size will depend on the style of font you’re using. Again, test various font sizes on real people who don’t have 20-20 vision for more guidance on the best font size.
  • Choose plain sans serif font styles for body text and navigation menu text. Save the fun, stylised fonts for headings.
  • Don’t be afraid of white space. Split your content out into short paragraphs with plenty of ‘breathing space’ between each content block, or your website will look too cluttered.
  • Ensure all the most important text is displayed in a text format, not in image format, to ensure it can be read by screen readers for those with visual impairments.
  • Make it scannable. Split your website content out into clear sections with headings and subheadings where appropriate. Make the key elements like brand messaging and CTAs stand out against the rest of the design, too, as all of this will help users scan over the website and quickly identify the information or action they’re looking for. A good typographic hierarchy will help you greatly with creating scannable content, which leads us nicely into our next section …

Typographic Hierarchy

The hierarchy of typography is incredibly important, and links in with readability and accessibility in many ways. Typographic hierarchy refers to the visual order in which your text is displayed, and the visual cues that tell our brains which text we should read first, and which bits are the most important. In our world of information overload, hierarchy brings order to the chaos.

Without a clear typographical hierarchy, any users visiting your website would struggle to find the information, pages or products they are searching for. Visual cues used to indicate hierarchy include:

Size
Generally speaking, bigger text = more important text. Using a bigger font size for headers and important text blocks helps draw the reader’s eye straight to it, usually ensuring the reader sees this text first.

Type weight
Making text bolder or thinner helps indicate hierarchy in a similar way to size; the bolder and heavier the text, the more noticeable and more important it is. This is especially useful for making subheaders and keywords stand out from body copy.

Colour
One of the more commonly-forgotten hierarchy indicators, colour can be used to differentiate and order your text. Using lighter or darker shades of the same colour can create hierarchy, or you can create greater contrast between text and its background to make it more prominent.

Case
Capitalisation makes text stand out significantly against lower case words. While this isn’t recommended for body text from a readability perspective, it can work nicely for creating hierarchy with headings and subheadings.

Position and alignment
We all know that people read from left to right, top to bottom. Centering certain typographic elements (like headings, for example) can help them stand out and place them higher up in the hierarchical structure.

Tips for Effective Typographic Hierarchy

Here are some top tips on how to ensure all your written content is ordered properly for the optimum user experience and the most visually-appealing design:

  • Headers are bigger than subheaders, which should be bigger than body copy. Use a sliding scale of size to indicate the most important pieces of copy and help guide the reader down the page. Remember, 16pt is the minimum size for body copy, so work your way upwards from there for headers, subheaders and important CTAs.
  • Combine coordinating typefaces. Matching up two or three coordinating typefaces creates a clear hierarchy and a more effective visual design than simply using different sizes and weights of one typeface. We’ll talk more about how to combine typefaces in our next section on branding.
  • Keep your business goals in mind. Typographical hierarchy can change depending on the goals of your website. If there is one particular action you need users to take, you need to make sure that the call to action (CTA) for this action is prioritised in the visual hierarchy of the page.

Typography and Brand Impact

Typography forms a huge part of brand identity. Different font styles and typefaces speak with different voices, creating different personalities and characteristics. For example:

Sans serif = informal, fun, conversational, playful (think Facebook, Google, Innocent)

Serif = formal, traditional, respectable, quality (think HSBC, Tiffany & Co, SONY)

Script = authentic, creative, emotional (think CocaCola, Kelloggs, Ford)

Choosing the right typeface style to suit your brand’s voice, personality and mission will ensure your brand sends out the right message to anyone who comes across it. If your typeface and voice don’t match, you’ll end up with one very confused brand indeed (and very confused consumers, too). If you’re already up to the website creation side of things, the odds are you’ll already have a clear idea of what your brand is all about and at least a rough idea of how you want it to communicate.

Most brands will fit into one of the three groups above, but these are by no means exhaustive. Check out our blog on brand archetypes to help you pin down your brand’s voice and personality if you’re not sure.

Tips for Choosing Typefaces for Branding

If you’re using a design service to help you build your website, they will be able to advise on the best typefaces for your brand and how to use them, but there are plenty of things you can do yourself to help the process along, or if you’re going it alone.

  • Make a mood board. Gather up a variety of existing typefaces and logos that you like and put them all in one place. You can use a digital mood board platform like Pinterest, or you can physically print, cut and stick onto a traditional moodboard. This will help you (or your design team) get a feel for the sort of aesthetic you want your brand to embody.
  • Decide if you want open source, primary or custom typefaces. This will depend on timescale and budget.

    • Open source typefaces are those that can be found, downloaded and used for free, and come in especially useful if you’re building your own website yourself. You can use sites like FontSquirrel and Google Fonts to find these.
    • Primary typefaces are typefaces you can find online but that you need to pay licensing fees to use. This gives you a greater variety of choice and freedom, but the costs can add up if you need to license multiple fonts or if you’re working on multiple platforms i.e. desktop, mobile, apps etc. Primary typefaces can be found on sites like Fonts.com and FontShop.
    • Custom typefaces, as the name suggests, are entirely bespoke and unique to your brand. This means you have something that nobody else has, and you can tailor every last little detail to suit the voice of your brand – the only downside is it takes longer and you’d need a bigger budget. You can speak to designers and illustrators about creating custom fonts, or you can have a go at it yourself with tools like Fontstruct and RoboFont.
  • Pick 5 to 10 fonts to begin with. From here, you (with the help of your designer, if you have one) can narrow it down to the ones you like best. Start playing around with them; see how they look in uppercase, lowercase and in numerical form. See how they look on a screen and in print form. Check how they look in different sizes (are they as clear when they’re displayed at 16pt as they are at 36pt?). Keep narrowing down until you have the ones you like best.
  • Start pairing your fonts. Once you’ve got your frontrunners, you can narrow it down even further and start creating a strong typographic language for your website by pairing your fonts with others that complement it. Use a tool like FontPair or Flipping Typical and start playing around with some typeface combinations.
  • Assign Primary, Secondary and Tertiary typefaces. Once you have your two or three final typefaces, you need to assign a position for them in your hierarchy and assign roles. Your primaries might be headers and subheaders, for example, while your secondaries may be used for body copy and CTAs, and your tertiary fonts could be used for accents. Note, however, that the use of tertiary typefaces is only advised for desktop designs, as having too many typefaces (and very small copy) doesn’t work too well on small, mobile devices. We’ll talk more about considerations for mobile typography in the next section.
  • Keep it consistent! Consistency in branding is essential for creating a professional, seamless user experience across all your customer-facing channels and touchpoints. When choosing your typefaces for your website design, make sure you test to make sure those typefaces are going to look just as good on any offline use cases too, and make sure you use them consistently across every platform.
  • Keep it professional. Messy or overly decorative typefaces and illegible font settings will make your website look unprofessional and may lead to unfavourably high bounce rates. Stick to clean, clear and legible fonts to create a reader-friendly user experience and a professional aesthetic.

Typography on Mobile Websites

Surely with responsive design, anything that works on desktop will work on mobile too, right? If only it were so. There are a few important elements to consider when formatting your typography for a mobile site or app. Here are a few best practices for you to take away:

Font Size
The optimum font size for mobile displays sits between 16pt and 18pt for body copy. Apple’s user interface guidelines recommends 17pt, while Google’s guidelines set the minimum size at 16pt, and WCAG 2.0 (Web Content Accessibility Guidelines) recommends a minimum of 18pt size and 14pt for bold text. So long as you aim for one of these three sizes, your mobile copy should be readable. Note: Apple and Google’s font size guidelines are given relative to their default system fonts, which are the Roboto font for Android and the New York and San Francisco fonts for iOs. If you’re using really thin or light typefaces, you may need to increase the size, and the opposite would apply for really heavy, extra-bold typefaces.

Headers
Large headings are great for creating visual typographic anchors on a mobile page. However, if you’re not careful, you can end up with a heading that takes up 4 lines with only 2 words in each line. The best result to aim for is a heading size that still contrasts clearly with the body text, while only taking up 2-3 lines.

System Fonts
As we mentioned above, Google and iOS operating systems have their own default system fonts. These will make your mobile website’s content appear more consistent with the operating system it is being viewed on, but it also stops you from creating a site that looks and feels unique. To get around this, you can try using the system default font for your body copy and a non-default font for the headings. Use our font pairing tools from the previous section to help you find a look that works best. (Don’t forget to consider brand consistency across channels!)

UX and SEO Impact

Yes, SEO is everywhere – even in your typographic layouts. We’ve touched on UX (User Experience) and how this relates to typography a few times already in this article, but not on how this affects your website’s SEO (Search Engine Optimisation) performance. While fonts and typefaces themselves are not a ranking factor for SEO, they do affect your user experience.

A good user experience (with clear, scannable, readable typographic layouts and CTAs) will lead to users spending more time on your site and make them more likely to click through to the site itself and to its deeper pages. Google uses these behaviours as cues and indicators for good, relevant websites, and will therefore be more likely to rank your site higher in search results. Who knew typography could have such far-reaching effects?

It’s amazing just how important and influential it can be on the performance and success of a website and the brand behind it. Don’t worry If it feels a little overwhelming, it’s nothing a little advice and guidance can’t fix. If you’re looking for help with a website project, our team of web designers and branding experts can help you get your typography exactly right for your brand and business goals. Just give us a shout on hello@designbyday.co.uk and tell us about your project.

 



WRITTEN BY

Victoria Simpson

PUBLISHED IN

Tips

RELATED ARTICLE

What is UX Design?