Typography basics and how to use them on the web.

1. Typography Fundamentals
Presented by Steve Hickey — fresh tilled soil
fresh tilled soil
Typography Fundamentals

2. Objective
My objectives today are to impart a basic understanding of the fundamental
rules of good typography and to show everyone how they fit into user
interface and web product design.
fresh tilled soil
Typography Fundamentals

3. Letterform, Text, Hierarchy & CHoice
01
Typographic building blocks
fresh tilled soil
Typography Fundamentals

4. Letterform — Anatomy
ligature
terminal
Bahpfesff
stem
ascender
counter
crossbar
spine
finial
bowl
serif
descender
fresh tilled soil
Typography Fundamentals

5. Letterform — Anatomy
ascender height
cap height
Bxhy
overhang
x height
baseline
descender height
fresh tilled soil
Typography Fundamentals

6. Letterform — Classification
Aao Aao Aao
humanist serif — Garamond
fresh tilled soil
transitional serif — Baskerville
modern serif — Bodoni
Typography Fundamentals

7. Letterform — Classification
Aao Aao Aao
humanist sans-serif — Gill Sans
fresh tilled soil
transitional sans-serif — Helvetica
geometric sans-serif — Futura
Typography Fundamentals

8. Letterform — Punctuation
-–—
“” '' ˝
hyphen
smart quotes
fresh tilled soil
en dash
The sentence spanned lines 2–8 in an unbroken stream — onward it swept.
Hyphens are En dashes are –
Em dashes are —
em dash
dumb quotes
primes
“Look at Donny’s pet! An 8´ 7˝ tall ostrich!”
Here’s a second line so that I can make a point.
Double smart quotes are “ and ”
Single smart quotes are ‘ and ’
Primes are ′
!
Nobody likes dumb quotes. They’re called
dumb for a reason.
Typography Fundamentals

9. Text — Size
Size has the greatest effect on readability of
text and must be considered carefully.
20px text
A worker climbs to the top of the crate. The search lights are trained on the door.
The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs
of current cracking through the air.
/* different units for setting type size */
!
p { font-size: 1em; }
!
28px text
A worker climbs to the top of the crate. The search lights are
trained on the door. The riflemen throw the bolts on their rifles
and crack their stun guns, sending arcs of current cracking
through the air.
p { font-size: 100%; }
!
p { font-size: 16px; }
!
36px text
fresh tilled soil
A worker climbs to the top of the crate. The search
lights are trained on the door. The riflemen throw the
bolts on their rifles and crack their stun guns, sending
arcs of current cracking through the air.
p { font-size: 16pt; }
Typography Fundamentals

10. Text — Line-Height
Line-height is the distance from baseline to
baseline in a block of text.
28px text
1em line-height
A worker climbs to the top of the crate. The search lights are
trained on the door. The riflemen throw the bolts on their rifles
and crack their stun guns, sending arcs of current cracking
through the air.
/* line-height as multiple of text size */
!
p {
font-size: 1em;
line-height: 1.6;
}
28px text
1.2em line-height
fresh tilled soil
A worker climbs to the top of the crate. The search lights are
trained on the door. The riflemen throw the bolts on their rifles
and crack their stun guns, sending arcs of current cracking
through the air.
Typography Fundamentals

11. Text — Measure
Measure is calculated in characters or words
per line in a paragraph.
approx. 60 characters
per line
A worker climbs to the top of the crate. The search lights are
trained on the door. The riflemen throw the bolts on their rifles
and crack their stun guns, sending arcs of current cracking
through the air.
/* width of paragraph set by container */
!
.container {
width: 66%;
}
!
.container p {
approx. 30 characters
per line
fresh tilled soil
A worker climbs to the top of
the crate. The search lights are
trained on the door. The
riflemen throw the bolts on
their rifles and crack their stun
guns, sending arcs of current
cracking through the air.
font-size: 1em;
line-height: 1.6;
width: 100%;
}
Typography Fundamentals

