Harry Roberts: Ten top tips for tidier type (on t'internet)

Published: October 25th 2013by Orde Saunders

Harry Roberts (@csswizardry) was talking about typography at #TIDE, these are my notes from his talk.

Dealing with websites is mostly type.

Writing used to be pictograms. Later we had alphabets and intricate manuscripts. (Printing.) We then had tools for writing - like the typewriter and we lost the individuality. As technology advanced the quality of type got much worse.

What is good typography

Allows the eye to move uninterrupted.
Clear and without distractions.
Stops the eye from tiring.

If it's done well you don't notice it at all.

1 Chose your face

With services like typekit, google fonts et al it is getting much better. Only use serifs if you have a large enough font size - the 100 easy to read standard. Need to take into account reading distance. Browsers were setting type at 16px which is about right for a screen - don't change it if you don't have to. Set type at a comfortable size for prolonged reading - particularly on screen.

2 Set your measure (line length)

Long line length tires the eyes. Aim for between 2-3 alphabets as a rule of thumb. About 40em is a good starting point - don't let your measure tire the eyes.

3 Setting your line height

(Not the same as leading.) Wide enough to focus on one line at a time. Don't get distracted by type from other lines. Line height of 1.4em is a good rule of thumb - 1.5 makes maths easier. As your measure increases, so should your line height. Don't pack lines too tightly or loosely.

4 The three major types of dash

Hyphen: double barrelled names, words breaking over lines, compound modifiers. (old ass banger <- where do you put the hyphen?)
En dash: denotes ranges and relations.
Em dash: separates clauses in a sentence. Set without spaces (or hair spaces). Some people use spaced en dashes but it all depends on the font. Two hyphens were used as a hack on typewriters.

5 Quotes

Typewriters introduced dumb (or ambidextrous quotes). Not 66s and 99s or 6s and 9s. Proper quotes sit with the type. Don't use dumb quotes. Spend time setting quotes and apostrophes. Pick a quoting style and stick to it - try and keep it sympathetic to the face.

[Missed where 6 appeared in the above.]

7 Primes

Primes are used in measurements and are not the same as single or double quotes.

8 Ellipses

Three dots - not three full stops.

9 Hung punctuation

Preserves the flow of text. Keep your left margin the same. Tires the eyes if not done. list-style-position: outside Either outset the bullets/quotes or inset the entire block. Don't inset bullets. Ever. Hang it into the margin where you can or create a new reading context.