10 useful typography tips to improve your website readability

by Jean. 28 Comments -

Typography is often neglected on websites. This is a shame, because by improving your typography, you’ll improve both your website design and readability. In this article, I have compiled 10 extremely useful typography tips that will help you to make your website looks better.

Correct line height

One of the most common web typography mistake is definitely an incorrect line height. Line height define the height of a line of text, so it have to be set according on the font size.

As a rule of thumb, I always add 7px to the font size when setting line height on texts (with 12 to 15 pixels font size)

body{
    font-size:14px;
    line-height:21px; /* 14px + 7px */
}

Correct title margins

Another common mistake is an incorrect margin around titles. A title is related to a paragraph, it is not a separator between two paragraphs. This is why a title should have a wider margin on top than on its bottom.

Don’t use too many different fonts

In order to keep your website readable and professional, you shouldn’t use more than 3 different fonts. Using too many fonts can be confusing for the reader and will make your website look cluttered.
On the other hand, using fewer fonts keeps your website clean and readable. You can use one font for headings, one for the text, and eventually another one for the logo or the subtitles.

Use monospaced fonts to display code snippets

If you’re a developer (like most persons reading this blog) you probably want to display some code snippets on your blog. If yes, please use a monospaced font to do so. So, what’s a monospaced font? It’s a font whose letters and characters each occupy the same amount of horizontal space.

So, which fonts should you use to display code snippets on a website? Courier is by far the most popular, but what about giving a try to most recent fonts such as Consolas or Monaco? And if you want even more choice, you should definitely have a look there.

Care about contrast

