Для внутренней конференции

2. Typography

3. History

9. Blackletter Modern
Old Style Slab Serif
Transitional Sans Serif

10. Rocco the Clown
Entertainer

11. Williams and Glun
Financial Advisers

12. Rocco the Clown
Entertainer

13. Williams and Glun
Financial Advisers

17. « В наше время выходит такое количество
печатных материалов, что обесценивается
значимость отдельных работ. Мы просто не
можем перечитать все, что издается сегодня.
Задача типографики — разделить, организовать
и растолковать эту массу печатных материалов
таким образом, чтобы читатель имел шанс
найти то, что интересно ему».
Эмиль Рудер, типограф

18. Text settings

19. Myriad Pro Regular
Myriad Pro Italic
Myriad Pro Semibold
Myriad Pro Semibold Italic
Myriad Pro Bold
Myriad Pro Bold Italic
Myriad Pro Condensed
Myriad Pro Condensed Italic
Myriad Pro Bold Condensed
Myriad Pro Bold Condensed Italic
Type families

20. epyT
Type measurement

21. The anatomy of letterforms

22. In the forest, there was a crooked tree and a straight
In the forest, there was a crooked tree and a straight
tree. Every day, the straight tree would say to the
tree. Every day, the straight tree would say to the
crooked tree, "Look at me...I'm tall, and I'm straight,
crooked tree, "Look at me...I'm tall, and I'm straight,
and I'm handsome. Look at you...you're all crooked
and bent over. No one wants to look at you." And
they grew up in that forest together. And then one
they grew up in that forest together. And then one
day the loggers came, and they saw the crooked tree
day the loggers came,and they said, the crooked tree
and the straight tree, and they saw "Just cut the
and the straight tree, and they said, "Just cut the
straight trees and leave the rest." So the loggers
turned all the and leave the rest." So the and
straight trees straight trees into lumber loggers
toothpicksthe straight And the crooked tree is still
turned all and paper. trees into lumber and
there, growing stronger and stranger every day.”
toothpicks and paper. And the crooked tree is still
there, growing stronger and stranger every day.”
Leading

23. WASP
WASP
Kerning

25. THIS IS BAD
THIS IS GOOD
Letter spacing

26. 01 2 34 56 78 9
012345 67 89
Figures (Numerals)

27. I thought one puppy would be wonderful: a
real companion, not to much trouble. Then
I wondered whether it would be lonely and
whether two puppies would’t be better.
What about three of four? No thank you.
I didn’t want to start a kennels, just to have
a pet (or two). So off we went to the dog
rescue recommended by our vet.
How difficult it proved! There were 10 to
choose from, all of them absolutely
gorgeous. Next we visited the local kennels.
The kennels had between 12 and 15 dogs
when we visited, but could take up to 36.
Numbers in text

