Initiate Typography Presentation

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,



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.

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?


Helvetica Neue

WELCOME TO THE SHOW




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?



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



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


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

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



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


1.5 x font size



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

“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




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.


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,


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



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



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,


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,

•••


“ 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


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

Initiate Typography Presentation

Design

Transcript of Initiate Typography Presentation