12. Text — Alignment
Text alignment has multiple options that
affect readability.
left aligned
A worker climbs to the top of the crate. The
search lights are trained on the door. The
riflemen throw the bolts on their rifles and
crack their stun guns, sending arcs of current
cracking through the air.
right aligned
A worker climbs to the top of the crate. The
search lights are trained on the door. The
riflemen throw the bolts on their rifles and
crack their stun guns, sending arcs of current
cracking through the air.
/* default is left aligned */
!
p.text-align-left {
text-align: left; }
!
p.text-align-right {
text-align: right; }
!
center aligned
A worker climbs to the top of the crate. The
search lights are trained on the door. The
riflemen throw the bolts on their rifles and
crack their stun guns, sending arcs of current
cracking through the air.
justified
A worker climbs to the top of the crate. The
search lights are trained on the door. The
riflemen throw the bolts on their rifles and
crack their stun guns, sending arcs of current
cracking through the air.
p.text-align-center {
text-align: center; }
!
p.text-align-justified {
text-align: justified; }
fresh tilled soil
Typography Fundamentals

13. Text — Tracking
Tracking is an adjustment of the space
between all characters in a block of text.
“Anyone who would letterspace the lowercase would shag sheep.”
text with normal
tracking
A worker climbs to the top of the crate. The search lights are
trained on the door. The riflemen throw the bolts on their rifles
and crack their stun guns, sending arcs of current cracking
through the air.
Frederic Goudy
/* all caps and letterspaced headers */
!
h1, h2, h3, h4, h5, h6 {
text-transform: uppercase;
letter-spacing: 0.25em;
}
text with 10%
tracking
fresh tilled soil
A worker climbs to the top of the crate. The search
lig hts are tra ine d on the door. The riflemen throw
the bolts on their rifles and crack their stun g uns,
sending arcs of current cracking throug h the a ir.
Typography Fundamentals

14. Text — Kerning
Kerning is an adjustment of the space
between two characters.
un-kerned
pairing
Tyson
/* ligatures/kerning in some browsers */
!
h1, h2, h3, h4, h5, h6 {
text-rendering: optimizeLegibility;
}
!
/* control spacing with Kerning.JS */
kerned pairing
fresh tilled soil
Tyson
!
#kern-me {
-letter-kern: 1px 1px 0 0 0 1px 0 2px;
}
Typography Fundamentals

15. Text — How To Make It Sing
All of these traits must be balanced in a block of text. There are no absolute rules as to
what works, but there are guidelines.
Font-size:
Start around 16px/1em for web type. It needs to be larger than print.
Line-Height: Use a multiple of 1.3 to 1.6 times the font size.
Measure:
Kerning:
Larger text makes errors more obvious, requiring custom kerning.
Tracking:
Use default in the lowercase, space it out a bit in the uppercase.
Alignment:
fresh tilled soil
Use 50 to 75 characters or 12 words per line.
Left-aligned, or justified if you have a high level of control.
Typography Fundamentals

16. Text — How To Make It Sing
A good block of text looks grey if you un-focus your eyes a bit.
fresh tilled soil
Typography Fundamentals

17. Hierarchy — Scale
Scale differences are the quickest way to
create an obvious hierarchy.
28px heading
28px text
A Heading For This Text Block
A worker climbs to the top of the crate. The search lights are
trained on the door. The riflemen throw the bolts on their rifles
and crack their stun guns, sending arcs of current cracking
through the air.
body {
font-size: 100%; } /* usually 16px */
!
p {
font-size: 1.75em; } /* 28px @ 100% */
!
h1 {
45px heading
28px text
fresh tilled soil
A Heading For This Text Block
A worker climbs to the top of the crate. The search lights are
trained on the door. The riflemen throw the bolts on their rifles
and crack their stun guns, sending arcs of current cracking
through the air.
font-size: 2.8125em; } /* 45px @ 100% */
!
h2 {
font-size: 2.625em; } /* 42px @ 100% */
Typography Fundamentals

18. Hierarchy — Using a Modular Scale
A modular scale can help you create a full
system of typographic hierarchy.
Heading Level 1
24px @ 1:1.618
29px @ 1:1.618
63px heading
Heading Level 2
generated by http://modularscale.com
47px heading
Heading Level 3
39px heading
Heading Level 4
29px heading
Heading Level 5
76px heading
24px text
29px line-height
!
A worker climbs to the top of the crate. The search lights are
trained on the door. The riflemen throw the bolts on their rifles
and crack their stun guns, sending arcs of current cracking
through the air.
body {
font-size: 100%; } /* usually 16px */
!
p {
font-size: 1.5em; } /* 24px @ 100% */
!
h1 {
font-size: 4.75em; } /* 76px @ 100% */
!
h2 {
font-size: 3.9375em; } /* 63px @ 100% */
fresh tilled soil
Typography Fundamentals

