Initiate Typography
Selection, Arrangement & formatting

Tony Naccarato

SORT 2011
@tonynaccarato
#typesort
ini•ti•ate
1. to cause or facilitate the beginning of :
set going
2. to instruct in the rudiments or principles
of somethi...
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.
“

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....
What you need to know

Typography
Typography isn’t about picking the coolest font
Dysfunction
Typothermia
The refusal to make a lifelong commitment to a single typeface—or even to
five or six, as some doct...
“

Typography has one plain duty
before it and that is to convey
information in writing. No
arguments or considerations
ca...
Legibility & Readability
Legibility
Readability
Legibility
Can I understand and recognize the characters?

Readability
Legibility
Can I understand and recognize the characters?

Readability
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 invis...
1

Selection
234,580
What Typeface Should I
Use?
What context will the typeface be used and what
purpose will it serve?
Body
The text we read
Text

Display
Type used at large sizes
Text
Serif or Sans-serif ?
Sans-serif
Serif vs. Sans-Serif in Body Copy

34%

66%

Serif

Sans-Serif
Serif vs. Sans-Serif in Display Copy

40%

60%

Serif

Sans-Serif
Georgia
Arial
Verdana
Lucida Grande
Helvetica
Times New Roman
Other
0

5

Body Text

10

15

Display Text

20
CHOOSING YOUR

Body
The text we read
1

Generous x-height
NOT GOOD

GOOD

Fox

Fox

144pt, Lindon Hill

144pt, Georgia
2

Familiar Letterforms
NOT GOOD

Il1
144pt, Gill Sans
2

Familiar Letterforms
NOT GOOD

GOOD

Il1

Il1

144pt, Gill Sans

144pt, Georgia
3

Designed for the screen

M
Verdana

9
Verdana
18

Verdana
36

Verdana
60
CHOOSING YOUR

Display text
Type used at large sizes
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 diff...
WELCOME TO THE SHOW

Typography
In traditional typography, text is composed to create a readable, coherent, and visually
s...
WELCOME TO THE SHOW

Typography
In traditional typography, text is composed to create a readable, coherent, and visually
s...
“

It is essential to be
creative…, but typography
must be legible or else it
becomes almost useless

Matt Cronin, 10 Prin...
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?
Typography

Franklin Gothic Book

In traditional typography, text is composed to
create a readable, coherent, and visually...
Typography

Georgia

In traditional typography, text is composed
to create a readable, coherent, and visually
satisfying w...
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

Body Text

10

15

Display Text

20
2

Arrangement
“

How users read on the web:
they don't. Instead, they scan
the page, picking out individual
words and sentences.

Jakob ...
Measure
Line length
The Measure
In traditional typography, text is composed to create
a readable, coherent, and visually satisfying whole
that...
Hierarchy & Scale
Type Size
“

You should understand that
the relationship between
different sizes of type within a
composition is meaningful…
create ...
ab

ab

ab

ab

ab

ab ab

ab ab

6 7 8 9 10 11 12 14 16

ab ab
18

21

ab
24

ab ab
36

48

ab

ab

ab

ab

8 13

21

34
...
Heading font size ÷ Body copy font size = 1.96
Typography
In traditional typography, text is composed to create a
readable...
Typography
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that ...
36
18

Typography
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whol...
Leading
Line Height
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invis...
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invis...
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invis...
Spacing
“

Space in typography is like
time in music.

Robert Bringhurst
Typography
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that ...
Typography
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that ...
“

Space plays the most
important part in maintaining
flow of your design. Good
use of space will tell the
reader where to...
Flow

Start

Typography
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfyin...
White Space is Good
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying wh...
“

Once you know how to design
and manipulate the space
outside, inside, and around
your content, you’ll give your
readers...
Paragraphs
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole
that works invis...
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole
that works invis...
In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole
that works invis...
3

Formatting
3

Type Sins
SI N N UM B E R O NE

Two Spaces After a
Period.
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
pa...
SI N N UM B E R T W O

Using Prime Marks for
Quotes
'"
'"
'"
6' 1"
“”
“”

