Slide 1
Slide 1 text
Beautiful
Web Typography
Slide 2
Slide 2 text
Mel Choyce
PRODUCT DESIGNER AT AUTOMATTIC
@melchoyce
melchoyce.design
Slide 3
Slide 3 text
INTRODUCTION TO
Beautiful Web Type
Slide 4
Slide 4 text
Web Design is 95%
Typography
— Oliver Reichenstein
“
Slide 5
Slide 5 text
National Geographic http://www.nationalgeographic.com/mag...
TYPE ON THE WEB
Slide 6
Slide 6 text
Ghostly Ferns http://ghostlyferns.com/
TYPE ON THE WEB
Slide 7
Slide 7 text
FCINQ http://www.fcinq.com/
TYPE ON THE WEB
Slide 8
Slide 8 text
Wired http://www.wired.com/
TYPE ON THE WEB
Slide 9
Slide 9 text
Seedlip https://www.seedlipdrinks.com/
TYPE ON THE WEB
Slide 10
Slide 10 text
NASA Gene Lab http://genelab.nasa.gov/
TYPE ON THE WEB
Slide 11
Slide 11 text
can make their type
ANYONE
LOOK GOOD
Slide 12
Slide 12 text
INTRODUCTION TO
Typographic Principles
Slide 13
Slide 13 text
Picking
Pairing
&
Slide 14
Slide 14 text
Picking
Pairing
&
Slide 15
Slide 15 text
think about
Tone
Slide 16
Slide 16 text
Neutral Stylized
>
Slide 17
Slide 17 text
Pick body fonts with
multiple weights
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Picking
Pairing
&
Slide 21
Slide 21 text
One typeface,
multiple weights
Slide 22
Slide 22 text
Meet WordPress
WordPress is open source software you can use to create a
beautiful website, blog, or app.
Slide 23
Slide 23 text
Meet WordPress
WordPress is open source software you can use to create a
beautiful website, blog, or app.
Slide 24
Slide 24 text
Sans + Serif = ❤
Slide 25
Slide 25 text
Meet WordPress
WordPress is open source software you can use to create a
beautiful website, blog, or app.
Slide 26
Slide 26 text
Meet WordPress
WordPress is open source software you can use to
create a beautiful website, blog, or app.
Slide 27
Slide 27 text
Pick a Family
when in doubt
Slide 28
Slide 28 text
Meet WordPress
WordPress is open source software you can use to
create a beautiful website, blog, or app.
Slide 29
Slide 29 text
Meet WordPress
WordPress is open source software you can use to create a
beautiful website, blog, or app.
Slide 30
Slide 30 text
Meet WordPress
WordPress is open source software you can use to
create a beautiful website, blog, or app.
Slide 31
Slide 31 text
Use decorative headers
Sparingly
Slide 32
Slide 32 text
Borrow Pairings
still worried?
Slide 33
Slide 33 text
Beautiful Web Type http://hellohappy.org/beautiful-web-type/
TYPEFACE PAIRINGS
Slide 34
Slide 34 text
Google Web Fonts Typographic Project http://femmebot.github.io/google-type/
TYPEFACE PAIRINGS
Slide 35
Slide 35 text
Typewolf http://www.typewolf.com/
TYPEFACE PAIRINGS
Slide 36
Slide 36 text
Font Pair http://fontpair.co/
TYPEFACE PAIRINGS
Slide 37
Slide 37 text
Size
Slide 38
Slide 38 text
don’t make me
SQUINT
Slide 39
Slide 39 text
14-22
px body fonts
Slide 40
Slide 40 text
Line-height
Slide 41
Slide 41 text
1x
is so, so sad.
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
1.4-1.6x
for body fonts
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
1.2-1.4x
for header fonts
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
body {
font-size: 1em;
line-height: 1.5;
}
h1, h2, h3 {
line-height: 1.3;
}
Slide 48
Slide 48 text
Line-length
Slide 49
Slide 49 text
45-75
characters per line*
* including spaces and punctuation
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
More
sometimes
is okay
Slide 52
Slide 52 text
Less
sometimes
is okay*
* especially on smaller screens
Slide 53
Slide 53 text
Balancing Act
Slide 54
Slide 54 text
Style
Slide 55
Slide 55 text
only center
short text
Slide 56
Slide 56 text
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit. Quisque
quis feugiat ex. Aenean
nec ipsum non lacus
malesuada consectetur id
eu dui.
Praesent commodo nisi
sed est semper fringilla
euismod ac diam.
Maecenas dui dui, lobortis
ut blandit vel, tempus sed
ante. Fusce sit amet
auctor odio.
Quisque dolor libero,
vulputate vitae justo nec,
molestie lacinia neque.
Maecenas a vehicula
sapien. Praesent odio
nulla, laoreet a dapibus ut,
blandit nec ipsum.
Slide 57
Slide 57 text
only all-caps
short text
Slide 58
Slide 58 text
avoid
justified text
Slide 59
Slide 59 text
only underline
links
Slide 60
Slide 60 text
limit your # of
font styles
Slide 61
Slide 61 text
don’t use
100% black
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
INTRODUCTION TO
Using Fonts in WordPress
Slide 64
Slide 64 text
pick a
Source
Slide 65
Slide 65 text
figure out your
constraints
Slide 66
Slide 66 text
Self-Hosted?
Cloud-Hosted?
Slide 67
Slide 67 text
figure out your
budget
Slide 68
Slide 68 text
No budget?
Small budget?
Large budget?
Slide 69
Slide 69 text
Free Hosted Service
Slide 70
Slide 70 text
The Good
Free!
Slide 71
Slide 71 text
The Bad
• Not as many high-quality options
• Limited styles/weights
• Limited character sets
• Limited multi language support
• Often overused
Slide 72
Slide 72 text
Paid Hosted Service
Slide 73
Slide 73 text
The Good
• Support
• Higher quality fonts
• More likely to find extended character sets
• More likely to find multi language support
• More likely to be both good and unique
Slide 74
Slide 74 text
The Bad
• They cost money
• Might have to pay based on traffic
• More licensing restrictions
Slide 75
Slide 75 text
Self-Hosted Service
Slide 76
Slide 76 text
The Good
• Totally customizable setup
• Can remove characters to reduce font size
• You “own” your fonts
Slide 77
Slide 77 text
The Bad
• Requires additional setup
• Requires additional tech knowledge
• Optimization up to you
• Often more expensive for paid fonts
Slide 78
Slide 78 text
use a
Plugin
Slide 79
Slide 79 text
great if you’re not
rolling your own
Slide 80
Slide 80 text
great if you don’t have
file access
Slide 81
Slide 81 text
add it
Manually
Slide 82
Slide 82 text
@font-face {
font-family: 'Typeface';
src: url('Typeface.eot?') format('eot'),
url('Typeface.woff') format('woff'),
url('Typeface.ttf') format('truetype');
}
BULLETPROOF @FONT-FACE
http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
Slide 83
Slide 83 text
WEBFONT GENERATOR
Font Squirrel http://www.fontsquirrel.com/tools/webfont-generator
Slide 84
Slide 84 text
@font-face {
font-family: 'Typeface';
src: url('Typeface.woff2') format('woff2'),
url('Typeface.woff') format('woff');
}
MODERN @FONT-FACE STACK
https://css-tricks.com/snippets/css/using-font-face/
Slide 85
Slide 85 text
Google Fonts
Slide 86
Slide 86 text
Paid & Hosted
• Depends on your service
• Usually given something to add to your
Slide 87
Slide 87 text
THINKING ABOUT
The Future of Type
Slide 88
Slide 88 text
higher quality
Free Fonts
Slide 89
Slide 89 text
going back to
System Fonts
Slide 90
Slide 90 text
Responsive Type
Slide 91
Slide 91 text
RESPONSIVE TYPOGRAPHY MEDIA QUERIES
body {
font-size: 100%;
}
h1 {
font—size: 2.5em;
}
@media screen and (max-width: 50em) {
h1 {
font—size: 2em;
}
}
@media screen and (max-width: 40em) {
h1 {
font—size: 1.5em;
}
}
Slide 92
Slide 92 text
RESPONSIVE TYPOGRAPHY JAVASCRIPT
FlowType.js http://simplefocus.com/flowtype/
Slide 93
Slide 93 text
https://css-tricks.com/viewport-sized-typography/
CSS Tricks: Viewport Sized Typography
RESPONSIVE TYPOGRAPHY CSS
Slide 94
Slide 94 text
h1 {
font-size: 6vw;
}
h2 {
line-height: 3vh;
}
p {
line-height: 2vmin;
}
Slide 95
Slide 95 text
Variable Fonts
Slide 96
Slide 96 text
https://blog.typekit.com/2016/09/14/variable-fonts-a-new-kind-of-font-for-flexible-design/
A responsive lettering example by Erik van Blokland
VARIABLE FONTS
Slide 97
Slide 97 text
Imagine condensing or extending glyph widths
ever so slightly, to accommodate narrow and
wide viewports. Imagine raising your favorite
font’s x-height just a touch at small sizes.
Imagine sharpening or rounding your brand
typeface in ways its type designer intended, for
the purposes of art direction. Imagine
shortening descenders imperceptibly so that
headings can be set nice and tight without
letters crashing into one another. Imagine this
all happening live on the web, as a natural part
of responsive design.
— Tim Brown, Variable fonts, a new kind of font for flexible design.
“
Slide 98
Slide 98 text
can’t use them
just yet
Slide 99
Slide 99 text
Color Fonts
Slide 100
Slide 100 text
VARIABLE FONTS
https://color.typekit.com/
Slide 101
Slide 101 text
Thanks!
@melchoyce
melchoyce.design
https://choycedesign.com/type/