10 Principles For Readable Web Typography

Advertisement

by Matt Cronin

Readability is one of the more important aspects of Web design usability. Readable text affects how users process the information in the content. Poor readability scares readers away from the content. On the other hand, done correctly, readability allows users to efficiently read and take in the information in the text. You want users to be able to read your content and absorb it easily.

In this post, we’ll explain some Web typography terms and how they play into readability; we’ll present numerous tips to help improve the readability of your content; and we’ll showcase very readable websites, layouts and articles.

You may also be interested in the following related posts:

The Terms, And What Each Means For Readability

There are many factors that play into the readability of text. There are also a number of terms, all very important. Here are a few of the more common Web typography terms and an explanation of how each term affects readability.

Hierarchy
Every typographic layout needs the essential element of hierarchy. Hierarchy defines how to read through content. It shows the user were to start reading and where to read through. It differentiates headers from body text. Although colors of text boxes can be used to contrast headers and body text, hierarchy refers to the difference in size between these elements. Hierarchy plays a huge part in how scannable a layout is. It is an important technique that needs to be mastered to achieve readable Web typography.

Screenshot
UXBooth uses a very clean hierarchy to achieve readable Web typography.

Contrast
Contrast is the core factor in whether or not text is easy to read. Good contrasts will make text easy on the eyes, easy to scan quickly, and overall more readable. On the other hand, poor contrast will force the user to squint and make reading the body text almost painful, not to mention a lot slower.

As shown in the following illustration, black on white is very readable. Black on white is obviously the standard contrast colors, and to achieve readable content it is good to stay in the range of black-on-white contrast.

Screenshot

This one, however, pink on blue, is nearly impossible to read. This example my be a little extreme, but it shows how such an awful contrast can have a major impact on the text. You probably won’t see websites using such poor contrast, but it still shows why you need to be very smart about it.

Screenshot

Line Height
Line height is a very common term meaning the space between individual lines of text. Line height is another factor in the readability of body text and even headers. Sufficient line height is especially important in Web design because it makes the text ultimately more scannable. Line height that is too short will cause users to squint while reading. If it is too large, the text will seem like separate bodies instead of grouped together as one.

Letter Spacing
Like line height, letter spacing affects readability in Web typography. Letter spacing is, as the name suggests, the space between each letter in words. In print layout, negative letter spacing is a common technique to add a more fun feel to the layout, but it should never be used in body text. In any text, letter spacing is an obvious factor in legibility.

Line Length
Line length is often overlooked in Web typography but should not be. Line length is, of course, the number of words per line. A good line length is one that allows the reader’s eyes to flow from the end of one line to the beginning of the next very easily and naturally.

The Keys to Readable Typography

Achieving readability is relatively easy; all it takes is to follow a few key practices. A readable Web page can go a long way with your users, and readability has a huge impact on their experience. Designing for the Web is all about making the user’s experience as pleasant as possible. Here are 9 tips that will help you work towards readability.

1. User-Friendly Headers
Headers are a key element in typography, Web and print alike. As mentioned, they are part of the text hierarchy and a major factor in scannable content.

First off, header size is just as important as the size of the body text. Going too big with the header with a large amount of content can throw the user off balance when reading and cause them to lose their spot. It will ultimately ruin the flow of the content and be a distraction. Headers that are too small will ruin the hierarchy of the article, too. If the header is too small, it will not draw the user’s attention as it should.

Next, it is important to provide ample space between the header and body text.

2. Scannable Text
I have already mentioned “scannable” text many times, and you have surely heard it elsewhere. Scannable text goes hand in hand with readable text. Making copy scannable consists of good use of headers, hierarchy and focus points to guide the user through the content.

So, what makes copy scannable? Well, there are many factors, most of which have already been mentioned. Header size and position, body text size, text line height, text contrast and the way focus points are differentiated all impact how scannable copy is.

Focus points are certain elements or objects within the layout that attract, or are supposed to attract, the user’s attention. This could be a header, a graphical element, a button, etc.

3. White Space
In content-heavy layouts, spacing contributes to the readability of content. White space helps to offset large amounts of text and helps the user’s eyes flow through the text. It also provides separation between elements in the layout, including graphics and text.

In the example below, white space and only white space is used to separate text elements. The layout is very clean and efficient. The user’s eyes flow from text element to text element with ease, because of the large amounts of white space.

Screenshot

