Ten Top Tips for Tidier Type
#TIDE – Scarborough, 2013
Slide 2
Slide 2 text
Ten Top Tips for Tidier Type on t’Internet
#TIDE – Scarborough, 2013
Slide 3
Slide 3 text
Harry Roberts
@csswizardry
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
A brief history of writing.
Really , really brief…
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
What is good type?
Slide 14
Slide 14 text
It’s about allowing the eye to move uninterrupted.
Slide 15
Slide 15 text
It’s about being clear and without distractions.
Slide 16
Slide 16 text
It’s about stopping the eye from tiring.
Slide 17
Slide 17 text
The best typography goes unnoticed.
Slide 18
Slide 18 text
Choosing your face
1.
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Only use serifs if you use a large enough font size.
Slide 21
Slide 21 text
The 100% Easy-2-Read Standard
http://ia.net/blog/100e2r
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Do not
Set serif faces small enough that they lose clarity.
Change the browser’s default size without good cause.
Pick a face unsuitable for screen viewing.
Slide 24
Slide 24 text
Do
Choose a face with wide counters and bowls.
Keep an eye on serifs.
Set type at a comfortable size for prolonged reading.
Slide 25
Slide 25 text
Setting your measure
A.K.A. line length
2.
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
52–78 characters (2–3 alphabets).
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
.wrapper {
max-width: 40em;
}
Slide 30
Slide 30 text
Do not
Allow your measure to keep growing with the screen.
Slide 31
Slide 31 text
Do
Set a measure that doesn’t tire the eye.
Stick to the numbers where possible.
Slide 32
Slide 32 text
Setting your line height
Not the same as leading.
3.
Slide 33
Slide 33 text
Needs to be wide enough to focus on one line at a time.
Slide 34
Slide 34 text
140% (1.4) is generally pretty comfortable.
Slide 35
Slide 35 text
html {
font-size: 100%;
line-height: 1.4;
}
Slide 36
Slide 36 text
/**
* 1. Makes my maths a little easier.
*/
html {
font-size: 100%;
line-height: 1.5; /* [1] */
}
Slide 37
Slide 37 text
As the measure alters, so should the line height.
Prevent the eye making awkward ‘jumps’.
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
Do not
Pack lines too tightly.
Allow lines to oat apart.
Slide 49
Slide 49 text
Do
Make sure your line-height suits your measure.
Slide 50
Slide 50 text
The three (major) types of dash
Hyphen, en, and em.
4.
Slide 51
Slide 51 text
The hyphen
i.
Slide 52
Slide 52 text
-
Slide 53
Slide 53 text
The hyphen
Double-barreled names.
Words breaking over two lines.
Compound modi ers (e.g. a light-green dress).
Slide 54
Slide 54 text
‘I’m looking for an old ass banger.’
Slide 55
Slide 55 text
The en dash
ii.
Slide 56
Slide 56 text
–
Slide 57
Slide 57 text
The en dash denotes ranges. Slides 54–62 will teach us
all about the en dash.
Slide 58
Slide 58 text
Ranges
e.g. pp. 117–158, ages 7–12
Slide 59
Slide 59 text
Relations
e.g. New York–London, father–son
Slide 60
Slide 60 text
More*
Slide 61
Slide 61 text
HTML: –
Mac: Alt+-
Win: Alt+0150
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
The em dash
iii.
Slide 65
Slide 65 text
—
Slide 66
Slide 66 text
The em dash separates a clause—or separate train of
thought—within a sentence.
Slide 67
Slide 67 text
Set em dashes—like these ones—without spaces…
Slide 68
Slide 68 text
…or set them — like these ones — with hair spaces.
Slide 69
Slide 69 text
Never set them — like these ones — fully spaced.
Slide 70
Slide 70 text
Some people uses en dashes – like these – with spaces…
Slide 71
Slide 71 text
But it all depends on the face.
Slide 72
Slide 72 text
HTML: —
Mac: Alt+Shi +-
Win: Alt+0151
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
Do not
Use the hyphen for everything.
Slide 76
Slide 76 text
Do
Learn the di erences and uses for each type of dash.
Consider the face when choosing which to use.
A more attractive appearance is achieved by using
single quotation marks for the more frequently
occurring quotations, and the double version for the
less frequent occurrence of quotations
within quotations.
—Jost Hochuli
Slide 115
Slide 115 text
Do not
Nest the same quote marks.
Slide 116
Slide 116 text
Do
Pick a convention sympathetic to the face.
Slide 117
Slide 117 text
Primes
7.
Slide 118
Slide 118 text
I am 6'4"
Slide 119
Slide 119 text
Primes are not the same as straight quotes.
They are used to denote measurements.
Slide 120
Slide 120 text
I am 6′4″
Slide 121
Slide 121 text
I am 6′4″
I am 6'4"
I am 6’4”
Slide 122
Slide 122 text
HTML: ′ / ″
Mac:
Win: Alt+8242 / Alt+8243
Slide 123
Slide 123 text
Ellipses
8.
Slide 124
Slide 124 text
…
Slide 125
Slide 125 text
Ellipses are not three full stops.
But it could be worse.
Slide 126
Slide 126 text
No content
Slide 127
Slide 127 text
No content
Slide 128
Slide 128 text
HTML: …
Mac: Alt+;
Win: Alt+0133
Slide 129
Slide 129 text
Hung punctuation
9.
Slide 130
Slide 130 text
Hung punctuation preserves the ow of text, making it
quicker and smoother for a user to read.
Slide 131
Slide 131 text
No content
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
No content
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
ul, ol {
list-style-position: outside;
}
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
No content
Slide 140
Slide 140 text
No content
Slide 141
Slide 141 text
No content
Slide 142
Slide 142 text
No content
Slide 143
Slide 143 text
No content
Slide 144
Slide 144 text
No content
Slide 145
Slide 145 text
blockquote {
text-indent: -0.4em;
}
Slide 146
Slide 146 text
No content
Slide 147
Slide 147 text
No content
Slide 148
Slide 148 text
No content
Slide 149
Slide 149 text
Do not
Inset bullets. Ever.
Slide 150
Slide 150 text
Do
Hang punctuation into the margin where you can.
Otherwise hang it relative to the body of text.
Slide 151
Slide 151 text
Double spacing
Dante’s tenth circle…
10.
Slide 152
Slide 152 text
No content
Slide 153
Slide 153 text
No content
Slide 154
Slide 154 text
Do not
Double space your sentences.
Slide 155
Slide 155 text
Resources
Learn more about typography.
a.
Slide 156
Slide 156 text
The Elements of Typographic Style
—Robert Bringhurst
Slide 157
Slide 157 text
Detail in Typography
—Jost Hochuli
Slide 158
Slide 158 text
Twenty-Two Tips on Typography
—Enric Jardi
Slide 159
Slide 159 text
The Penguin Guide to Punctuation
—R L Trask
Slide 160
Slide 160 text
Wikipedia
http://en.wikipedia.org/wiki/Punctuation
Slide 161
Slide 161 text
Typography for Lawyers
http://typographyforlawyers.com
Slide 162
Slide 162 text
The Elements of Typographic Style Applied to the Web
http://webtypography.net
Slide 163
Slide 163 text
Ten Top Tips for Tidier Type
Harry Roberts – @csswizardry