This document discusses typography on the web. It provides an overview of the evolution of typography and web fonts from 1996 to the present. Key topics covered include the transition from basic web-safe fonts to services like Typekit that allow designers to use premium fonts on websites. The document also discusses considerations for choosing typefaces, the process of designing fonts, and resources for learning about typography.

1. TYPOGRAPHYONTHEWEB
Michaël Chaize
@mchaize

2. Bonjour
Michaël Chaize
@mchaize

3. words
thoughts
design
record

4. typography
establish a tone
add meaning
roleofadesigner

5. hello »«

6. HELLO

7. lol ;)

9. by Alison Carmichael

10. What’sthedifferencebetween
aFontandaTypeface?

11. We have just entered the era of non-boring typography
TYPOGRAPHYONTHEWEB
1996
Andale Mono
Times New Roman
Georgia
Verdana
Arial
Courier New
Trebuchet MS
Comic Sans
Impact
200990K+ typefaces on the web
Focus on structure: H1,H2…
&

12. Web Design is 95% typography
TYPOGRAPHYONTHEWEB
1996 2014

13. “THEWEB SAVED
TYPOGRAPHY”
Jean-François Porchez

14. STRUCTURE, CONTRAST, STRUCTURE
TYPOGRAPHYONTHEWEB

15. kerning, leading, uppercase…
DESIGNCHOICES
“Choosing typefaces relies on weighing the context of what you’re designing against your technical
requirements, typographic knowledge, and gut instinct. Just as the best coffee machine won’t necessarily make
you the best cup of coffee, good typography depends on the ingredients you choose, the particular
combination of those ingredients, and the ways you combine them. Your typeface choices must fit the
circumstances you need them for and so must your design.”
Excerpt From: Jason Santa Maria. “On Web Typography.”
“Choosing typefaces relies on weighing the
context of what you’re designing against your
technical requirements, typographic knowledge,
and gut instinct. Just as the best coffee machine
won’t necessarily make you the best cup of
coffee, good typography depends on the
ingredients you choose, the particular
combination of those ingredients, and the ways
you combine them.”
“ C h o o s i n g
typefaces relies on
w e i g h i n g t h e
context of what
you’re designing
a g a i n s t y o u r
t e c h n i c a l
r e q u i r e m e n t s ,
t y p o g r a p h i c
knowledge, and gut
instinct. Just as the
b e s t c o f f e e
machine won’t
necessarily make
you the best cup
of coffee, good
t y p o g r a p h y
depends on the
ingredients you
c h o o s e , t h e
p a r t i c u l a r
combination of
those ingredients,
and the ways you
combine them.
Yo u r t y p e f a c e
choices must fit
the circumstances
you need them for
and so must your
design.”

16. “Choosing typefaces relies on weighing the
context of what you’re designing against your
technical requirements, typographic
knowledge, and gut instinct. Just as the best
coffee machine won’t necessarily make you the
best cup of coffee, good typography depends
on the ingredients you choose, the particular
combination of those ingredients, and the ways
you combine them.Your typeface choices must
fit the circumstances you need them for and
so must your design.”
FONT SIZE x 30
34px * 30 = 1020 pixels
TRICK
DESIGNCHOICES
READ IT LOUD
TRICK

17. picking the right typeface
“Choosing typefaces relies on weighing the
context of what you’re designing against your
technical requirements, typographic knowledge,
and gut instinct. Just as the best coffee machine
won’t necessarily make you the best cup of coffee,
good typography depends on the ingredients you
choose, the particular combination of those
ingredients, and the ways you combine them.Your
typeface choices must fit the circumstances you
need them for and so must your design.”
“Choosing typefaces relies on weighing the
context of what you’re designing against your
technical requirements, typographic knowledge,
and gut instinct. Just as the best coffee machine
won’t necessarily make you the best cup of coffee,
good typography depends on the ingredients you
choose, the particular combination of those
ingredients, and the ways you combine them.
Your typeface choices must fit the circumstances
you need them for and so must your design.”
DESIGNCHOICES

18. Readingisacomplexprocessformybrain.Ineedtounderstand
howwereadinordertomakegooddesignchoicesformyreaders.
Readingisacomplexprocessformybrain.Ineedtounderstand
howwereadinordertomakegooddesignchoicesformyreaders.

19. DESIGNINGCHARACTERS
“a A is a A”

21. VALISTIKA STUDIO MAD

22. FITC
Amsterdam

23. FITC
Amsterdam

24. FITC
Amsterdam

25. FITC
Amsterdam

26. FITC
Amsterdam

27. FITCAmsterdam

28. FITC
Amsterdam

29. FITCAmsterdam

30. FITC
Amsterdam

31. DESIGNTRENDS

32. That’s why a typeface costs several hundreds of dollars
CREATIVEPROCESS
I
DESIGNING A FONT IS A LOT OF WORK
technology
culture
feeling
emotion
message

33. about 320$ per designer
PREMIUMTYPEFACE
II
FOUNDRY - PARATYPE
Futura

35. about 320$ per designer
PREMIUMTYPEFACE
II
FOUNDRY - PARATYPE
Futura

36. Be aware
PREMIUMTYPEFACE vs FREETYPEFACE
I
BETTER QUALITY
II
MULTIPLE FONT STYLES
III
WON’T BE SEEN EVERYWHERE
IV
NO WORRIES OF LAWSUITS
V
LANGUAGES
I
DOES NOT INCLUDE ALL CHARACTERS
II
LACK OF CONSISTENCY
III
MAY REQUIRE ADDITIONAL LICENSE
IV
MAY BE A STOLEN DESIGN
V
LACK OF FONT STYLE OPTIONS

37. Typekit

38. Best friend of typographers and designers in general.
TYPEKIT
I
1000+ TYPEFACES
II
SUBSCRIPTION MODEL SINCE 2009
III
CREATIVE CLOUD MEMBERSHIP INCLUDES A
TYPEKIT PORTFOLIO PLAN
IV
FULL CATALOG FOR YOUR WEBSITES
V
15 BILLION PAGE VIEWS/MONTH

39. Typekiton the web

44. Typekit& Web Design

45. You can create a 100% web safe visual workflow
The classic customer quote:
“The page of my website
looked better in Photoshop”
99% of the time, this is because
fonts look better in Photoshop.
Design with the browser in mind.
PHOTOSHOP&WEBFONTS

46. Typekit& Publishing

47. Whatdoesitrepresent?
& & &

48. Use professional fonts in your publications
TYPEKITDESKTOPFONTS
PremiumfontsinPDF,ePUB,Word,
Powerpoint…

49. TypekitLinKs

50. Typography is practice
RESOURCES
MY BLOG
www.CreativeDroplets.com
TYPEKIT LESSONS
http://practice.typekit.com/
INSPIRATION
http://fontsinuse.com/

51. Michaël Chaize
@mchaize
merci ;)