4. Consistency
Consistency is often regarded as an important technique for usability, but it also applies to readability. Consistency in the hierarchy is important to a user-friendly layout. This means that all headers of the same importance in the hierarchy should be the same size, color and font. For example, all <h1> headers in an article should look identical. Why? This consistency provides users with a familiar focus point when they are scanning, and it helps to organize the content.

5. Density of Text
Density of text refers to the amount of words you place in one area. Density of content has a major impact on your content’s readability. Density is affected by spacing options such as line height, letter spacing and text size. If you find a balance between all of these so that the content is neither too compact nor too widely spaced, you will have perfect density that is both readable and scannable.

6. Emphasis of Important Elements
Another key factor is emphasis of certain elements within the body content. This includes highlighting links, bolding important text and showing quotes. As mentioned, focus points are essential in Web typography. By emphasizing these objects, you provide focus points for the user. These points and objects help break up monotonous text.

Scannable text is extremely important. By providing these focus points,, you make the body text extremely scannable. Bolding key lines of text immediately attracts the user’s eye and is therefore a very important element in presenting important information.

Pictured below is an article from UXBooth. This article uses bolding and italics to point out important information in the article. This is a very readable article and very easy article to scan for information.

Screenshot

7. Organization of Information
Believe it or not, the way you organize information in an article can strengthen readability. Users are guided with ease through content that is properly organized because information is easier to find. This veers into issues beyond the scope of this article but is still very important.

8. Clean Graphical Implementation
Every text body needs some sort of visual support, be it an image, icon, graph or illustration. Placing the graphic in the article can be challenging. Sufficient space is needed between the graphic and text.

If the graphical element is an image, then a clean border is a good idea for providing a clean separation from the text. Borders can help guide the user’s eyes and are good for adding style to content. It is important, however, to keep borders in content simple. They should have a subtle color palette and shouldn’t be too large.

In the case of graphical elements such as icons and illustrations, space is the only separator that should be used. The content should move cleanly around the graphic without disrupting the text.

9. Use of Separators
Separators are a simple and easy way to divide text into sections in a clean and organized manner. They can be used to divide hierarchy elements, such as headers and body text. They can also be used to divide content into sections.

The simplest form of divider is a single line. These are most often used to divide hierarchy elements and are very useful for making subtle divisions that still play a big role in readability.

Another common way to divide content is to use boxes. Text boxes are excellent for separating unrelated content on a single page. They help move the user’s eyes through a complex layout. Below is an example of this on Pixelmator’s website. It uses boxes to separate content in a clean way. Notice how the boxes are defined by their background instead of a border.

Screenshot

10. Good Margins
You hear people say that you should use white space, but why? White space actually helps draw the user’s eye to the text. The blank area (white space) forces the eye to focus on the text. So white space will influence the flow and readability of content. Margins are one of the best white space elements and support text elements well. Margins on either side will force the user’s eye to focus inward on the core content of the article.

Margins also support the article in another way. They help separate content from the rest of the design and layout. Text shouldn’t bleed into other layout elements, especially if it is a long article. Margins help define the article and its separation.

In the grid-based layout below, margins and only margins are used to set apart bodies of text. The result is a clean, clear and concise page.

Screenshot

Effects To Give Typography Some Flair

For the most part, text is text, simply words on a plain single-colored background. Not too complex, but it works. Occasionally, though, the text layout will need some styling and decoration. This may be a header or typography used in the overall design of the website (as opposed to the article content). No matter what the form, it is important to always stay within the limits of readability. Yes, it is essential to be creative and use decorative styling, but the typography must be legible or else it becomes almost useless.

Fancy Text
One good way to style typography is to use a fancy or unique font within the layout along with standard fonts. It is important to use simple and standard fonts for body text, but using fancy fonts elsewhere is an easy way to mix it up and add a little more to the theme. Using a single font throughout the entire website gets boring and, although readable, shouldn’t be done.

Letterpress
Another very common form of Web typography styling is letterpress. The example below uses a letterpress technique to add depth and embellish the layout. It looks very nice and flows cleanly, and the text is still completely readable.

Screenshot

Style the Background
Adding a nice background can be just as effective as styling text. By decorating the text body background, you are styling the text. Styling the background can be visually beautiful but can also reduce legibility. This is potentially a big problem but easily avoidable.

Keep the Contrast
First and foremost, it important to keep contrast within a readable range. For the background, use colors that are much subtler and duller than those of the text. This will allow the user’s eye to focus on the text and not be distracted by the background.

Textures Work Nicely
The best road to take with the background is to use a nice texture, which won’t detract from the typography.

