93
Typography 101
Typography 101
Typography is a design’s voice.- Jason Santa Maria On Web Typography
Text makes up 95% of all websites
Text makes up 95% of all websitesFACT
Type is the essence of a website.
And websites are the essence of the internet.
Typography is for the benefit of the reader,
not the writer.- Matthew Butterick
Practical Typography
- Ellen Lupton, Thinking with Type
- Ellen Lupton, Thinking with Type
Don't Be a Menace to South CentralDon't Be a Menace to South Central
Don't Be a Menace to South Central
Don't Be a Menace to South Central
Adobe Caslon Pro 60pt
Times New Roman 60pt
Garamond 60pt
Bernhard Modern Pro 60pt
Don't Be a Menace to South CentralDon't Be a Menace to South Central
Don't Be a Menace to South Central
Don't Be a Menace to South Central
Adobe Caslon Pro 60pt
Times New Roman 60pt
Garamond 60pt
Bernhard Modern Pro 60pt
Don't Be a Menace to South CentralArial 60pt
Don't Be a Menace to South CentralLucida Sans 60pt
Perpetua 90ptTimes New Roman 90pt Adobe Garamond Pro 90pt Bernhard Modern Pro 90pt
Red Orange Yellow Cheetos
Perpetua 90ptTimes New Roman 90pt Adobe Garamond Pro 90pt Bernhard Modern Pro 90pt
Red Orange Yellow Cheetos
Perpetua 90ptTimes New Roman 90pt Adobe Garamond Pro 90pt Bernhard Modern Pro 90pt
Red Orange Yellow Cheetos
o o oGeorgia 230ptHelvetica 230pt Bodoni 230pt
< Low ———————————————————————— High >
Hey, I just met you,And this is crazy,But here's my number,So call me, maybe!
Hoefler Text 45pt / Leading 40pt / line-height: 0.88em
Hey, I just met you,
And this is crazy,
But here's my number,
So call me, maybe!
Hoefler Text 45pt / Leading 95pt / line-height: 2em
Hey, I just met you,And this is crazy,But here's my number,So call me, maybe!
Hoefler Text 45pt / Leading 65pt / line-height: 1.4em
Hey, I just met you,And this is crazy,But here's my number,So call me, maybe!
Hoefler Text 45pt / Leading 75pt / line-height: 1.6em
Chicken fried tofu
Chicken fr ied chicken
C h i c k e n f r i e d w a f f l e s
Chicken fried steak
Bell MT 60pt — 5% tracking — letter-spacing: 1px;
Bell MT 60pt — 0 tracking — letter-spacing: 0;
Bell MT 60pt — 10% tracking — letter-spacing: 2px;
Bell MT 60pt — 20% tracking — letter-spacing: 3px;
Chicken fried baconBell MT 60pt — -5% tracking — letter-spacing: -1px
Chicken fried tofu
Chicken fr ied chicken
C h i c k e n f r i e d w a f f l e s
Chicken fried steak
Chicken fried bacon
Bell MT 60pt — 5% tracking — letter-spacing: 1px;
Bell MT 60pt — 0 tracking — letter-spacing: 0;
Bell MT 60pt — 10% tracking — letter-spacing: 2px;
Bell MT 60pt — 20% tracking — letter-spacing: 3px;
Bell MT 60pt — -5% tracking — letter-spacing: -1px;
- Ellen Lupton, Thinking with Type
- Jason Santa Maria On Web Typography
- Jason Santa Maria On Web Typography
- Jason Santa Maria On Web Typography
- Jason Santa Maria On Web Typography
Martin came up to the stag, gently reached out and
touched his neck. The great head swung up, and the stag
nuzzled Martin's arm. Softly Martin said, “If you walk out
slowly, without speaking, he might let you approach.”
MARTIN CAME UP TO THE STAG, GENTLY REACHED OUT
AND TOUCHED HIS NECK. THE GREAT HEAD SWUNG
UP, AND THE STAG NUZZLED MARTIN'S ARM. SOFTLY
MARTIN SAID, “IF YOU WALK OUT SLOWLY, WITHOUT
SPEAKING, HE MIGHT LET YOU APPROACH.”
Bookman Old Style 24pt — Leading 36pt — line-height: 1.5em;
Martin came up to the stag, gently reached out and
touched his neck. The great head swung up, and the stag
nuzzled Martin's arm. Softly Martin said, “If you walk out
slowly, without speaking, he might let you approach.”
MARTIN CAME UP TO THE STAG, GENTLY REACHED OUT
AND TOUCHED HIS NECK. THE GREAT HEAD SWUNG
UP, AND THE STAG NUZZLED MARTIN'S ARM. SOFTLY
MARTIN SAID, “IF YOU WALK OUT SLOWLY, WITHOUT
SPEAKING, HE MIGHT LET YOU APPROACH.”
Bookman Old Style 24pt — Leading 36pt — line-height: 1.5em;
X
“Into his mouth went the lizard, and before I could accuse, out
it came again, squirming and alive and ready to bite once again.
He handed it back to his younger brother, who smote it mightily
with the rock, starting or ending the whole process again.”
“Into his mouth went the lizard, and before I could accuse, out it came again, squirming and alive and ready to bite once again. He handed it back to his younger brother, who smote it mightily with the rock, starting or ending the whole process again.”
Georgia 28pt — Leading 42pt — line-height: 1.5em;
Bodoni 28pt — Leading 42pt — line-height: 1.5em;
“Into his mouth went the lizard, and before I could accuse, out
it came again, squirming and alive and ready to bite once again.
He handed it back to his younger brother, who smote it mightily
with the rock, starting or ending the whole process again.”
“Into his mouth went the lizard, and before I could accuse, out it came again, squirming and alive and ready to bite once again. He handed it back to his younger brother, who smote it mightily with the rock, starting or ending the whole process again.”
Georgia 28pt — Leading 42pt — line-height: 1.5em;
XBodoni 28pt — Leading 42pt — line-height: 1.5em;
“Don’t let anyone tell you that the Prince of Peace never struck anyone. In
those early days, before he had become who he would be, Joshua smote me
in the nose more than once. That was the first time.”
“Don’t let anyone tell you that the Prince of Peace
never struck anyone. In those early days, before he
had become who he would be, Joshua smote me in the
nose more than once. That was the first time.”
Bookman Old Style 28pt — Leading 42pt — line-height: 1.5em;
Perpetua 28pt — Leading 42pt — line-height: 1.5em;
“Don’t let anyone tell you that the Prince of Peace never struck anyone. In
those early days, before he had become who he would be, Joshua smote me
in the nose more than once. That was the first time.”
“Don’t let anyone tell you that the Prince of Peace
never struck anyone. In those early days, before he
had become who he would be, Joshua smote me in the
nose more than once. That was the first time.”
Bookman Old Style 28pt — Leading 42pt — line-height: 1.5em;
XPerpetua 28pt — Leading 42pt — line-height: 1.5em;
And then there's The Enforcers—but they cost a lot and don't take well to supervision. It is rumored that, under their uniforms, they wear T-shirts bearing the unofficial Enforcer coat of arms: a fist holding a nightstick, emblazoned with the words SUE ME.
Times 25pt — Leading 37.5pt — line-height: 1.5em;
And then there's The Enforcers—but they cost a lot and don't take well to supervision. It is rumored that, under their uniforms, they wear T-shirts bearing the unofficial Enforcer coat of arms: a fist holding a nightstick, emblazoned with the words SUE ME.
Times 12pt — Leading 18pt — line-height: 1.5em;
And then there's The Enforcers—but they cost a lot and don't take well to supervision. It is rumored that, under their uniforms, they wear T-shirts bearing the unofficial Enforcer coat of arms: a fist holding a nightstick, emblazoned with the words SUE ME.
Times 25pt — Leading 37.5pt — line-height: 1.5em;
XAnd then there's The Enforcers—but they cost a lot and don't take well to supervision. It is rumored that, under their uniforms, they wear T-shirts bearing the unofficial Enforcer coat of arms: a fist holding a nightstick, emblazoned with the words SUE ME.
Times 12pt — Leading 18pt — line-height: 1.5em;
Four things are on the cargo pallet: a bottle of expensive beer from the Puget Sound area, which Hiro cannot really afford; a long sword known in Nippon as a katana and a short sword known as a wakizashi—Hiro's father looted these from Japan after World War II went atomic—and a computer.
Four things are on the cargo pallet: a bottle of expensive beer from the Puget Sound area, which Hiro cannot really afford; a long sword known in Nippon as a katana and a short sword known as a wakizashi—Hiro's father looted these from Japan after World War II went atomic—and a computer.
Athletas 22pt — Leading 33pt — line-height: 1.5em
Four things are on the cargo pallet: a bottle of expensive beer from the Puget Sound area, which Hiro cannot really afford; a long sword known in Nippon as a katana and a short sword known as a wakizashi—Hiro's father looted these from Japan after World War II went atomic—and a computer.
Four things are on the cargo pallet: a bottle of expensive beer from the Puget Sound area, which Hiro cannot really afford; a long sword known in Nippon as a katana and a short sword known as a wakizashi—Hiro's father looted these from Japan after World War II went atomic—and a computer.
Athletas 22pt — Leading 33pt — line-height: 1.5em
X
• http://practicaltypography.com
• http://ilovetypography.com
• http://www.thinkingwithtype.com/
• http://youtu.be/Ki6rcXvUWP0
• http://fontsinuse.com/
Resources