28. I thought one puppy would be wonderful:
I thought one puppy would be wonderful:
I real companion, not to be wonderful: a
athought one puppy wouldmuch trouble. a
puppy would be wonderful:
a real companion, not to much trouble.
real companion, not tobe wonderful: a realThenI
Then I wondered whether ittrouble. be
companion, would much trouble.Then
one puppy not to much would
I thoughtwondered whether it would be
Then I
wonderednot to much trouble. Thenlonely and
lonely andwhether it it would bewondered
whether would be I lonely and
I wondered whether two puppies would’t
companion, whether two puppies would’t
lonely and What about three of four? No
be better.
whether two puppies would’t be better.
whether it wouldpuppies and whether two puppies
be lonely would’t be better.
be better. What about threeof four? No thank
of four? No
would’t be better. What about three thank you.
What about three of four? No thank you.
thank you. three of four? No
thank you.
you.
I didn’t want to start a akennels,just to to
didn’t want to start a kennels, just tohave
want to start kennels, just have
Ididn’t want to (or two). Sokennels, just to
didn’t pet start astart a just to have a petto
want to kennels, off we went (or
have (or two). So off we went to the dog
a pet a two). So off we went to the dog
have aoff we went to the dog rescue went to the
pet (or two). So off we
two). dog rescue recommended by our
So recommended by our vet.
rescue
the our vet.
recommended by our vet.
dog rescue recommended by our vet.
How difficult it proved! were 10 were 10 to
vet. difficult it proved! ThereThere were 10 to
difficult it proved! There to choose from,
How difficult it proved! There were 10 to
How difficult it proved! There were 10 to
How from, all of them absolutely
choose absolutelyof them absolutely the
all of them all gorgeous. Next we visited
choose from, all of them absolutely
gorgeous. Nextkennels had between 12 and 15
choose from, all ofvisited absolutely
local kennels.Nextwe visited the local
The we visitedthe local
them
gorgeous. the local
kennels. Thevisited, but couldbetween36. and
gorgeous. Next we visited the local and
dogs when we kennels had between 12
kennels had take up to 12
kennels. The kennels had between 12 and
15 dogs when we visited, but could take up
kennels. The kennels had between 12 up
visited, but could take
15 dogs when we visited, but could take
and 15
to 36. dogs when we visited, but could
up to 36.
take up to 36.
Colour

29. Responsive Typography: The Basics
Responsive Typography: The Basics
When we built websites we usually started by defining the body text. The body text
When we built websites we usually started by defining the body text. The body text definition
definition dictates how wide your main column is, the rest used to follow almost by itself.
dictates how wide your main column is, the rest used to follow almost by itself. Used to.Until
Used to.Until recently, screen resolution was more or less homogenous. Today we deal with
recently, screen resolution was more or less homogenous. Today we deal with a variation of
a variation of screen sizes and resolutions. This makes things much more complicated.
screen sizes and resolutions. This makes things much more complicated.
In the heat of the relaunch I wrote a quick blog post on responsive typography, focussing
In the heat of the relaunch I wrote a quick blog post on responsive typography, focussing
solely on the aspect of our latest experiment: responsive typefaces. Without knowing the
solely on the aspect of our latest experiment: responsive typefaces. Without knowing the
history of iA, you’d miss some key aspects to the responsive typography and design in our
history of iA, you’d miss some key aspects to the responsive typography and design in our
relaunched site. Instead of mashing up all our articles on the matter, I decided to start
from scratch and explain responsive typography step by step. This is step one.
relaunched site. Instead of mashing up all our articles on the matter, I decided to start from
scratch and explain responsive typography step by step. This is step one.
While both have advantages and disadvantages, we believe that adaptive with as few as
possible break points is the way to go, because readability is more important than having
While both have advantages and disadvantages, we believe that adaptive with as few as
a layout that is always as wide as the viewport. This is a debatable opinion on a a
possible break points is the way to go, because readability is more important than having
complex matter in itself, but optimal readability requires a certain amount of control over
layout that is always as wide as the viewport. This is a debatable opinion on a complex matter
the measure (column width) of the text, and in this regard a liquid layout creates more
in itself, but optimal readability requires a certain amount of control over the measure
problems than it solves. More about that another time.
(column width) of the text, and in this regard a liquid layout creates more problems than it
solves. More about that another time.
Legibility and readability

30. Inthe forest, there was aacrooked tree and a
In the forest, there was crooked tree and
astraight tree. Every day, the straight tree would say
straight tree. Every day, the straight tree would say
toto the crooked tree, "Look at me...I'm tall, and
the crooked tree, "Look at me...I'm tall, and I'm
I'm straight, and I'm handsome. Look at you...you're
straight, and I'm handsome. Look at you...you're
all crooked andand bent over. oneone wants to at
all crooked bent over. No No wants to look
look at And they grew up in that forest forest together.
you." you." And they grew up in that together. And
thenAnd thenthe loggers came, and they and the
one day one day the loggers came, saw
crooked tree and the straight tree, and they said,
they saw the crooked tree and the straight tree, and
"Just cut said, "Just cut theand leave the rest." So
they the straight trees straight trees and
the loggers turned all the straight trees into lumber
leave the rest." So the loggers turned all the straight
and toothpicks and paper. And the crooked tree is
still there, growing and toothpicks and paper.
trees into lumber stronger and stranger every
And the crooked tree isday.”there, growing stronger
still
and stranger every day.”
Shape

