improve the legibility of your type on the web

1

People come on your website to read the content - NOT study your pretty colour

scheme or drool over illustrations

You therefore better make sure the reading experience is great!

Your aim for every site is to make your content legible and readable.

2

Episode 26: Don’t make these typography mistakes - make your content easier to

read and more legible

Full video at www.webpayload.com

3

Overview

95% of the information on the web is written language. It is only logical

to say that a web designer should get good training in the main

discipline of shaping written information, in other words: Typography.

Written in 2006 but still holds true

4

1.) Leading (Line Height in CSS)

5

1.) Leading (Line Height in CSS)

p{ Line height: 24px}

p{ Line height: 1.5em}

OR

Full video at www.webpayload.com

6

2.) Contrast

✓ The most contrast that is possible is white text on a black ground or black text on a white background.

✓ Black text on a white background is too much contrast and is actually harder to read according to some studies.

✓ Try having a dark grey.

✓ My own little twist to that is add in a very slight colour variation with brand colours. Hardly noticeable.

7

3.) Typeface

✓ There are literally thousands of type faces available.

✓ Jason Santa Maria’s advice is to learn a few and know them well

✓ When choosing a typeface the absolute first question is - Can i read this well and is it legible.

✓ That question comes way before nonsense like “Is it pretty?” “Does it suit our style?” Functionality comes before form every time.

✓ My personal favourite web fonts are Adelle, Jubilat, Museo all from Typekit.

8

4.) Not enough space - cramped

9

5.) General sizing

10

5.) General sizing

11

6.) How many character per line?

✓ Contradicting studies on this but certainly no more than 100 characters per line is my advice.

✓ Any more than it makes hard to read

✓ For very large monitors you can easily restrict length by using max-width property.

Full video at www.webpayload.com

12

7.) Justified text?

✓ Maybe for page titles, maybe

✓ Never for body content - it’s hard to read!

13

Pro Tip

✓ Custom fonts may have a harsh edge

✓ Sort by using either : h1{ -webkit-font-smoothing: antialiased;}

h1 { text-shadow:0 0 1px transparent;}

h1 { text-shadow:1px 1px 1px #f5f5f5, 0 0 1px transparent;}

You can have multiple text shadow properties, not restricted to one