Typography and design are battlefields strewn with the wreckage left behind by the life-and-death struggles of many theorists

Michael McBain, September 4, 2012

In a user-centric website design, ease of reading content is just as important as good design and a well-structured navigation system. So what makes type readable? For the main body text of a website, where readability is arguably the biggest concern, it’s actually a combination of a number of factors including:

• line length
• leading
• x-height
• typeface style
• careful choice of serif or sans
• type weight
• type size
• lack of character ambiguity
• margins and padding
• colour and contrast.

Line length

The number of characters in a line of text contributes to overall readability in a major way. If text is extremely wide, it can be intimidating and hard to read. The same is true of lines of text that are too short, which can stress the eyes of readers and cause confusion.

Line length can also make body text easy or difficult to read. You can determine the width of your body text frame – you can generally assume it as desktop, tablet or mobile size — and adjust type size to fall within a range of ideal character count.

While there are other factors that do come into play, these guidelines are a good place to start.

• Desktops: 55 to 75 characters per line, including spaces; ideal is closer to 65 characters per line
• Mobile Devices: 35 to 50 characters per line

A great tool that makes this calculation easier is the Golden Ratio Typography Calculator.

Leading

The amount of space between lines of text is equally important. For example, when reading this article, if each line of type touched the lines above and below it, you would have a lot of trouble comprehending the words.

Leading is often best defined as a percentage of the body text size and can be defined as a hard number or by using ems. Ideal leading values vary depending on the device:

• Desktops: 1.5 times the size of type
• Mobile Devices: 1.75 to 2 times the size of type

X-height

 

X-height is the vertical size of a lowercase “x” in comparison to the vertical size of an uppercase letter. Generally speaking, a taller x-height means increased readability. It’s a good idea to have an x-height that’s one pixel larger than half the body size – so a 12 point typeface would have an x-height of 7 pixels.

 

Typeface style

The style of typeface can affect readability as well. Simple serif and sans serif fonts are the most readable and scannable, while ornate styles, scripts and novelty typefaces are the most difficult to decipher.

Serif or Sans

While some traditional serif faces don’t translate well to the screen, others are excellent on-screen, and a serif’s more familiar shape makes it more comfortable and familiar for most people. Microsoft’s Georgia is an impressive achievement in font design because it looks as sharp and clean on-screen as most type looks on paper.

Type weight

Weight is also important because faces that are too dark can block up and become unreadable. Faces that are too light can experience drop outs, but light faces actually tend to look better because they look simpler, cleaner, and less chunky.

Type size

You can use any typeface, as long as you make it large enough. While 10 point body text is generally not a good idea on-screen, 14-16 point won’t look unusually large on a monitor, and will be significantly easier to read than smaller type. If you want to use smaller type sizes, then you have to be more careful about your choice of typeface.

Character ambiguity

It can be difficult to distinguish between the number “1”, capital “i” and lowercase “l” as well as between the lowercase “a”, “e” and “o”.  So the copy “1 Ill ocean” works well to test these characters.

 

In Myriad Pro and Gill Sans typefaces, there’s almost no difference between the capital “i” and lowercase “l”, and on Gills Sans, the number “1” is indistinguishable from the capital “i”.  Compare that to the clarity of Tahoma , which avoids ambiguity by adding serifs to the capital I and 1.

Margins and padding

As with leading, the amount of space around and between objects affects how well a user can read the actual words.

Colour and contrast

The colour of text against the corresponding background is significant as well. If you place green type on a green background it can be difficult to read. There is a reason most designers opt for light text on a dark background or dark type on a light background. The contrast makes lettering easy to read.

References

What makes type readable?
http://designmodo.com/text-readability/ (Carrie Cousins Designmodo 2014)

The best faces for the screen (Daniel Will-Harris, 1995)
http://www.will-harris.com/typoscrn.htm

The Golden Ratio Typography Calculator (Chris Pearson, Pearsonified, 2012)
http://www.pearsonified.com/typography/

Fighting bad typography research (Alex Poole)
http://alexpoole.info/blog/fighting-bad-typography-research/

5 Faces for UI Design (Dan Eden, 2013)
http://typecast.com/blog/type-on-screen-5-faces-for-ui-design