31. I thought one one puppy would be wonderful: a companion, not
I thought one puppy would be wonderful: aareal companion, not to
I thought puppy would be wonderful: a real companion,
would be wonderful: real real companion,
tomuch trouble. ThenI Iwondered Iwhether ititwhether lonely and
much not to much trouble. Then whether would be itlonely and
much trouble. Then I wonderedwondered would be lonely be
trouble. Then wondered whether would be would
and whether puppies and whetherbe better. What about be better.
whether two two puppies would’t two puppies would’t three of
whether two puppieswould’t be better. What about three of four?
lonely would’t be better. four?
four? thank you.you. want to start three of four? No have aa pet
No thankthankI Ididn’t want to start a kennels, just to thank pet
No No you. didn’t What about just to have you.
I didn’ttwo). off off we went to the dog rescuearecommendedSo off
(or two). So So start a kennels, just to have recommended by our
(or want to we went to the dog rescue pet (or two). by
we went How difficult it proved! There were 10 choose from, allall
vet. Howto the dog rescue recommended10 to tovet.
ourvet. difficult it proved! There were by our choose from, of
How them absolutely gorgeous.were 10 to choose from, all of The
them difficult it proved! There Next visited the the local kennels.
of absolutely gorgeous. Next we we visited local kennels.
themThehad between between15 we visited the localwe visited,
kennels kennelsgorgeous. Next dogs15 dogswe visited, but could
absolutely had 12 and 12 and when when kennels. The
kennels to 36.
take up had between butand 15 take up to 36. visited, but could
12 could dogs when we
take up to 36.
Alignment

32. It’s about capturing ideas. It’s quick and dirty. It dirty. It is there to jot something down. It is
It’s about capturing ideas. It’s quick and is there for you for you to jot something
basically is notebook.aA drawing app could be anything, though, like a quicklike a quick
down. It a basically notebook. A drawing app could be anything, though, wireframing
and sketching tool, or a tooltool,professional painters. However, Paper is not. The UI not
wireframing and sketching for or a tool for professional painters. However, Paper is not.
only UI not only communicateshelps but it helps you puta state where statefeel free to feel
The communicates that, but it that, you put yourself in yourself in a you where you
expressexpress ideas without evaluatingThe UI The UIstory a story and sets afor the entire
free to ideas without evaluating them. them. tells a tells and sets a mood mood for the
entire experience.
experience. ❡ This interface tells a completely different story. If I want to spend an hour or
two realizing one of my ideas, this interface would inspire me. If I’m out to take some quick
notes, this interface may however discourage me from doing so. Ito spend an hour or two
This interface tells a completely different story. If I want don’t want my quick, ugly
notes to be framed in and put up on a wall for display. me. If I’m out to take some quickly
realizing one of my ideas, this interface would inspire I would think twice before quick
jotting this interface may this app. discourage me from doing so. I don’tPhoto my quick, ugly
notes, down anything in however ❡ Again, let’s look at the function of want Booth: take
pictures, be framed in and put up on a wall them. The first version of Photo before quickly
notes to record videos and apply filters to for display. I would think twice Booth made all
this really easy and accessible.app. not, however, communicate the purpose of Photo
jotting down anything in this It did
Booth: fool around and have fun. ❡ While this may be more functional, more clean, and
more true to the functions of the interface,Photo Booth:Itake pictures, be creating music in
Again, let’s look at the function of it’s not fun. could as well record videos and
Excel. filters toGarageband interface not only presents made all in a clear and and
apply Apple’s them. The first version of Photo Booth features this really easy
understandable way, it adds to a beautiful, fun and memorable experience.fool around and
accessible. It did not, however, communicate the purpose of Photo Booth:
have fun.
While this may be more functional, more clean, and more true to the functions of
the interface, it’s not fun. I could as well be creating music in Excel. Apple’s Garageband
interface not only presents features in a clear and understandable way, it adds to a
beautiful, fun and memorable experience.
Paragraphs

33. TIMES New ROMAN, , ,
Times s NEW Roman,nJOANNA,
Typefaces TIMES NEWeROMANmJoanna,
TimesNew Roman,Ja Joanna,
i m e N w R o , OANNA
PERPETUA e e t u a P Pilgrim are
J ERPETUA,and Linotype and Linotype are
P o a n n a PandINOTYPEPilgrim are 20th-
Perpetua andLpLINOTYPE PILGRIM 20th-
Perpetua and r LinotypeILGRIM are 20th-
20th-century typefaces that print well on
Pilgrim are 20th-century typefacesuncoated,
century typefaces that print well on that
uncoated, on paper. Coated papers, also of
print well good-quality paper. Coated papers,
good-quality uncoated, good-quality paper.
also quality, are better better suited to
Coatedgood quality,of good quality, are better
goodof papers, also aresuited to transitional
transitional faces, such as MONOTYPE
suitedsuch as Monotype Scotch Roman, ,
faces, to transitional faces, such asRoman,
MONOTYPE SCOTCH R
Monotype Scotch OMAN
SCOTCH ROMAN, c h R o m aand BBulmer,
M o n o t y pBELLc oBaskervillen ,BELL,
Fournier, e S , Bt FOURNIER,
Fournier, ,Bell, Baskerville and and ULMER,
FOURNIER Bell, ASKERVILLE Bulmer,
BASKERVILLE l l , B a k e r v
F owell as to, the and BULMER,iofl typefaces,
as u r n i e r B emodernsgroup l e and
as well Walbaum to BODONI. of
such asas ,to the modernBodoni. typefaces,
group
B u l m eWalbaum asandthe modern group of
r as well
WALBAUM and Bodoni.
such as WALBAUM a l b a u m and
typefaces, such as Wand BODONI. B o d o n i .
Emphasis in text

34. “I’ve always been a word guy, I like weird
“I’ve
words and IIlike American slang and all that
words and like American slang and all that
and words that are no longer being used… I
and words that are no longer being used…
like to to drag them out of the box and wave
I like drag them out of the box and wave
them around… this is an interesting one, it’s
them around… this is an interesting one,
amazing how how in addition to punctuation
it’s amazing in addition to punctuation just
ajust a pause in the wrong placeplace can
little little pause in the wrong can just
completely transform the meaning of of
just completely transform the meaning
something.”
something.”
“It's very hard to stop doing things you're
“It's
used to doing. You almost have to dismantle
used to doing. You almost have to dismantle
yourself and scatter it all around and then
yourself and scatter it all around and then
put aablindfold on and put it back together so
put blindfold on and put it back together
thatthat you avoid old habits.”
so you avoid old habits.”
Hanging punctuation

35. We, therefore, the
representatives of the United
States of America...
We, therefore, the represen-
tatives of the United States
of America...
Hyphenation

36. The quick BROWN FOX jumps
over the lazy dog.
The quick BROWN FOX jumps
over the lazy dog.
Capitals and small capitals

37. It’s about the hands­on experience
of setting metal type.
The Edinburgh–London train n
is ready to depart.
I wish you’d—oh, never mind. M
Three rules

38. The lounge measures 23′ 6″
by 12′ 9″
″Undoubtedly, it′s the best (if not
the toughest) course I′ve ever
been on″
“Undoubtedly, it’s the best (if not
the toughest) course I’ve ever
been on”
Apostrophes and quotation marks

39. fi fi Difficult, fine, office
Ligatures

40. & & &
Ampersands

41. (0123456789) (HELLO)
(0123456789) (HELLO)
Ampersands