Initiate Typography
Tony Naccarato
Selection, Arrangement & formatting
SORT 2011
@tonynaccarato
#typesort
to cause or facilitate the beginning of : set goingto instruct in the rudiments or principles of something : Introduce
ini•ti•ate1.
2.
Merriam-Webster Dictionary
Why Typography Matters
“Good type on the web might not be our primary focus when creating a website but typography is unavoidable.
“95% of the information on the web is written language.
Oliver Reichenstein, Web Design is 95% Typography
What is typography?Typography entails the selection, arrangement and formatting of type.
“
Robert Bringhurst, The Elements of Typographic Style
Typography exists to honor the content.
“
Robert Bringhurst, The Elements of Typographic Style
Paths that each of us is free to follow or not…if only we know the paths are there and have a sense of where they lead.
Typography
What you need to know
Typography isn’t about picking the coolest font
DysfunctionTypothermiaThe refusal to make a lifelong commitment to a single typeface—or even to five or six, as some doctors recommend. The typothermiac is constantly tempted to test drive "hot" new fonts, often without a proper license
“Typography has one plain duty before it and that is to convey information in writing. No arguments or considerations can absolve typography from this duty.
Emil Ruder, Typography: A Manuel of Design
Legibility & Readability
Legibility
Readability
Legibility
Readability
Can I understand and recognize the characters?
Legibility
Readability
Can I understand and recognize the characters?
Can I read this comfortably for a long time?
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long process of accretion, with considerable overlap between historical periods.
Contemporary books are more likely to be set with state-of-the-art seriffed "text romans" or "book romans" with design values echoing present-day design arts, which are closely based on traditional models such as those of Nicolas Jenson,
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long process of accretion, with considerable overlap between historical periods.
Contemporary books are more likely to be set with state-of-the-art seriffed "text romans" or "book romans" with design values echoing present-day design arts, which are closely based on traditional models such as those of Nicolas
Selection1
234,580
What Typeface Should I Use?
What context will the typeface be used and what purpose will it serve?
Body TextThe text we read
Display TextType used at large sizes
Serif or Sans-serif ?
Sans-serif
66%
34%
Serif vs. Sans-Serif in Body Copy
Serif Sans-Serif
60%
40%
Serif vs. Sans-Serif in Display Copy
Serif Sans-Serif
Georgia
Arial
Verdana
Lucida Grande
Helvetica
Times New Roman
Other
0 5 10 15 20
Body Text Display Text
Body The text we read
CHOOSING YOUR
Generous x-height
Fox Fox144pt, Lindon Hill 144pt, Georgia
NOT GOOD GOOD
1
Familiar Letterforms
144pt, Gill Sans
NOT GOOD
2
Il1
Familiar Letterforms
144pt, Gill Sans
NOT GOOD
2
Il1144pt, Georgia
GOOD
Il1
Designed for the screen3
M
Verdana
Verdana
Verdana
Verdana
9
18
36
60
Display textType used at large sizes
CHOOSING YOUR
Dress for the Occasion
This afternoon, let’s go for a walk in the park.
This afternoon, let’s go for a walk in the park.
Workhorse Typeface
Workhorse Typeface‣ Easily recognizable letterforms
‣ Trustworthy and reliable under heavy or prolonged use
‣ Has different styles within the typeface
‣ Can be used in body text or display text
‣ Looks good at any size
WELCOME TO THE SHOW
TypographyIn traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
FontsDo you mean fonts or typefaces?
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long process of accretion, with considerable overlap between historical periods.
Helvetica Neue
WELCOME TO THE SHOW
TypographyIn traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
FontsDo you mean fonts or typefaces?
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long process of accretion, with considerable overlap between historical periods.
Georgia
“ It is essential to be creative…, but typography must be legible or else it becomes almost useless
Matt Cronin, 10 Principles for Readable Web Typography
Don’t be Wimpy
“Keep it exactly the same, or change it a lot — avoid wimpy, incremental variations
Dan Mayer, What Font Should I Use?
TypographyIn traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
FontsDo you mean fonts or typefaces?
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long process of accretion, with
Franklin Gothic Book
Helvetica Neue
TypographyIn traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
FontsDo you mean fonts or typefaces?
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a
Georgia
Verdana
Georgia typeface is named after a tabloid headline titled, “Alien heads found in Georgia”.
Georgia
Arial
Verdana
Lucida Grande
Helvetica
Times New Roman
Other
0 5 10 15 20
Body Text Display Text
Arrangement2
“How users read on the web: they don't. Instead, they scan the page, picking out individual words and sentences.
Jakob Nielson
MeasureLine length
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of
The Measure
45–75 characters
Hierarchy & ScaleType Size
“You should understand that the relationship between different sizes of type within a composition is meaningful… create a scale thoughtfully and then stick to it.
Jeff Croft, Elegant Web Typography
ab ab ab ab ab ab ab ab ab ab ab ab ab ab ab ab ab ab ab6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72 84 96 110
ab ab ab ab ab ab ab8 13 21 34 55 89 144
Heading font size ÷ Body copy font size = 1.96
TypographyIn traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
TypographyIn traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at
14pt – 28pt 20pt – 40pt
TypographyIn traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.FontsDo you mean fonts or typefacesChoice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long process of accretion, with considerable overlap between historical periods.Contemporary books are more likely to be set
TypographyIn traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
FontsDo you mean fonts or typefaces?
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre
36
36
18
18
24
LeadingLine Height
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
1.5 x font size
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long
Spacing
“Space in typography is like time in music.
Robert Bringhurst
TypographyIn traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.FontsDo you mean fonts or typefaces?Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long process of accretion, with considerable overlap between historical periods.Contemporary books are more likely to be set with state-of-the-art seriffed "text romans" or "book romans" with design values echoing present-day design arts, which are closely based on traditional models such as those of Nicolas Jenson, Francesco Griffo (a punchcutter who created the model for Aldine typefaces), and
TypographyIn traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
FontsDo you mean fonts or typefaces?
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long process of accretion, with
“Space plays the most important part in maintaining flow of your design. Good use of space will tell the reader where to start, when to pause, where it ends and what to do next.
Sean Hodge, 5 Principles of Setting Type on the Web
TypographyIn traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
FontsDo you mean fonts or typefaces?
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long process of accretion, with
Start
Start
Stop
Stop
Flow
Flow
White Space is GoodIn traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
FontsDo you mean fonts or typefaces?
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long process of accretion,
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and
“
Mark Boulton, Whitespace
Once you know how to design and manipulate the space outside, inside, and around your content, you’ll give your readers a head start…
Paragraphs
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long process of accretion, with considerable overlap between historical periods.
Contemporary books are more likely to be set with state-of-the-art seriffed "text romans" or "book romans" with design values echoing present-day design arts, which are closely based on traditional models such as those of Nicolas Jenson, Francesco Griffo (a punchcutter who created the model for Aldine typefaces), and Claude Garamond.
With their more specialized requirements, newspapers and magazines rely on compact, tightly fitted seriffed text fonts specially designed for the task, which offer maximum flexibility, readability and efficient use of page space. Sans serif text fonts are often used for introductory paragraphs, incidental text and whole short articles.
Paragraph Spacing
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency. Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long process of accretion, with considerable overlap between historical periods. Contemporary books are more likely to be set with state-of-the-art seriffed "text romans" or "book romans" with design values echoing present-day design arts, which are closely based on traditional models such as those of Nicolas Jenson, Francesco Griffo (a punchcutter who created the model for Aldine typefaces), and Claude Garamond. With their more specialized requirements, newspapers and magazines rely on compact, tightly fitted seriffed text fonts specially designed for the task, which offer maximum flexibility, readability and efficient use of page space. Sans serif text fonts are often used for introductory paragraphs, incidental text and whole short articles. A current fashion is to pair sans-serif type for headings with a high-performance seriffed font of matching style for the text of an article.
Indent
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long process of accretion, with considerable overlap between historical periods.
Contemporary books are more likely to be set with state-of-the-art seriffed "text romans" or "book romans" with design values echoing present-day design arts, which are closely based on traditional models such as those of Nicolas Jenson, Francesco Griffo (a punchcutter who created the model for Aldine typefaces), and Claude Garamond.
With their more specialized requirements, newspapers and magazines rely on compact, tightly fitted seriffed text fonts specially designed for the task, which offer maximum flexibility, readability and efficient use of page space. Sans serif text fonts are often used for introductory paragraphs, incidental text and whole short articles.
Paragraph Spacing + Indent
Formatting3
Type Sins3
Two Spaces After a Period.
SIN NUMBER ONE
I have set this paragraph with one space after a period. The flow is a lot better and doesn’t create awkward gaps in the paragraph. Please forget everything you learned in your typewriter class. Use only one space after a periods. The great thing about the web is that it ignores multiple spaces. Even if you put two spaces in, only one will show.
I have set two spaces after each period. Squint your eyes at this text. You’ll notice the big gaps those extra spaces create. I guarantee this: never in your life have you read professionally set text printed since 1942 that used two spaces after each period. If you don’t believe me, check The Chicago Manual of Style. You’ll find answers to a lot of questions.
Using Prime Marks for Quotes
SIN NUMBER TWO
' "
' "
' "6' 1"
“ ”
“Where did the cat go?”“ ”
Improper Use of the Hyphen
SIN NUMBER THREE
-
–
—
Hyphen
En dash
Em dash
mother-in-law
October–December
6:30–8:45 A.M.
It’s twice as long as the en dash—it’s about the size of a capital M.
“”‘’–—
opening double quoteclosing double quoteopening single quoteclosing single quoteen dashem dash
“” ‘ ’ – —
Not Using Hanging Punctuation
SIN NUMBER FOUR
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader.
• Even distribution of typeset material.• A minimum of distractions and anomalies.• Aimed at producing clarity and transparency.
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial,
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader.
Even distribution of typeset material.A minimum of distractions and anomalies.Aimed at producing clarity and transparency.
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial,
•••
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader.
“ Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.”
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader.
Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.”
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial
“
Using Too Much Emphasis
SIN NUMBER FIVE
Hear me now, and understand me later!
“A little care to typography goes a long way in making your site more professional and elegant.
Jeff Croft, Elegant Web Typography
“A little care to typography goes a long way in making your site more professional, elegant, and readable.
Jeff Croft + Tony
The End
Tony Naccarato@tonynaccarato