Do’s and don’ts of typography

As so much of the content available on the web is text it’s essential for web designers to understand the basic principles of good typography. Having such knowledge allows designers to communicate more effectively, enabling them to create better designs and websites that are easier to use.

For more experienced designers setting text may come naturally but for those who are just starting out I’ve decided to put together a list of the basic do’s and don’ts. Not only will this list teach you the fundamentals but you can also use it as a check list to work through on future projects. Here goes:

 

DO establish a typographic hierarchy

A typographic hierarchy can be established by using a variety of methods such as size, weight, color, and contrast. Its purpose is to give pages structure and guide the user through the content. Without a clear hierarchy the text becomes much harder to scan and therefore generally harder to read. Just take a look at the examples below. On the left the text is one size and one weight so it’s hard to differentiate between headings and body text. Meanwhile, on the right, we have the same content but with a clear typographic hierarchy, so it’s much easier to distinguish between the different elements.

Here I’ve only used size and weight to establish my hierarchy but for even better results you can try to experiment with color and contrast as well.

hierarchy

 

DON’T make the text too small

Not everybody has 20-20 vision so it’s important to make sure that your body text is big enough for people to read comfortably. Personally I would recommend no smaller than a size of 14pt.

text size

 

DO choose an appropriate font for the body text

Another important factor when it comes to your body text is legibility. Although a typeface like Satisfy might suit a design with a hand-made aesthetic, using a typeface such as this for your body text will have a negative impact on your users. This is because it’s much harder to read than your average serif or sans-serif. Look at the examples below and you will notice how much harder your brain has to work in order to make out the words on the left compared to those on the right.

font choice

 

DON’T use too many different fonts on one page

Services like Typekit and Google Fonts may give you access to thousands of fonts but it doesn’t mean that you have to use them all. As you can see from the example below, unless it’s done really well, using multiple fonts can be very distracting. This is why I usually recommend using no more than 2 or 3.

too many fonts

 

DO give your text room to breathe

A lack of white space between each line can affect readability because it makes it difficult for the eye to track from one line to the next. However, this problem can easily be solved by increasing your line-heights, but be careful not to overdo it, too much space can also affect readability in a negative way.

line-height

 

DON’T make continuous use of all caps

People aren’t used to reading large chunks of text set in all caps and because of this it’s actually harder for people to read. Not only that but people often associate all caps with shouting or aggression and when it comes to marketing copy it can come across quite spammy. Due to this it’s important to think about how and when you’re going to use all caps and to make sure that you use it in moderation.

all caps

 

DO try and limit paragraphs to 40-60 characters per line

If a line is too long the reader gradually begins to lose focus and can often have trouble reading from one line to the next. If a line is too short it causes the reader’s eye to travel back too often, which disrupts their rhythm. This can also make them start reading the next line too soon, causing them to miss words from the previous line. This is why the optimal line length for body text is said to be around 40-60 characters per line.

characters per line

 

DON’T use large amounts of centered text

Centered text is difficult to read because the edges of the text block are uneven which makes it harder to scan because each line has a different starting point. Centered text blocks are also difficult to align to other objects on the page and are often considered to look quite amateurish. This is why, like all caps, it’s best to use centered text in moderation, opting for left aligned text as standard instead.

centered text

 

DO make sure there is enough contrast between your text and the background

Contrast is another aspect of typography that can affect readability. If there’s not enough contrast between the text and the background, the content can become illegible.

contrast