Even if your website have a great typography, another point to consider is contrast. If your page background is grey (#999999), then do not use a dark grey text (#333333) otherwise your content may be hard to read, especially for older people or people with visual disabilities.

Generally, excepted if your site is about hacking, black hat seo or gothic rock, you should use a light background and a dark font to keep a bright contrast and increase your site readability.

Keep underlined text for links

Since I’ve started using the internet twelve years ago, the default style applied to links by browsers is a blue text with an underline. Althought the blue is often changed to another color, the underline has been since recognized as the generic style for links. This is why you should never use underlined text for other things than links. Otherwise, this can be very confusing for your readers.

Create a library of styles

A simple and effective way to make your website visually stunning is create specific styles for specific usages. For example, what about creating a .warning CSS class to display warnings to your readers?

Hierarchize titles and text

In order to improve readability, creating a hierarchy consisting of titles, intro paragraphs and regular text is important because they allow your readers to visualize your articles and quickly access to the part that they’re interested in.

Don’t be afraid of white space

One of the best typography tip I’ve received is “Don’t be afraid of white space”. White space is not blank space nor unused space, it make your design clutter-free and professional. Many people love Apple’s website for that reason: It’s sophisticated but simple, and have lots of white space.

Use the right symbols

An important point to consider if you’re looking to improve your typography is the use of the rights symbols. For example, double prime symbols are often used instead of quote symbols.
Note the difference betwen the double prime verison:

He said "Hello".

And the same text, using quote symbols:

He said “Hello”.

Better, isn’t it? If you’re a WordPress user, you’ll probably be happy to know that your favorite blogging platform automatically transform double primes into smart quotes. Otherwise, you should use HTML entities as shown below:

He said &s;ldquo;Hello”.
  • http://peterchondesign.com peter

    I agree that this is perhaps the most over-looked element from web designers.

    As for the line height, wouldn’t it be easier to use “em” so that you don’t have to specify a px height (i.e. 1.42em)?

  • http://aloanuntilpayday.com valeriy

    HEy Jean-Baptiste Jung,

    I am a huge fan of your articles here. I believe you are a WP Guru. The visual impact of consistent Hierarchize titles and text
    provides for an page expectancy and consistency. This allows the users to predict how a page will look like and thus be able to visual future pages. This makes for a pleasure user experience and allows us to HOOK in the audience.

  • Anon

    Damn. I think you should add a note to your last tip about quotes. I *hate* when blog authors mess with quotation marks, *especially* in monospaced code blocks, the way you did. Not only is it INCORRECT to do so, because the code snippet is no longer verbatim from your source, you also can’t copy the text around without running into syntax errors. This is a problem for any code snippet. Imagine someone replacing all their quotes with “ inside of a snippet of HTML tags.

    The other reason I hate it is because there is no typographical advantage to using fancy-quotes. Your actual example makes the text look less readable, not more readable, when using a „ before punctuation. Using ” is perfectly clear every time, and looks the same on every computer back to 1975. A bottom quotation mark also means something different in different cultures. For instance, North Americans don’t actually use double low quotation marks when quoting, so you are adding extra potentially confusing information to your text (French language/culture actually uses angled brackets to denote quotation marks, which would be even more confusing to a global audience). Keep it simple and use the characters that we’ve been using since the typewriter.

    • http://www.wprecipes.com Jean-Baptiste Jung

      You’re definitely right that in code, we should always use regular characters that will not raise a syntax error when copy/pasted. The fancy quotes in my last example are not intended to be used in code snippets!

  • http://www.valeur.dk Emily

    I love good typography! I’ve encountered many websites that use incredibly beautiful and clean fonts – they’re so easy to the eyes. However there are still sites that use multiple fonts and colors. They look so crowded I just have to click the close button.

  • Ben Rolfe

    Hi, is there a reason you’ve used a bottom double quote (bdquo) instead of a right double quote (rdquo) in the “Use the right symbols” section, or is this just a fun example of unintentional irony? :)
    I’ve never seen this symbol used in English text before, and only at the beginning of the quotation in other languages.

    • http://www.wprecipes.com Jean-Baptiste Jung

      My mistake – sorry!

  • http://sovitdesign.com sovit Ranjitkar

    “Don’t be afraid of white space”. White space is not blank space nor unused space, it make your design clutter-free and professional. WELL SAID Jean-Baptiste. Great article liked it.

  • http://www.youtube.com/watch?v=x5fWPcmo6uk Jamie

    People who do not know the art of attracting your target audience may not be able to understand this. The tips you have presented are very basic but most web users ignore because they are not aware their importance.

  • http://ChiefAlchemist.com Mark Simchock

    As always, good stuff. Thanks again. Two things to add:

    1) Re: Don’t use too many different fonts

    The rule of thumb I use (from doing some print design back in the day) is that when mixing fonts one should be serif and the other san serif. For example, headline / title is serif and the body is san serif. Of course there are exceptions but if you believe in KISS it’s a no brainer rule that rarely fails.

    2) Be mindful of who is visiting the site and their typical screen resolution (and general screen quality).

    In other words, you might be on a uber-nice monitor but chances are that can’t be said for a typical site user. I’ve seen plenty of sites where the designer has little or no sense of such empathy. Yes. lack of proper line height is a red flag for no empathy as well.

  • http://www.akademy.co.uk Matthew Wilcoxson

    I think the easiest way to set line-height is with a unitless number . as in
    line-height: 1.4;
    Then it’ll change automatically to match whatever font-size you choose.

  • Studenthator

    RE: “Keep underlined text for links”.

    Absolutely. None of the links on your page are underlined – what is your reasoning behind that. To me (and to a colour blind person for example), it’s not immediately obvious that they are links.

    Just wondering… all great points though.

  • rtpHarry

    “Keep underlined text for links” – like this site does you mean? hehe. I think better advice is don’t reuse the style you select for the link on something else.

    I have had clients and “designers” insist on using the same colours and style for the links and other elements like bold text, headers, etc.

  • Mad Myche

    “Use The Right Symbols”

    How about use the right tag for quotes which also gives the quoted text some semantic meaning to the search engines

  • Richard Robertson

    I’d actually say I’m more comfortable with the straight quotes over the curved quotes in most situations. It really depends on the context. Especially say, in a code box.

  • http://two-red-cells.com Yvan

    I disagree on one minor point. PLEASE DON’T use HTML entities like “ and ”. Instead, save your document using the UTF-8 encoding (all modern editors support this) and just type in the correct characters. For Windows users a left double quote is Alt+0147 and the right one is Alt+0148.
    Doing so (a) makes your code much more readable; (b) Uses one-seventh of the space for each character; (c) won’t break XML if it’s stored in an XML document.
    Unless you expect your users to be on 7-bit terminals from the 1970′s or web browsers from the 1990′s, there really isn’t a downside.
    Try it today.

  • http://www.youtube.com/watch?v=x5fWPcmo6uk Jamie

    Other people claim that most viewers are only attracted by the graphics and photos you post on your site. I, on the other hand, believe that posting good contents and having good reads on your site can definitely keep more visitors.

  • http://MassachusettsWebDesigns.com Ryan DesRoches

    Great post – too often typography gets overlooked in web development, and I know I’m one of the offenders. So often I get too concerned with the layout, colors, SEO, and overall functionality of the site, and lose track of some of the basics – like making sure the user has an easy time reading it.

    Great content as always!

  • http://www.youtube.com/watch?v=uEr-DG7g__8 Jamie

    I am a number one fan of “contrast” when it comes to design. Having a contrast add beauty and highlights on the total outlook of the page.

  • http://businessboot.wordpress.com katherin

    Useful typography tips.
    Neat presentation is important so that readers can get your points(thoughts) clearly.
    By using graphics,images,attractive colors are helps to keep your blog more popular.Right typography is must for the website.

  • http://www.juantarrats Juan Tarrrats

    Great post, I am not programer, but I have been trying too learn as much on the subject , since I am Artist and Have the need too control everything I put my name too. It’s sickness I know≤ Most off the hints are common Graphic design rules, which you can choose to obey or not at anytime, but the line height type was a good one. Thank you for the post and continue great advice you give too us noun coding experts.

  • http://brisbane-handyman-how-to.com/info Andrew

    I agree that white space is great. Some WP themes I have used overdo the whitespace by default and is difficult to get around this without customising.

  • http://www.webdesigningarpita.wordpress.com arpita

    Useful typography tips.I get too concerned with the layout, colors, SEO, and overall functionality of the site, and lose track of some of the basics – like making sure the user has an easy time reading it.

  • http://www.webmatros.com WebMatros

    Regarding line heights, I subscribe to the same rule of thumb as you, but in a slightly different way. I add one third of the font-size to the line-height, which means 14px font gets 21px line-height.

    Another option that I’ve used often recently is Pearsonifieds Typography calculator, which uses some fancy fibonacci-math to calculate very very harmonic line heights matching BOTH the font size AS WELL AS the line length. The latters also has influence on the optimal line height.

    Cheers!
    Oliver

  • http://www.peak-marketing.dk/ Kristian

    I agree with this post (and of course have seen some things that we are not actually doing right). :-) It doesn’t help too that there are a lot of WordPress theme makers out there who don’t follow this themselves! I feel like since they are the one doing the themes, its there job to ensure that the typography of whatever their theme is, is good enough.

  • http://www.mybudgetbreak.co.uk Paul

    I’ve been playing around with typography and white space but I tend to scan a page for the bullet points and bold text. This list has been very useful as a guide.

  • http://www.carshowtime.com/ john

    thanks for that tips. that was good for maintaining my site.

  • http://www.type-ed.com Rachel

    WordPress does convert the primes to quotes, but not all the time. So I have to use HTML codes just in case.