19. Hierarchy — Color
Color changes are another way to establish a
difference in hierarchy.
same color as text
contrasting color
fresh tilled soil
A Heading For This Text Block
A worker climbs to the top of the crate. The search lights are
trained on the door. The riflemen throw the bolts on their rifles
and crack their stun guns, sending arcs of current cracking
through the air.
p {
color: black; }
!
h1, h2, h3, h4, h5, h6 {
color: blue; }
A Heading For This Text Block
A worker climbs to the top of the crate. The search lights are
trained on the door. The riflemen throw the bolts on their rifles
and crack their stun guns, sending arcs of current cracking
through the air.
Typography Fundamentals

20. Hierarchy — Value
Changing the value, or relative lightness/
darkness, will set two elements apart.
same value as text
contrasting value
fresh tilled soil
A Heading For This Text Block
A worker climbs to the top of the crate. The search lights are
trained on the door. The riflemen throw the bolts on their rifles
and crack their stun guns, sending arcs of current cracking
through the air.
p {
color: rgb(128, 128, 128); }
!
h1, h2, h3, h4, h5, h6 {
color: rgb(0, 0, 0); }
A Heading For This Text Block
A worker climbs to the top of the crate. The search lights are
trained on the door. The riflemen throw the bolts on their rifles
and crack their stun guns, sending arcs of current cracking
through the air.
Typography Fundamentals

21. Hierarchy — Style
A different style is an effective way to set
visual distinctiveness.
same style as text
contrasting style
fresh tilled soil
A Heading For This Text Block
A worker climbs to the top of the crate. The search lights are
trained on the door. The riflemen throw the bolts on their rifles
and crack their stun guns, sending arcs of current cracking
through the air.
p {
font-weight: normal; }
!
h1, h2, h3, h4, h5, h6 {
font-weight: bold; }
A Heading For This Text Block
A worker climbs to the top of the crate. The search lights are
trained on the door. The riflemen throw the bolts on their rifles
and crack their stun guns, sending arcs of current cracking
through the air.
Typography Fundamentals

22. Hierarchy — Placement
The placement of text also helps to
determine hierarchy.
same alignment
as text
contrasting
placement
A Heading For This Text Block
A worker climbs to the top of the crate. The search lights are
trained on the door. The riflemen throw the bolts on their rifles
and crack their stun guns, sending arcs of current cracking
through the air.
p {
margin: 0 0 1em 0; }
!
h1, h2, h3, h4, h5, h6 {
margin: 0 0 2em -1em; }
A Heading For This Text Block
A worker climbs to the top of the crate. The search lights are
trained on the door. The riflemen throw the bolts on their rifles
and crack their stun guns, sending arcs of current cracking
through the air.
fresh tilled soil
Typography Fundamentals

23. Choice — Features
The first step in choosing a typeface is to make sure it has all the features you need for
what a project demands.
!
High-quality typefaces feature a complete character set, a variety of weights and styles,
several types of numbers, and can even go as far as supporting different languages.
fresh tilled soil
Typography Fundamentals

24. Choice — Features
Some typefaces have extensive style options.
Helvetica Neue Bold
Helvetica Neue Bold Italic
Helvetica Neue Medium
Helvetica Neue Italic
Helvetica Neue Regular
Helvetica Neue Light Italic
Helvetica Neue Light
Helvetica Neue Ultralight Italic
Helvetica Neue Ultralight
fresh tilled soil
Typography Fundamentals

25. Choice — Features
Others have multiple types of numbers, which can be vital for certain projects.
monospaced, uppercase
monospaced, lowercase
fresh tilled soil
proportionally spaced, uppercase
proportionally spaced, lowercase
Typography Fundamentals

26. Choice — Features
Not all projects call for just a Latin language character set.
abcdefghijklmnopqrstuvwxyz
latin
абвгдеёжзийклмнопрстуфхцчшщъыьэюя
cyrillic
αβγδεζηθικλμνξοπρσςτυφχψω
greek
fresh tilled soil
Typography Fundamentals