Here is a dark website with a good typographic style. The typography has a decorative background, but the contrast still works nicely. The text itself has no styling, but the background makes up for it.

Screenshot

This is another great texture that supports the typography. The background texture resembles a canvas, and the typography takes on the form of a watercolor.

Screenshot

Link Styling
Within long text, links are one more type of focus point, and you should find a way to make them pop. In sum, the best way to do this is to use underlining, a different color than the body text, italics and a different font. You can combine these to great effect or just use one. The example below underlines and uses a different color for links.

Screenshot

Showcase of Help Elements

Help elements are integrated in many websites, and you often don’t notice them. Here are a few examples of usable help elements.

Blog Articles
Readability is important in blog articles especially. Here are a few excellent examples.

PSD.TUTSPLUS
PSD.TUTSPLUS and every Envato blog have very readable content. This particular example showcases a good use of headers in a well-structured hierarchy.

Screenshot

AppStorm
This website uses very good colors and header sizes to show hierarchy, and the articles flow very smoothly. Also note the significant amount of spacing above each sub-header.

Screenshot

Macalicious
This article makes good use of alternating colors in its headers. The body text is also very readable and has a legible contrast.

Screenshot

Tutorial9
Pay attention to how this article on Tutorial9 provides a good amount of spacing and a nice border around images. The text flows, and the image doesn’t detract from the text.

Screenshot

Fuel Your Creativity
Articles on Fuel Your Creativity have very smart spacing between the headers and sub-headers. The white space supports the text.

Screenshot

Good Graphics Use
The following examples show how to make graphic elements support the readability of the content.

Apple
Apple’s core content plays very nicely with the visual layout. All images blend into the background of the website. This allows for a visually pleasing layout that flows smoothly and looks awesome.

Screenshot

Pixelmator
The layout of this page is perfectly spaced. The text moves around the image.

Screenshot

Checkout App
This beautiful and minimalist website uses detailed icons to support the titles and information. The icons improve the scannability of the content.

Screenshot

Highrise
A readable and scannable layout that packs a large amount of information into a clean layout. They also use large icons as focus points.

Screenshot

Mint
This is an all-around beautiful website. It uses a significant amount of white space, dashed divider lines and large visuals.

Screenshot

Kupferwerk
Nice images between paragraphs and good borders around images.

Screenshot

Web Designer Wall
A well-spaced image layout, with a slight but noticeable border and ample padding, which looks great.

Screenshot

Well-Styled Typography

The following examples show creative uses of typography.

IAAH
Fancy header text and a good background highlight the body here.

Screenshot

OakesDesign
Good contrast of typography and color makes for a striking website.

Screenshot

The Cosmic Machine
An example of letterpress that fits the style of the website.

Screenshot

Web Designer Wall Job Board
This text is well styled. The sketched style works nicely with the rest of the website and is still completely readable, because the sketching texture is used only for text and does not disrupt it.

Screenshot

Bern
This is a good example of typography used cleanly in a grunge layout. You may notice that the letterpress style is also used here.

Screenshot

Digimurai
Here is an example of styled typography with a good hierarchical structure beyond the article.

Screenshot

Product Planner
This header has a clean gradient that contrasts well with the dark background.

Screenshot

Paramore Redd
More simple but beautiful text effects.

Screenshot

Tao Effect
A beautiful and scannable layout, with icons and different text styles to break up the article.

Screenshot

Take the Walk
Readable but strongly textured text.

Screenshot

Flash Gaming Summit
Good coloring and a perfect hierarchy.

Screenshot

Brynn Sheperd
A header hierarchy similar to what you would find in a print layout, but it flows seamlessly here.

Screenshot

Northtemple
Using images for text is another excellent technique.

Screenshot

Miles Dowsett
Extremely beautiful typography, with a nice background, a good color pallet and plenty of focus points.

Screenshot

Design Loom
Good frilly typography that flows with the illustration.

Screenshot

Powerset
Another example of letterpress style.

Screenshot

Matt Dempsey
Amazing typography with a painted background.

Screenshot

Carbonica
A sketched style that works with the rest of the website.

Screenshot

Gary Nock
One last example of hand-drawn text, this time on a paper background.

Screenshot

Related Posts

You may also be interested in the following related posts:

(al)

↑ Back to top