Do you have anything to add? What tips would you give new designers just starting out? Let us know in the comments.

  • Mulberry Interactive

    Nice article, it’s amazing how many people ignore the basics.

  • nancyseeger

    Great list of basics. It might be best not to use points as a measurement though, pixels to points is not the same size.

    • http://www.sivioco.com/ Sam Jones

      Very good point, thanks for bringing it up.

      • http://marybaum.com/ marybaum

        In fact, you might also want to use ems or rems, so your type can have some flexibility in fluid layouts, which work better for mobile-first and responsive design.

  • Travis Henson

    Thanks for the reminder on some of these! Its funny how you forget the basics time to time.

  • Travis Henson

    Thanks for the reminder! We sometimes forget the basics. The perfect example is the last example with contrast.

  • abhic

    Always good to review the basics; well presented.

  • http://www.sadurska.com/ Anita web design York

    Very useful article Sam, need to share this with my customers as a very good tip they should follow while updating their websites.

  • Edwins1984

    Nice article with the basic principles.
    Keep up the good work!

  • http://Updula.com/ Updula

    Great tips! Thank you.

  • http://www.blackbookoperations.com/ Black Book Operations

    easy stuff, basic knowledge, and indeed good to remind a lot of us out there that simply don’t give typography much thought

  • thefairystamp

    Loved it – Agreed with everything, but the character limitation to 40-60 per line. Weve seen the optimal length for web typography in 80 – 100 characters per line. Readers loose track of where they have been, because they never get into a fluid reading experience – they constantly have to get to the next line. This also makes the reader forget, that the content has to be read, not just looked at. But this character-limit thing has always been a hot topic.

    • http://tipigraphics.com/ Tzvi Perlow

      simply test it on a friend, make a 40-60 paragraph and an 80-100 one, tell them to read both. (make sure they are different, and both easy words to read) Time how long each takes, and ask them which was easier to read on a scale of 1-10.

      There is your conclusion!

      • thefairystamp

        well, thats what we did. We had a to develop a very content rich website and the designer had no experience with designing for the web. The Content ended up taking 20% of the maximum width on a desktop machine – readers couldn’t find the well written information inside the text and they very often didn’t even start to read, because they couldn’t really identify the text as valuable content. So we expanded the text to 80 characters per line – and you could literally see the user consuming the content on the analytics data.

        IMHO, every project and at the very end, every content has its own individuality – and its for the content strategist and the designer, to find out, how their audience will read. 40-60 is a very good guideline, but its not suited for every type of content.

      • http://marybaum.com/ marybaum

        If I’m hearing you right, the shorter measure made the entire text block too small to notice. I wonder if bumping up the type size to make the block bigger would have given you a still better result than you got with the long measure – not that it’s necessarily relevant, but I find a 100-character measure uncomfortable to read myself.

        The other caveat with a wide measure is what happens when the viewport narrows. If you’re not adding media queries – perhaps the client has balked at paying for responsive design, or doesn’t believe current mobile traffic statistics – that type is going to get very small. And while I’ve been telling folks to put on their glasses (in my head; I’m not that rude) for longer than you want to hear about, i do concede that it’s pretty tough to read type that if printed would be less than one point tall. Even on a retina screen.

  • http://www.sivioco.com/ Sam Jones

    Thanks for all of the comments everyone, much appreciated!

  • James

    If you’re a designer and found this helpful, do the world a favour and stop designing!

    • Rudi Baum

      LOL! So true

  • Hemanth Malli

    Very Useful post for the web designers.. Great tips on do’s and don’t. These are some basics many people miss it. I will utilize these basics in my future works.

  • Moi Torrijos

    Sam, what do you make of justified text?

    • http://www.sivioco.com/ Sam Jones

      Hey Moi, personally I’m not a fan of justified text and wouldn’t recommend it for the web – mainly because, unlike in print, we don’t appear to have many options in regards to controlling the way it’s displayed. Naturally with justified text rivers will appear within the copy and lines will get stretched and squeezed – issues which will obviously affect readability. I believe these can be partly solved by manually adding soft hyphens but to be honest it’s not something that I have much hands on experience of.

      An alternative option is using Hyphenator.js but again, from what I understand, this isn’t a complete solution either.

      What I would say is that if you can effectively solve these issues and justified text is suitable for the design then by all means use it if you wish. However, left-aligned will always be my first choice.

      • Moi Torrijos

        Excellent thank you.

  • http://www.technkl.com/ Nick Leffler

    A Do and Don’t list for typography but not a single appearance of Comic Sans, I was not expecting this. Here it is anyway: Don’t use Comic Sans, ever.

    • Benjie

      Comic Sans is not an inherently bad typeface.

      It’s used inappropriately by people who think it gives their text personality — a little like wearing a Homer Simpson tie to show you’re funny — which gives it a bad name.

      But if you’re setting text designed to mimic a comic strip, then it’s a perfectly acceptable choice.

      • http://www.technkl.com/ Nick Leffler

        Precisely my view on the matter of Comic Sans but I figured I’d wear the proverbial “Homer Simpson Tie” to the Do and Don’t party.

  • http://tipigraphics.com/ Tzvi Perlow

    Great article Sam!

    I’m gonna show this to ALL of my clients as part of my ‘Article Project’ ;)

    Wanna know what my so-called ‘Article Project’ is?

    Simple! Educate your clients, they will trust much more when you seem to be all intelligent and reading fancy articles ;), and they will accept it and be quicker with it because they understand it.

    Simply keep all the good articles about basic rules, shorten them and cut the pieces you don’t want (leave author name and link IN), then save as a PDF.

    The next time you make a contract, add that as a required read on the customer’s part ;) (obviously depending on how much of a sport your client is, otherwise just email it to him, and recommend him to read it, and that it will improve his perspective).

  • http://www.technkl.com/ Nick Leffler

    That article was amazing, thank you for sharing it. I think everyone should read that article, designer or not. Well written as a memorable story AND makes a great point. I shall never again knock Comic Sans, not even in jest.

  • MR AG

    very great information.. thanks

  • Nickie O’Brien

    I enjoyed this immensely. I wish everyone would follow this basic guides because I have some severe vision problems so typography is very important.

  • GOOJAS!

    i once saw an article that had impact as a body text. I stopped reading the article.

  • Yogi

    Really good article, it covers basic of typography. Thanks :)