“Where did the cat go?”
SI N N UM B E R T HRE E

Improper Use of the
Hyphen
-

Hyphen

mother-in-law

–

En dash

October–December
6:30–8:45 A.M.

—

Em dash

It’s twice as long as the
en dash—it’s ...
“

opening double quote

“

”

closing double quote

”

‘

opening single quote

‘

’

closing single quote

’

–

en dash...
SI N N UM B E R F O UR

Not Using Hanging
Punctuation
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invis...
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invis...
SI N N UM B E R F I V E

Using Too Much
Emphasis
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...
“

A little care to typography
goes a long way in making
your site more professional,
elegant, and readable.

Jeff Croft +...
The End
Tony Naccarato
@tonynaccarato
Initiate Typography Presentation
Initiate Typography Presentation
Initiate Typography Presentation
Initiate Typography Presentation
Initiate Typography Presentation
Initiate Typography Presentation
Initiate Typography Presentation
Initiate Typography Presentation
Initiate Typography Presentation
Initiate Typography Presentation
Initiate Typography Presentation
Upcoming SlideShare
Loading in...5
×

Initiate Typography Presentation

768

Published on

Presentation on the basics of typography at SORT, a Salt Lake City Tech Conferenece

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
768
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
42
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Initiate Typography Presentation

  1. 1. Initiate Typography Selection, Arrangement & formatting Tony Naccarato SORT 2011
  2. 2. @tonynaccarato #typesort
  3. 3. ini•ti•ate 1. to cause or facilitate the beginning of : set going 2. to instruct in the rudiments or principles of something : Introduce Merriam-Webster Dictionary
  4. 4. Why Typography Matters
  5. 5. “ Good type on the web might not be our primary focus when creating a website but typography is unavoidable.
  6. 6. “ 95% of the information on the web is written language. Oliver Reichenstein, Web Design is 95% Typography
  7. 7. What is typography? Typography entails the selection, arrangement and formatting of type.
  8. 8. “ Typography exists to honor the content. Robert Bringhurst, The Elements of Typographic Style
  9. 9. “ 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. Robert Bringhurst, The Elements of Typographic Style
  10. 10. What you need to know Typography
  11. 11. Typography isn’t about picking the coolest font
  12. 12. Dysfunction Typothermia The 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
  13. 13. “ 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
  14. 14. Legibility & Readability
  15. 15. Legibility Readability
  16. 16. Legibility Can I understand and recognize the characters? Readability
  17. 17. Legibility Can I understand and recognize the characters? Readability Can I read this comfortably for a long time?
  18. 18. 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 process of accretion, with considerable overlap between historical periods. 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, 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
  19. 19. 1 Selection
  20. 20. 234,580
  21. 21. What Typeface Should I Use?
  22. 22. What context will the typeface be used and what purpose will it serve?
  23. 23. Body The text we read Text Display Type used at large sizes Text
  24. 24. Serif or Sans-serif ?
  25. 25. Sans-serif
  26. 26. Serif vs. Sans-Serif in Body Copy 34% 66% Serif Sans-Serif
  27. 27. Serif vs. Sans-Serif in Display Copy 40% 60% Serif Sans-Serif
  28. 28. Georgia Arial Verdana Lucida Grande Helvetica Times New Roman Other 0 5 Body Text 10 15 Display Text 20
  29. 29. CHOOSING YOUR Body The text we read
  30. 30. 1 Generous x-height NOT GOOD GOOD Fox Fox 144pt, Lindon Hill 144pt, Georgia
  31. 31. 2 Familiar Letterforms NOT GOOD Il1 144pt, Gill Sans
  32. 32. 2 Familiar Letterforms NOT GOOD GOOD Il1 Il1 144pt, Gill Sans 144pt, Georgia
  33. 33. 3 Designed for the screen M
  34. 34. Verdana 9 Verdana 18 Verdana 36 Verdana 60
  35. 35. CHOOSING YOUR Display text Type used at large sizes
  36. 36. Dress for the Occasion
  37. 37. This afternoon, let’s go for a walk in the park.
  38. 38. This afternoon, let’s go for a walk in the park.
  39. 39. Workhorse Typeface
  40. 40. 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
  41. 41. WELCOME TO THE SHOW Typography 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. Fonts Do 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
  42. 42. WELCOME TO THE SHOW Typography 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. Fonts Do 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
  43. 43. “ 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
  44. 44. Don’t be Wimpy
  45. 45. “ Keep it exactly the same, or change it a lot — avoid wimpy, incremental variations Dan Mayer, What Font Should I Use?
  46. 46. Typography Franklin Gothic Book 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. Helvetica Neue Fonts Do 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
  47. 47. Typography Georgia 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. Verdana Fonts Do 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
  48. 48. Georgia typeface is named after a tabloid headline titled, “Alien heads found in Georgia”.
  49. 49. Georgia Arial Verdana Lucida Grande Helvetica Times New Roman Other 0 5 Body Text 10 15 Display Text 20
  50. 50. 2 Arrangement
  51. 51. “ How users read on the web: they don't. Instead, they scan the page, picking out individual words and sentences. Jakob Nielson
  52. 52. Measure Line length
  53. 53. The Measure 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 45–75 characters
  54. 54. Hierarchy & Scale Type Size
  55. 55. “ 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
  56. 56. ab ab ab ab ab ab ab ab ab 6 7 8 9 10 11 12 14 16 ab ab 18 21 ab 24 ab ab 36 48 ab ab ab ab 8 13 21 34 55 ab ab ab ab 60 ab 89 72 84 ab 144 ab ab 96 110
  57. 57. Heading font size ÷ Body copy font size = 1.96 Typography 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. 14pt – 28pt Typography 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 20pt – 40pt
  58. 58. Typography 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. Fonts Do 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
  59. 59. 36 18 Typography 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. 36 Fonts 24 Do you mean fonts or typefaces? 18 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
  60. 60. Leading Line Height
  61. 61. 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.
  62. 62. 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
  63. 63. 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
  64. 64. Spacing
  65. 65. “ Space in typography is like time in music. Robert Bringhurst
  66. 66. Typography 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. Fonts Do 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
  67. 67. Typography 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. Fonts Do 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
  68. 68. “ 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
  69. 69. Flow Start Typography 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. Stop Start Fonts Flow Do you mean fonts or typefaces? Stop 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
  70. 70. White Space is Good 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. Fonts Do 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
  71. 71. “ Once you know how to design and manipulate the space outside, inside, and around your content, you’ll give your readers a head start… Mark Boulton, Whitespace
  72. 72. Paragraphs
  73. 73. 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
  74. 74. 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
  75. 75. 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
  76. 76. 3 Formatting
  77. 77. 3 Type Sins
  78. 78. SI N N UM B E R O NE Two Spaces After a Period.
  79. 79. 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.
  80. 80. SI N N UM B E R T W O Using Prime Marks for Quotes
  81. 81. '"
  82. 82. '"
  83. 83. '" 6' 1"
  84. 84. “”
  85. 85. “” “Where did the cat go?”
  86. 86. SI N N UM B E R T HRE E Improper Use of the Hyphen
  87. 87. - Hyphen mother-in-law – En dash October–December 6:30–8:45 A.M. — Em dash It’s twice as long as the en dash—it’s about the size of a capital M.
  88. 88. “ opening double quote “ ” closing double quote ” ‘ opening single quote ‘ ’ closing single quote ’ – en dash – — em dash —
  89. 89. SI N N UM B E R F O UR Not Using Hanging Punctuation
  90. 90. 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,
  91. 91. 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
  92. 92. SI N N UM B E R F I V E Using Too Much Emphasis
  93. 93. Hear me now, and understand me later!
  94. 94. “ A little care to typography goes a long way in making your site more professional and elegant. Jeff Croft, Elegant Web Typography
  95. 95. “ A little care to typography goes a long way in making your site more professional, elegant, and readable. Jeff Croft + Tony
  96. 96. The End Tony Naccarato @tonynaccarato
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×