Matt Cronin is an avid graphic designer, web designer/developer, Cocoa programmer, photographer, digital artist, and the like. He also enjoys writing, and does quite a bit of writing for Smashing Magazine. He is currently working on a startup called VAEOU, which will have new services coming soon.

  1. 1

    Very interresting! Will make a good use of those tricks!

    0
  2. 2

    Very good list, delicioused it for a time when I need some typography inspiration

    0
  3. 3

    Very good list. Thanks Smashing!

    1
  4. 4

    Excellent post. I love having all of the examples to draw from. Always good to have a reminder on what’s important in typography.

    0
  5. 5

    Maurivan Luiz Padilha

    March 18, 2009 6:52 am

    Great Article :]
    Excellent post about typography.

    Congrat’s!

    []‘s
    M!

    1
  6. 6

    Very nice collection and article. v.good

    Ta muchos

    Tim

    0
  7. 7

    Thanks, very usefull

    0
  8. 8

    Nice post. Very helpful.

    This is something web developers need to get a grasp on. It’s key in modern design.

    0
  9. 9

    For “Another example of letterpress style.” you got the link wrong.

    1
  10. 10

    great post, thanks!

    0
  11. 11

    Well done! Thaaanks!

    0
  12. 12

    Another great reference point to work from, thanks again guys!

    0
  13. 13

    On the subject of hierarchy (which can even be more important that font selection in regards to legibility…because you already chose a legible font, right? right?):

    It is often good to start with everything in the body text size. Headers, subheads, captions, etc…whatever your body text size is, set everything to that to begin with.

    Instead of automatically (read: indiscriminately) bumping font sizes up for headers or making your subheads bold, try using small-caps (just don’t get me started on how font-variant: small-caps isn’t real small-caps) or italics at the text size first, then – if it suits the text – tweak the font size or weight.

    Rule of Thumb: the bigger the text is, the lighter it’s weight should be, generally speaking.

    But, most importantly, the text itself should determine the nature of it’s layout. All too often have I seen designers layout a page with dummy text before even reading the content or, if content isn’t available in that stage, even attempting to understand what the nature of the content is. Sometimes big, bold sans-serif headers don’t work.

    Always ask yourself when setting text: What would do this text the most honor?

    1
  14. 14

    Thanks for this article, it’s a great resource to be used as guidelines on future sites. Recently learned about the Large Font Coalition, too, which appears to be a group devoted to many of the same principles!

    0
  15. 15

    Good article & some great showcase. Thanks for sharing.

    0
  16. 16

    I came buckets. Awesome article with stuff that although it has been covered gazillion times already never can be stated enough: Contrast, whitespace, contrast, whitespace. Rinse, repeat, learn. :3

    0
  17. 17

    theothermichelle

    March 18, 2009 10:29 am

    Sorry to nitpick but the correct term in this context is “legible” :)

    (Even though “readable” can be defined as being legible, its primary meaning is something that’s enjoyable/interesting/easy to read whereas legible’s primary definition is something that’s easy to read due to presentation, which is what you meant. )

    0
  18. 18

    Really nice post on typography.

    0
  19. 19

    Hi,

    I was rather ovewhelmed when I noticed our Devia Company Website being used as an example in this extensive article. I have to say that I’m impressed by the design which was made possible thanks to the poeple at Duoh!.

    Would you mind if I put up a reference to this article on the news section of the Devia Website ?

    Regards,

    Stefaan

    0
  20. 20

    Wicked article. You’re the only one who has been pretty thorough on this topic so far. Definitely referring to others.

    -1
  21. 21

    It’s worth mentioning, too, that the way the eye processes typography is very important.

    When your eyes look at a word, each letter makes up what can be called a “word picture”. When each letter is easily distinguishable, it makes for far easier reading, because the “word picture” is easy to understand.

    That’s why serif fonts (e.g. Times New Roman) are, by and large, easier to read than sans-serif fonts (e.g. Arial), because each letter can be distinguished easier. Words that are all capitals are most difficult to read because they have the exact same height, width (mostly), and volume.

    The funny thing with sans-serif fonts is that they’re actually meant for captions, yet it’s become the standard for many web pages. The irony, of course, is that it is a very poor font for readability purposes.

    Taking all this into consideration, some of the examples above are very bad examples of typography: Brynn Sheperd, Design Loom, Northtemple, Flash Gaming Summit and many others constantly use all capital letters, and sans-serif fonts.

    I suspect the reason why sans-serif fonts are preferred by designers is because it looks better as a design element, but that’s just my own personal gut feeling.

    1
  22. 22

    Craig, I’ve read in several places that what you mention applies to print, but in web it’s all the way round (sans-serif is better for copy, and serif for headings, etc.). I think it was because of the low resolution of computer monitors.

    0
  23. 23

    Excellent excellent excellent… wonder if you could email me your typography settings for smashing magazine that you use for your posts? heh =)

    0
  24. 24

    very useful article for me,nice:)

    0
  25. 25

    some of the images used in this article with white backgrounds.. like on Image [ 3. Navigation by browsing. ] clearly confused me ..

    I think the idea of border could be useful here..

    I appreciate the effort to write this wonderful article.. excellent job!
    Many Thanks

    0
  26. 26

    Abdulsalam Alasaadi

    March 18, 2009 9:48 pm

    حلو
    شكرا
    Thank u

    0
  27. 27

    genial! gracias!

    0
  28. 28

    A caution from an old geezer: Young designers with good eyes should ask someone with bad eyes about the legibility when departing from high contrast black and white. Sensitivity to lower contrast drops with age and probably with wealth. Many who test 20/20 with a B/W test card have difficuty with grays and colors. E,g., this message entry font requires me to use a glass.
    ===gm===

    0
  29. 29

    Thank you for this SM….needed some inspiration.

    0
  30. 30

    dugg, nice post guys it would have been nice to link to some tuts on the different typography effects listed.

    0
  31. 31

    You guys (or girls?) keep amazing me.

    0
  32. 32

    FYI – The link on the Matt Dempsey example goes to DesignLoom.com. Figured you’d might want to fix that.

    Thanks for the great article.

    0
  33. 33

    could someone recommend me a tutorial how to make that letterpress effect please? thank you!

    0
  34. 34

    Thanks, really inspiring!

    One question although…is there a good tutorial for the Letterpress typography?

    tnx!

    0
  35. 35

    Readability is one of the more important aspects of Web design usability

    Did you seriously just start an article with that sentence.

    0
  36. 36

    It is important in web design to have the right typography for people not only to recognise a unique design but to ensure that people can read what your are trying to promote on your web site. I read a good blog yesterday that ties in well with this that demonstrates the colours that should not be used together.

    Excellent examples of some truly lovely typography.

    0
  37. 37

    Typography is definitely one of the most important aspects of text based design on scree or off. It’s not easy either, especially for designers like myself who tend to lack enough appreciation for the textual aspects of a design.

    These little gems are really helpful and will come in handy as I go through the redesign of nomad-one.com, which is in dire need of some typo love!

    0
  38. 38

    Nice ideas, but the article itself is poorly edited. The title goes “10 Principles For Readable Web Typography” and you have to look hard to find the place where the list starts and where it ends. There’s a lot more information, but not well structured … and you have to keep trying to make out what is part of the text and what is an example (picture).

    Very hard to grasp and tragically misses precisely the point of readability …

    0
  39. 39

    Many good examples of how to make a text more readable…

    0
  40. 40

    Thanks for sharing such a useful informative article.

    0
  41. 41

    thanks for the share ^__^
    _________________________________________
    get your website optimized at Quintema

    0
  42. 42

    Those are some fantastic links to great typography. I really well written article as well. I found this website http://www.woodtypeimage.com that has some really good usage of photographed wood letterpress type and some really cool free vintage vector fonts and ornaments. Should check it out for sure.

    0
  43. 43

    A very useful article. thanks.
    tr-bilgi

    0
  44. 44

    This website contains high qualityt content, its my strong belife that if you want to get more visitors keep on writing high quality content like that found on this site.

    The thing is if you give people high qulity information they will keep coming for more. Keep it up.

    Matie from make-a-website-in-10-steps.com

    0
  45. 45

    good article thanks for posting it… ~_~’

    1
  46. 46

    It’s a very useful article.

    -1
  47. 47

    Really…you’re using number nine above to showcase good box design, when the GRAY text on a BLACK background is violating your rule of good contrast? Really? Yes, the boxes are set apart by their background while the entire design is hard on the eyes, with no white space, just like you say above. Sheesh.

    0
  48. 48

    Great article Matt, it’s amazing to see how much web typography has progressed over the last 5 years.

    0
  49. 49

    Hi, I just wanted to pass on a typographic error at the beginning of paragraph two.

    There is a line-break showing on my browser following “In this post we’ll” and on the second line “we’ll” is repeated following a large indent and semi-colon. When copied and pasted there is no issue with the text, so I’m guessing it’s not a copy issue. Just hoping you can pass this on to the correct person, then delete this message.

    Thanks, Mel

    0

↑ Back to top