So, What Size and Type of Font Should I Use on My Website? Michael Bernard and Melissa Mills (2000)
http://usabilitynews.org/so-what-size-and-type-of-font-should-i-use-on-my-website/

Photo credit:  Sebastian Herrmann on Unsplash

When you’re writing content for your web pages, usability may not always be your first concern — but it should be! There’s no better example of this than the continued use of “click here” and “find out more” in link text. Here are five reasons why you should avoid using these generic calls to action when writing the links in your content.

1. It’s not informative

It’s an established fact that most people don’t really read the content of a website – they scan it. This applies to almost all written content on the web, and people tend to do it for a number of reasons, such as:

• • They are too busy to read something fully

• • They are looking for a specific piece of information, and once they find it they want to move on

• • There’s a lot of information out there that is competing for their attention

• • They might have other issues that make it harder for them to read content online, such as screen resolution, screen glare, tiny font sizes, contrast, etc.

When someone writes content for a website, they have to keep in mind that it’s probably not going tobe read except by those who have an inherent interest in doing so.

Most people are going to scan it instead, and when they do, certain things will jump out at them – links being one of them. Of course, that will depend on whether the web designer styled the links properly by making them underlined and a different colour from the surrounding text.

Yes, people scanning content will still see your link even if it says “click here”. But using “click here” as the link text doesn’t take that next step of telling them where the link is going to as they scan over it quickly.

The bottom line is that people like to – and want to – know where a link from your website is going to lead them. Using the words “click here” just doesn’t do that for them, and here’s a good example:

• • Bad – If you want to learn more about this, click here to read this article from the Sydney Morning Herald

• • Good – Learn more about this topic by reading this article in the Sydney Morning Herald

The second one tells people at a quick glance not only that there is a link, but that it’s to an article on the Sydney Morning Herald website. What does “click here” tell you? Only that a link is there for them to click on.

2. It’s not action-oriented

Most websites want people to take some action as a result pf their visit. People respond to action words, so keep this in mind by writing link text that encourages visitors to take the desired action. Here’s an example:

• • Bad – Enjoy what you see? Click here to subscribe to our blog for free updates!

• • Good – Enjoy what you see? Subscribe to our blog for free updates!

Notice the difference? The second one has the desired action contained within the actual link text, which will be much more obvious when someone is scanning the content quickly. Using “click here” doesn’t convey that desired action – again, it only tells them that a link is there for them to click.

3. It’s not SEO-friendly

Search engines such as Google use the strength of your links in their algorithm when they determine your placement in search engine results. While the number of links (both internal and external) on your website is important, how those links are worded can be just as important. Here’s an example:

• • Bad – Click here to read more articles from the Group Marketing Digital team

• • Good – Read more articles from the Group Marketing Digital team

The second one is the much-more friendly link. When you use “click here” as your link text, all that you’re doing is letting the search engines know that your content contains a link. If you want to also help them estimate how relevant that link is though, start using keywords in the link text instead.

4. It’s not accessible

People with visual impairments can’t always see the link: they rely on their screen readers to tell them what will happen when the link is clicked. If the link just says “click here” or “find out more”, they have no idea of knowing what will happen once the link is clicked. In addition, if there are several “click here” links on a single web pages, it can be extremely confusing for person with a visual impairment who is trying to scan the page for links.

5. It’s not modern

During the early days of the Internet, people defended the use of “click here” on the grounds that if it weren’t used, most people wouldn’t know what to do when they came across a link. Content writers came up with it as a solution that gave users the hint of what action they were supposed to take – literally, click here.

Needless to say, that’s drastically changed as more and more people have become familiar with websites in recent years. If you continue to use “click here” in your content, you can give your visitors bad impressions that you don’t want them to have, such as:

• • That you don’t respect their intelligence enough to know what a link is

• • That your website or the content on it hasn’t been updated in years

It’s important to make a positive impression through your website, and most people nowadays think that websites that still use “click here” are just plain old-fashioned. This is definitely not the impression that we want our website to convey to our users.

References

• • Stephanie Leary – Why click here is a terrible link and what to write instead.

• • Writing Hyperlinks, from the Nielsen Norman Group

• • W3C Quality Assurance team on “click here”

• • Smashing Magazine article on “click here”