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.
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
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
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
34.
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
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
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