27. Choice — Pairing
When pairing typefaces look for similar forms, but also look to create some contrast
between them. If they’re too similar then there’s no point in using them both.
the quick brown fox jumped over the lazy
Bodoni with Futura
the quick brown fox jumped over the lazy
Helvetica with Garamond
the quick brown fox jumped over the lazy
Baskerville with Univers
fresh tilled soil
Typography Fundamentals

28. Choice — Personality
The character of the typeface you use can completely change a word’s meaning.
sophisticated sophisticated
classy classy
sweet s w e e t
fresh tilled soil
Typography Fundamentals

29. Examples — Minimalissimo.com
fresh tilled soil
Typography Fundamentals

30. Examples — WalkaboutNYC.com
fresh tilled soil
Typography Fundamentals

31. Examples — Mailchimp.Com/2012
fresh tilled soil
Typography Fundamentals

32. Examples — Hlvticons.ch
fresh tilled soil
Typography Fundamentals

33. Examples — ElliotJayStocks.com
fresh tilled soil
Typography Fundamentals

34. Examples — co-opbranding.com
fresh tilled soil
Typography Fundamentals

35. Examples — blackestate.co.nz
fresh tilled soil
Typography Fundamentals

36. Implementing Type On The Web
02
The good, the bad & the ugly
fresh tilled soil
Typography Fundamentals

37. The State of Web Type
The state of typography on the web is, in a word, frustrating.
Many of the things I just showed you either can’t be done, or are very hard to do.
(you’re welcome)
fresh tilled soil
Typography Fundamentals

38. The State of Web Type
But they’re very important to know. Why?
1. You need to be able to work around your own limitations.
2.These techniques are creeping into specifications and plugins.
3.Many of your competitors will be using them to improve their products.
fresh tilled soil
Typography Fundamentals

39. The State of Web Type
Print-quality type is becoming possible on the web. Embrace it or fall behind.
fresh tilled soil
Typography Fundamentals

40. Serving Web Fonts — Defaults
There are certain fonts you can reasonably expect to be installed on most devices. To
cover your bases you call them with a font stack in your css.
h1, h2, h3, h4, h5, h6 {
font-family: Helvetica, Arial, sans-serif; }
!
p {
font-family: 'Times New Roman', Georgia, serif; }
fresh tilled soil
Typography Fundamentals

41. Serving Web Fonts — Defaults
These fonts are very basic. They work, and they’re consistent, but they aren’t great.
Times New Roman
Georgia
Helvetica / Arial!
Verdana
fresh tilled soil
Typography Fundamentals

42. Serving Web Fonts — @font-face and font Services
To get something more interesting you can:
• store font files on your site and use @font-face in css.
• use a font service like Typekit or Google Web Fonts.
fresh tilled soil
Typography Fundamentals

43. Serving Web Fonts — @font-face
I put together a SASS mixin for bulletproof @font-face that you can find here:
http://codepen.io/cfarm/pen/arBLb
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compatability Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#MyWebFont') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
!
p { font-family: 'MyWebFont', Helvetica, Arial, sans-serif; }
Derived from this research http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/
fresh tilled soil
Typography Fundamentals

44. Serving Web Fonts — Font Services
Typekit and Google Web Fonts allow you to serve a variety of fonts from their servers with
a snippet of code in your html.
<!-- Typekit embed code -->
<script type="text/javascript" src="//use.typekit.net/ssj0eha.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
!
<!-- Google Web Fonts embed code -->
<link href='http://fonts.googleapis.com/css?family=Gafata' rel='stylesheet'
type='text/css'>
fresh tilled soil
Typography Fundamentals

45. Serving Web Fonts — Font Services
Then, you just add the typeface’s name to your font stacks in your css.
h1, h2, h3, h4, h5, h6 { /* Google Web Fonts */
font-family: 'Gafata', Helvetica, Arial, sans-serif; }
!
p { /* Typekit */
font-family: 'source-sans-pro', source-sans-pro, Arial, sans-serif; }
fresh tilled soil
Typography Fundamentals

46. Resources
03
The good, the bad & the ugly
fresh tilled soil
Typography Fundamentals

47. Resources
Thinking With Type
thinkingwithtype.com
=
fresh tilled soil
Typography Fundamentals

48. Resources
The Elements of
Typographic Style
webtypography.net
=
fresh tilled soil
Typography Fundamentals

49. Resources
practicaltypography.com
fresh tilled soil
Typography Fundamentals

50. Resources
ia.net/blog
fresh tilled soil
Typography Fundamentals