"Creating Beautiful Type (On the Web)". Delivered by Kyle Fiedler of ThoughtBot, on November 10th, 2010 at Lamont Library, Forum Room.

1. Creating
beautiful type
(on the web)

2. Who here is a typographer?

3. Mind your P’s
and Q’s

4. Use real quotes and
hang ‘em too

5. “”Yes
‘’
” “ ‘’
" "No
' '

6. The name Harvard comes from the college’s
first benefactor, the young minister John
Harvard of Charlestown. Upon his death in
1638, he left his library and half his estate
to the institution established in 1636 by
vote of the Great and General Court of the
Massachusetts Bay Colony.
“
Well hung quotes
blockquote {text-indent: -0.5em}

7. Use hyphens, em
dashes & en dashes
properly!
- –—

8. Hyphen (-)
• Justification
• Prefix, Suffix (co, pre, mid, etc.)
• Spelling (H-A-R-V-A-R-D)
• Joining modifiers (two or more words that modify the
meaning of another)
• Compound names

9. em dash (—)
• A pause in thought
• Indicate a sentence is unfinished

10. en dash (—)
• Ranges of values (30–40)
• Relationships (mother–daughter)
• Compound adjectives (adjective– adjective)
• Used to emphasize connection

11. Please stop putting
two spaces at the end
of a sentence.

12. Use your ligatures
text-rendering: optimizeLegibility;

13. Remove all widows
jQwidont — widows b’gone

14. The name Harvard comes from the college’s first
benefactor, the young minister John Harvard of
Charlestown. Upon his death in 1638, he left his
library and half his estate to the institution
established in 1636 by vote of the Great and
General Court of the Massachusetts Bay
Colony.
Harvard University is made up of 11 principal
academic units — ten faculties and the Radcliffe
Institute for Advanced Study. The ten faculties
oversee schools and divisions that offer courses
and award academic degrees.

15. Use proper spacing

16. line-height
The name Harvard comes from the college’s first benefactor, the young minister John Harvard of
Charlestown. Upon his death in 1638, he left his library and half his estate to the institution
established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony.
The name Harvard comes from the college’s first benefactor, the young minister John Harvard of
Charlestown. Upon his death in 1638, he left his library and half his estate to the institution
established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony.
The name Harvard comes from the college’s first benefactor, the young minister John Harvard of
Charlestown. Upon his death in 1638, he left his library and half his estate to the institution
established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony.
Yes
No
No

17. letter-spacing
The name Harvard comes from the college’s
first benefactor.
The name Harvard comes from the
college’s first benefactor.
The name Harvard comes from the
college’s first benefactor.Yes
No
No

18. Create rhythm

19. Baseline grid & font-size
Traditional sizes:
10px, 12px, 14px, 16px, 18px, 20px, 22px, 24px, 28px,
30px, 32px, 36px, 44px, 48px, 60px, 72px
alistapart.com/articles/settingtypeontheweb/

21. Create hierarchy and
emphasis

22. Hierarchy
Vary size, color, weight, and space

24. Emphasis
The name Harvard comes from the college’s first benefactor, the young
minister John Harvard of Charlestown. Upon his death in 1638, he left
his library and half his estate to the institution established in 1636 by
vote of the Great and General Court of the Massachusetts Bay Colony.
The name Harvard comes from the college’s first benefactor, the young
minister John Harvard of Charlestown. Upon his death in 1638, he left
his library and half his estate to the institution established in 1636 by
vote of the Great and General Court of the Massachusetts Bay Colony.
Yes
No

25. The web font
revolution

26. @font-face is
supported in 95.6% of
current desktop
browsers.

28. More choice, style &
character

29. This is not a free pass.

30. The web font
revolution
Font delivery

31. Use Font Squirrels
@font-face generator

33. @font-face {
font-family: 'PTSans';
src: url('/fonts/PTS55F-webfont.eot');
src: local('☺'), url('/fonts/PTS55F-webfont.woff') format('woff'),
url('/fonts/PTS55F-webfont.ttf') format('truetype'), url('/fonts/
PTS55F-webfont.svg#webfontmBFaK3EM') format('svg');
font-weight: normal;
font-style: normal;
}

34. You still need a good
font stack

35. Be mindful of file size
& FoUT

36. Font rendering can be
a pain

38. Font delivery as a
service

39. The web font
revolution
Making the right
choice

40. Web safe fonts are
still the workhorses

42. Balance style and
legibility

44. Making a great pair

45. Sans-serif + Serif

47. Avoid similar styles/
classifications

48. Match personalities

49. What to look for in a
screen typeface

50. High x-height

51. Large counters

52. Read the about and
see what other
designers have done

53. Finding a typeface
with the right license

54. Problems with free

55. Variety of quality

56. Unknown rendering

57. Poorly drawn

58. Poorly kerned

59. Test your type:
Read, re-read, and have
someone else read

60. The web font
revolutionWell, it’s been fun

61. thoughtbot.com

62. atedrake.com

63. Inspiration:
dribbble.com
ffffound.com
siteinspire.com, cssmaina.com & other css galleries
Resources:
ilovetypography.com
typedia.com
webfonts.info
nicewebtype.com
readableweb.com
Elements of Typographic Style–Robert Bringhurst

64. Typeface used in presentation:
Meta
by Erik Spiekermann
Websites used in presentation:
wilsonminer.com
blackestate.co.nz
blakeallendesign.com
sxswdesign.com
oldguard.co.uk

65. Kyle Fiedler
@kylefiedler
kyle@kylefiedler.com
kylefiedler.com