Slide 1
Slide 1 text
95%
Slide 2
Slide 2 text
Good type,
bad type
Slide 3
Slide 3 text
Good type is
ten years old!
Slide 4
Slide 4 text
Paul Irish
Googler
Wrote first
bulletproof
@font-face CSS
September 2009
Slide 5
Slide 5 text
Good type
sings your
song.
Slide 6
Slide 6 text
No content
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
Good type
loves your
reader.
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Let’s open up the leading.
p {
line-height: 1.3;
}
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Let’s mind our measure.
p {
max-width: 66ch;
width: 55ch;
}
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Let’s space out these subs.
h3 {
margin: .5em 0;
}
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Let’s vary
subhead colors
and weights.
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
So.
Slide 23
Slide 23 text
How do we
pick type for a
whole site?
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Now, we’re not going to
use Aviano as a text
face.
Can you imagine
reading this for even
one more bullet?
Slide 26
Slide 26 text
What about
the ?
Slide 27
Slide 27 text
What goes
with
Slide 28
Slide 28 text
Aviano?
Slide 29
Slide 29 text
Serif:
Orpheus Pro
Baskerville Old Serial
Goudy Old Style
IvyJournal
Made Coachella
Millard
Sans:
Sharik Sans
Foco
Haboro Contrast
Struktur Pro
Quiche Sans
Slide 30
Slide 30 text
Sharik
Sans.
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
Dionisio
Aviano
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
What about
the ?
Slide 36
Slide 36 text
We’re not going to
make people read a
long screed in aviano.
And even with five weights, Dionisio’s not
much better.
Slide 37
Slide 37 text
Serif:
Orpheus Pro
Baskerville Old Serial
Goudy Old Style
IvyJournal
Made Coachella
Millard
Sans:
Sharik Sans
Foco
Haboro Contrast
Struktur Pro
Quiche Sans
Slide 38
Slide 38 text
How about
Slide 39
Slide 39 text
Orpheus Pro?
Slide 40
Slide 40 text
We’re not going to
make people read a
long screed in aviano.
And even with five weights,
Dionisio’s not much better.
Orpheus Pro is normal enough to
read — and has subdued serifs.
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
One serif.
One sans.
Slide 48
Slide 48 text
One serif.
One sans.
One weird.
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
One serif: Cabrito Light.
One sans: Raleway.
One weird: Raleway Black (our
stand-in). (We use it sparingly.)
Plus Cabrito Bold for some other
subheads.
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
One serif: Cabrito Light.
One sans: Raleway.
One weird: Raleway Black (our
stand-in). (We use it sparingly.)
Plus Cabrito Bold for some other
subheads.
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
So. What are
we really
saying here?
Slide 60
Slide 60 text
Start with the logo.
Slide 61
Slide 61 text
Liven up the palette:
One serif,
One sans,
One weird.
Slide 62
Slide 62 text
Tweak the CSS for easy
reading.
Slide 63
Slide 63 text
p {
line-height: 1.3;
max-width: 55ch;
}
Slide 64
Slide 64 text
em,
strong {
color: contrasting;
font-family: weird;
font-weight: 700 or bolder;
}
Slide 65
Slide 65 text
a {
border-bottom:
underline,
highlight or anything
other than just color;
}
Slide 66
Slide 66 text
a: focus {
border: highlight,
strikethrough, whatever —
some way users know
where they are;
}
Slide 67
Slide 67 text
Where?
Slide 68
Slide 68 text
Let’s build a
type library on
a budget.
Slide 69
Slide 69 text
Subscriptions.
Slide 70
Slide 70 text
Adobe type.
Included in every plan;
$10/month cheapest.
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
Monotype.
$10/month, fonts.com or
$118/year, myfonts.com
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
Bundles.
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
Sales and deals.
Fontspring.
Myfonts.
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
Free families.
Font Squirrel.
Google Fonts.
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
Mary Baum
_ @marybaum
$ marybaum
j marybaum
racquetpress.com