practical typography
TRANSCRIPT
![Page 1: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/1.jpg)
PRACTICAL TYPOGRAPHY
![Page 2: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/2.jpg)
Typography is the vector of written communication
![Page 3: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/3.jpg)
Hey girl
![Page 4: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/4.jpg)
HEY GIRL
![Page 5: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/5.jpg)
WARNING
![Page 6: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/6.jpg)
Tenderness
![Page 7: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/7.jpg)
special offer
![Page 8: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/8.jpg)
Black Metal
![Page 9: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/9.jpg)
![Page 10: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/10.jpg)
AkelcyiAkelcyi
![Page 11: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/11.jpg)
Fonts have different cultural meanings
![Page 12: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/12.jpg)
UNDERSTAND the visual language you need to use
![Page 13: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/13.jpg)
OBSERVE what is used in that field
![Page 14: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/14.jpg)
GaramondFutura
Gill SansBodoni
![Page 15: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/15.jpg)
l l l lglglglglTHIBAUDEAU CLASSIFICATION
![Page 16: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/16.jpg)
Father Christmas. Santa Claus. Or as I've always known him: Jeff. Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you 'everything's going to be fine' and you think they're probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don't lie to me!!
![Page 17: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/17.jpg)
Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to me! !
![Page 18: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/18.jpg)
I love lampI love lamp
![Page 19: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/19.jpg)
Prefer serif fonts for longer texts
![Page 20: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/20.jpg)
Don’t use thin fontsThey’re overused and hard to read
![Page 21: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/21.jpg)
You can be distinctive without being tacky
![Page 22: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/22.jpg)
NopeNope
Nope
NopeNope
NopeNope
Nope
MAYBE
![Page 23: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/23.jpg)
TechnologyChocolate Cookies
OMG! COMICS!
casual Fashion
HEY KIDS
![Page 24: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/24.jpg)
Don’t get typefaces from DaFontSeriously, they’re the worst
![Page 25: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/25.jpg)
Google Fonts
![Page 26: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/26.jpg)
FontSquirrel
![Page 27: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/27.jpg)
TypeTogether
![Page 28: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/28.jpg)
The League of Moveable Type
![Page 29: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/29.jpg)
MyFonts
![Page 30: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/30.jpg)
be aware of the context
![Page 31: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/31.jpg)
be aware of the context
![Page 32: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/32.jpg)
Maintain a hierarchy
![Page 33: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/33.jpg)
Exterminate the Daleks
Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to me!
Society Awful?'! Saving the world with meals on wheels. Heh-haa! Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister.
![Page 34: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/34.jpg)
Exterminate the Daleks
Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to me!
Society Awful?'! Saving the world with meals on wheels. Heh-haa! Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister.
![Page 35: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/35.jpg)
Exterminate the Daleks
Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to me!
Society Awful?'! Saving the world with meals on wheels. Heh-haa! Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister.
![Page 36: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/36.jpg)
Exterminate the Daleks Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to me!
Society Awful?'! Saving the world with meals on wheels. Heh-haa! Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister.
![Page 37: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/37.jpg)
Exterminate the Daleks Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to me!
Society Awful?'! Saving the world with meals on wheels. Heh-haa! Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister.
![Page 38: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/38.jpg)
Exterminate the Daleks Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to me!
Society Awful?'! Saving the world with meals on wheels. Heh-haa! Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister. ×
![Page 39: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/39.jpg)
EXTERMINATE THE DALEKS Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to me!
Society Awful?'! Saving the world with meals on wheels. Heh-haa! Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister. ×
![Page 40: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/40.jpg)
E X T E R M I N AT E T H E D A L E K S Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to me!
Society Awful?'! Saving the world with meals on wheels. Heh-haa! Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister.
![Page 41: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/41.jpg)
E X T E R M I N A T E T H E D A L E K S Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to me!
Society Awful?'! Saving the world with meals on wheels. Heh-haa! Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister. ×
![Page 42: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/42.jpg)
EXTERMINATE THE DALEKS Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to me!
Society Awful?'! Saving the world with meals on wheels. Heh-haa! Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister.
![Page 43: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/43.jpg)
EXTERMINATE THE DALEKS Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to me!
Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister.
⅔
⅓
![Page 44: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/44.jpg)
You don’t have to use every method for contrast
![Page 45: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/45.jpg)
Use bold for strong emphasis, and italics for gentle emphasis.
EMPHASIS IN THE TEXT
![Page 46: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/46.jpg)
But don’t fucking underline words
EMPHASIS IN THE TEXT
Unless it’s a link, then it’s okay
![Page 47: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/47.jpg)
Use 2 fonts at most in your documentThree if you really have to
![Page 48: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/48.jpg)
How do you know she is a witch? I dunno. Must be a king. Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits! You don't vote for kings. Burn her! The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king.
×
![Page 49: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/49.jpg)
How do you know she is a witch? I dunno. Must be a king. Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits! You don't vote for kings. Burn her! The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king.
![Page 50: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/50.jpg)
Don’t mix fonts that share the same style
![Page 51: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/51.jpg)
![Page 52: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/52.jpg)
How do you know she is a witch? I dunno. Must be a king. Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits! You don't vote for kings. Burn her! The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by
×
![Page 53: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/53.jpg)
How do you know she is a witch? I dunno. Must be a king. Knights of Ni, we are but
simple travelers who seek the enchanter who lives
beyond these woods. You don't frighten us, English
pig-dogs! Go and boil your bottoms, sons of a silly
person! I blow my nose at you, so-called Ah-thoor
Keeng, you and all your silly English K-n-n-n-n-n-n-n-
niggits! You don't vote for kings. Burn her! The Lady
of the Lake, her arm clad in the purest shimmering
![Page 54: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/54.jpg)
Only have one font with a strong PERSONALITY
![Page 55: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/55.jpg)
IT’S NOT JUST THE FONT
![Page 56: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/56.jpg)
Typography is not about the marks on the page, it’s about the space between those marks”
“
— Ryan Gosling
![Page 57: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/57.jpg)
![Page 58: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/58.jpg)
![Page 59: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/59.jpg)
![Page 60: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/60.jpg)
![Page 61: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/61.jpg)
![Page 62: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/62.jpg)
CONSIDER the shape of your block of texts
![Page 63: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/63.jpg)
convergence across the
In integrating non-al
existing legacy systems
demand forecasting
LEADING
![Page 64: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/64.jpg)
Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution. Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems. Fundamentally transforming well designed actionable information whose semantic content is virtually null. To more fully clarify the current exchange, a few aggregate issues will require addressing to facilitate this distributed communication venue. In integrating non-aligned structures into existing legacy systems, a holistic gateway blueprint is a backward compatible packaging tangible of immeasurable strategic value in right-sizing conceptual frameworks when thinking outside the box. This being said, the ownership issues inherent in dominant thematic implementations cannot be understated vis-a vis document distribution on a real operating system consisting primarily of elements regarded as outdated and therefore impelling as a integrated out sourcing avenue to facilitate multi-level name value
![Page 65: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/65.jpg)
![Page 66: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/66.jpg)
Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution. Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems. Fundamentally transforming well designed actionable information whose semantic content is virtually null. To more fully clarify the current exchange, a few aggregate issues will require addressing to facilitate this distributed communication venue. In integrating non-aligned structures into existing legacy systems, a holistic gateway blueprint is a backward compatible packaging tangible of immeasurable strategic value in right-sizing conceptual frameworks when thinking outside the box. This being said, the ownership issues inherent in dominant thematic implementations cannot be understated
![Page 67: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/67.jpg)
Perhaps a re-engineering of your current world view will re-energize
your online nomenclature to enable a new holistic interactive enterprise
internet communication solution. Upscaling the resurgent networking
exchange solutions, achieving a breakaway systemic electronic data
interchange system synchronization, thereby exploiting technical
environments for mission critical broad based capacity constrained
systems. Fundamentally transforming well designed actionable
information whose semantic content is virtually null. To more fully
clarify the current exchange, a few aggregate issues will require
addressing to facilitate this distributed communication venue. In
integrating non-aligned structures into existing legacy systems, a holistic
gateway blueprint is a backward compatible packaging tangible of
immeasurable strategic value in right-sizing conceptual frameworks
![Page 68: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/68.jpg)
![Page 69: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/69.jpg)
![Page 70: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/70.jpg)
The leading should be 1.2× to 1.5× the font size
![Page 71: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/71.jpg)
Fundamentally transforming well designed actionable information whose semantic content is virtually null. To more fully clarify the current exchange, a few aggregate issues will require addressing to facilitate this distributed communication venue. In integrating non-aligned structures into existing legacy systems, a holistic gateway blueprint is a backward compatible packaging tangible of immeasurable strategic value in right-sizing conceptual frameworks when
Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution. Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data .
1.2
1.4
![Page 72: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/72.jpg)
Increase the leading if your column is narrow
![Page 73: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/73.jpg)
USE MARGINS, goddammit
![Page 74: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/74.jpg)
Perhaps a re-engineering of your current world view will re-energize your online
nomenclature to enable a new holistic interactive enterprise internet communication
solution. Upscaling the resurgent networking exchange solutions, achieving a breakaway
systemic electronic data interchange system synchronization, thereby exploiting technical
environments for mission critical broad based capacity constrained systems. Fundamentally
transforming well designed actionable information whose semantic content is virtually null.
To more fully clarify the current exchange, a few aggregate issues will require addressing to
facilitate this distributed communication venue. In integrating non-aligned structures into
existing legacy systems, a holistic gateway blueprint is a backward compatible packaging
tangible of immeasurable strategic value in right-sizing conceptual frameworks when
thinking outside the box. This being said, the ownership issues inherent in dominant
thematic implementations cannot be understated vis-a vis document distribution on a real
operating system consisting primarily of elements regarded as outdated and therefore
×
![Page 75: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/75.jpg)
Perhaps a re-engineering of your current world view will re-energize your
online nomenclature to enable a new holistic interactive enterprise internet
communication solution. Upscaling the resurgent networking exchange
solutions, achieving a breakaway systemic electronic data interchange
system synchronization, thereby exploiting technical environments for
mission critical broad based capacity constrained systems. Fundamentally
transforming well designed actionable information whose semantic content
is virtually null. To more fully clarify the current exchange, a few aggregate
issues will require addressing to facilitate this distributed communication
venue. In integrating non-aligned structures into existing legacy systems, a
holistic gateway blueprint is a backward compatible packaging tangible of
immeasurable strategic value in right-sizing conceptual frameworks when
thinking outside the box. This being said, the ownership issues inherent in
![Page 76: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/76.jpg)
Perhaps a re-engineering of your current world view
will re-energize your online nomenclature to enable
a new holistic interactive enterprise internet
communication solution. Upscaling the resurgent
networking exchange solutions, achieving a
breakaway systemic electronic data interchange
system synchronization, thereby exploiting
technical environments for mission critical broad
based capacity constrained systems. Fundamentally
transforming well designed actionable information
whose semantic content is virtually null. To more
fully clarify the current exchange, a few aggregate
issues will require addressing to facilitate this
![Page 77: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/77.jpg)
Perhaps a re-engineering
of your current world
view will re-energize your
online nomenclature to
enable a new holistic
interactive enterprise
internet communication
solution. Upscaling the
resurgent networking
exchange solutions,
achieving a breakaway
systemic electronic data
interchange system
interchange system
synchronization, thereby
exploiting technical
environments for mission
critical broad based
capacity constrained
systems. Fundamentally
transforming well
designed actionable
information whose
semantic content is
virtually null.
×
![Page 78: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/78.jpg)
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
![Page 79: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/79.jpg)
![Page 80: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/80.jpg)
In busy contexts, minimalism is the best option
![Page 81: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/81.jpg)
USE A GRID, goddammit
![Page 82: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/82.jpg)
In terms of shape, I have thought of a few
alternatives and tried to get inspired from other
objects linked to memories, timekeeping, and
holding of precious things, such as clocks, books,
shoeboxes full of photographs, and chests. In
parallel to that I had to stay realistic in what I
wanted to do, both because my skills in
woodworking are rather basic (I have mainly
worked on digital and screen-based products
during my time at university) and because a core
principle of the project is to be released under an
Shape and material
![Page 83: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/83.jpg)
In terms of shape, I have thought of a few
alternatives and tried to get inspired from other
objects linked to memories, timekeeping, and
holding of precious things, such as clocks, books,
shoeboxes full of photographs, and chests. In
parallel to that I had to stay realistic in what I
wanted to do, both because my skills in
woodworking are rather basic (I have mainly
worked on digital and screen-based products
during my time at university) and because a core
principle of the project is to be released under an
Shape and material
![Page 84: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/84.jpg)
The transition between pages was taken from
Tympanus/Codrops demos. It works out pretty
smoothly as it uses CSS3 transforms and
animations. Implementing them in my code was
a bit more complex than I had hoped as I have
taken the time to abstract the code into
Backbone views (one of the Javascript
frameworks that I am using), but that means I
can easily reuse it later in different ways, as I
intend to have more than two views. At the
moment there is only the timeline and a map, but
Menu, map and other views
![Page 85: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/85.jpg)
Keep things aligned with other elements
![Page 86: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/86.jpg)
The map was created using Mapbox, a service for
making embedded online maps similar to Google
Maps but with much more customisable options.
They offer a free plan which suits me but I have
applied for an Education plan to see what are the
full possibilities. I have attached a few pinpoints
for testing, which only appear at markers at the
moment but I will soon be able to make them
interactive and make them show statuses and
photos linked to specific locations, enabling
people to search by location as well as by time.
!
!
The transition between pages was taken from
Tympanus/Codrops demos. It works out pretty
smoothly as it uses CSS3 transforms and
animations. Implementing them in my code was
a bit more complex than I had hoped as I have
taken the time to abstract the code into
Backbone views (one of the Javascript
frameworks that I am using), but that means I
can easily reuse it later in different ways, as I
intend to have more than two views. At the
moment there is only the timeline and a map, but
×
![Page 87: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/87.jpg)
The map was created using Mapbox, a service for
making embedded online maps similar to Google
Maps but with much more customisable options.
They offer a free plan which suits me but I have
applied for an Education plan to see what are the
full possibilities. I have attached a few pinpoints
for testing, which only appear at markers at the
moment but I will soon be able to make them
interactive and make them show statuses and
photos linked to specific locations, enabling
people to search by location as well as by time.
!
!
The transition between pages was taken from
Tympanus/Codrops demos. It works out pretty
smoothly as it uses CSS3 transforms and
animations. Implementing them in my code was
a bit more complex than I had hoped as I have
taken the time to abstract the code into
Backbone views (one of the Javascript
frameworks that I am using), but that means I
can easily reuse it later in different ways, as I
intend to have more than two views. At the
moment there is only the timeline and a map, but
×
![Page 88: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/88.jpg)
The map was created using Mapbox, a service for
making embedded online maps similar to Google
Maps but with much more customisable options.
They offer a free plan which suits me but I have
applied for an Education plan to see what are the
full possibilities. I have attached a few pinpoints
for testing, which only appear at markers at the
moment but I will soon be able to make them
interactive and make them show statuses and
photos linked to specific locations, enabling
people to search by location as well as by time.
!
!
The transition between pages was taken from
Tympanus/Codrops demos. It works out pretty
smoothly as it uses CSS3 transforms and
animations. Implementing them in my code was
a bit more complex than I had hoped as I have
taken the time to abstract the code into
Backbone views (one of the Javascript
frameworks that I am using), but that means I
can easily reuse it later in different ways, as I
intend to have more than two views. At the
moment there is only the timeline and a map, but
![Page 89: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/89.jpg)
The map was created using Mapbox, a service for
making embedded online maps similar to Google
Maps but with much more customisable options.
They offer a free plan which suits me but I have
applied for an Education plan to see what are the
full possibilities. I have attached a few pinpoints
for testing, which only appear at markers at the
moment but I will soon be able to make them
interactive and make them show statuses and
photos linked to specific locations, enabling
people to search by location as well as by time.
!
!
The transition between pages was taken from
Tympanus/Codrops demos. It works out pretty
smoothly as it uses CSS3 transforms and
animations. Implementing them in my code was
a bit more complex than I had hoped as I have
taken the time to abstract the code into
Backbone views (one of the Javascript
frameworks that I am using), but that means I
can easily reuse it later in different ways, as I
intend to have more than two views. At the
moment there is only the timeline and a map, but
![Page 90: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/90.jpg)
Keep lines of text in different blocks on the same baseline
![Page 91: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/91.jpg)
![Page 92: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/92.jpg)
Perhaps a re-engineering of your current world view
will re-energize your online nomenclature to enable
a new holistic interactive enterprise internet
communication solution. Upscaling the resurgent
networking exchange solutions, achieving a
breakaway systemic electronic data interchange
system synchronization, thereby exploiting
technical environments for mission critical broad
based capacity constrained systems. Fundamentally
transforming well designed actionable information
whose semantic content is virtually null. To more
fully clarify the current exchange, a few aggregate
issues will require addressing to facilitate this
Flush left
![Page 93: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/93.jpg)
Perhaps a re-engineering of your current world view will re-
energize your online nomenclature to enable a new holistic
interactive enterprise internet communication solution. Upscaling
the resurgent networking exchange solutions, achieving a
breakaway systemic electronic data interchange system
synchronization, thereby exploiting technical environments for
mission critical broad based capacity constrained systems.
Fundamentally transforming well designed actionable information
whose semantic content is virtually null. To more fully clarify the
current exchange, a few aggregate issues will require addressing to
facilitate this distributed communication venue. In integrating
non-aligned structures into existing legacy systems, a holistic
gateway blueprint is a backward compatible packaging tangible of
Centered
×
![Page 94: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/94.jpg)
Perhaps a re-engineering of your current world view
will re-energize your online nomenclature to enable
a new holistic interactive enterprise internet
communication solution. Upscaling the resurgent
networking exchange solutions, achieving a
breakaway systemic electronic data interchange
system synchronization, thereby exploiting
technical environments for mission critical broad
based capacity constrained systems. Fundamentally
transforming well designed actionable information
whose semantic content is virtually null. To more
fully clarify the current exchange, a few aggregate
issues will require addressing to facilitate this
Flush right
×
![Page 95: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/95.jpg)
![Page 96: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/96.jpg)
Justify
![Page 97: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/97.jpg)
×
![Page 98: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/98.jpg)
![Page 99: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/99.jpg)
![Page 100: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/100.jpg)
![Page 101: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/101.jpg)
![Page 102: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/102.jpg)
Justify long texts, Left align the restDon’t center or align right; or only very occasionally if it’s just a couple of lines
![Page 103: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/103.jpg)
×
![Page 104: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/104.jpg)
×
![Page 105: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/105.jpg)
Disable hyphena- tion for left align- ed textIt’s only useful for justified blocks
![Page 106: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/106.jpg)
![Page 107: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/107.jpg)
and in the process, I have used 2 kilogrammes of plaster branded © B&Q that I bought for less than 4 pounds. It was a pretty good deal !
×
![Page 108: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/108.jpg)
and in the process, I have used 2 kilogrammes of plaster branded © B&Q that I bought for less than 4 pounds. It was a pretty good deal!
![Page 109: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/109.jpg)
PROOFREAD, at least with a spellchecker
![Page 111: Practical Typography](https://reader030.vdocuments.net/reader030/viewer/2022032505/55c54662bb61eb911b8b461d/html5/thumbnails/111.jpg)
David Rault’s talk on typographic influences; Butterick’s “Pratical Typography”; Bettina M.
Credits: xkcd’s comic on white space, and Typographer Ryan Gosling
Thanks to