Most people visit your website to read the content, which means focusing on the text. While the right design and colour elements can catch their eye, the text is what matters most of all. So on any site, typography plays a major role in readability, user experience, perceived article length and more.

A ‘responsive’ website can be easily accessed and read from any device whether it’s a laptop, desktop or smartphone. Almost 40% of people say they would stop engaging with a website if it took too long to load, while 38% of users would leave a site if it was poorly designed or unattractive.

Clearly then, designers must create sites that look fantastic and are accessible via any device. Using typography to its full potential gives your website the best chance of success. In this post, we’ll share some typography tips for a truly effective, responsive site.

Design by akdcreative

1. Make the typeface appropriate

Typography is one of the key aspects of aesthetic web design, but with around 650 fonts to choose from, picking the right ones for a responsive site can be challenging.

A lot of websites use the same fonts like Helvetica and Arial. But it’s a much better idea to align the typeface with your brand message.

For example, a fun font such as Little Miss Priss works perfectly for a site selling children’s books. On the other hand, a serious news website wouldn’t use Comic Sans.

Consider your brand and its target audience, and find an appropriate, readable typeface that suits your topic.

Design by W.R.

2. Convey the right relationship within the text

Have you ever visited a website that used the same typeface throughout? You’ll know that it gets tedious very quickly, as your eye gets tired from reading what soon seems like a wall of text.

You need to use different fonts and text size to highlight important points, break up the article and generally make it a more pleasant experience for the reader.

For best results stick to 2-3 fonts, including those for:

  • Headings and subheadings – you can be a little creative here since this font will only be used sparingly. This is your opportunity to draw the reader’s eye to the page. Use the same font for subheadings and headings, just make sure the font is a size smaller between them.
  • Body text – this is the main font, so choose an easy-to-read sans-serif font. Avoid all-caps or cursive fonts as they are tough to read for more than a sentence or two.
  • Navigation menus – again, the menus must be easy to read, so try a sans-serif font.

Design by Biancoceleste

Remember, following good typography principles enables you to change the layout of a page’s content without disrupting the meaning. Although you should prioritise mobile users, don’t completely ignore desktop and laptop visitors too.

3. Increase font size

Obviously you can’t have 22px font size in the main body of your text, but don’t be afraid to go as high as 16px if necessary. The more important the content, the larger the font size.

When you learn to use font size to your advantage, you can quickly inform visitors about the purpose of your site and highlight key areas of content.

4. Don't rely on colour

Web designers can be guilty of adding unnecessary colour combinations to websites. Often the colours don’t mix with either the text or background of pages. As a result, the text becomes almost unreadable, which can put off a lot of visitors.

Flat UI colours are a good choice because they’re light and aren’t painful to the eyes. It's often said the best designs should be able to work well without colours, so test the website without colours to begin with. If the message is loud and clear and the site is readable, you’re on the right track.

Design by Mike Barnes

A white background can actually make information harder to read in some cases, as it gives off a strong glare. Instead find a soft hue for your website’s background, as it enhances readability and also gives your brand some extra personality.

Colours should be used to emphasise information and can be a fantastic design tool; just don’t rely on them.

In a nutshell…

A responsive website should be accessible, clear and user-friendly, while still effectively promoting your brand. There are hundreds of fonts to choose from and thousands of typography options – so use your imagination to help your site stand out from the crowd.

Camille Franc, EU Marketing Manager at 99designs. 99designs provide entrepreneurs and small businesses with quality and affordable design solutions (logo design, web design, print...) which help thousands of businesses and start ups build their brand identity each year.