• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Initiate Typography Presentation
 

Initiate Typography Presentation

on

  • 529 views

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

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

Statistics

Views

Total Views
529
Views on SlideShare
529
Embed Views
0

Actions

Likes
2
Downloads
34
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Initiate Typography Presentation Initiate Typography Presentation Presentation Transcript

    • 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 something : Introduce 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.
    • “ 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. Robert Bringhurst, The Elements of Typographic Style
    • 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 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 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 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
    • 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 different styles within the typeface ‣ Can be used in body text or display text ‣ Looks good at any size
    • 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
    • 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
    • “ 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?
    • 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
    • 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
    • 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 Nielson
    • Measure Line length
    • 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
    • Hierarchy & Scale Type 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 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
    • 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
    • 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
    • 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
    • Leading Line 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
    • 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
    • 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
    • “ 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
    • 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
    • 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
    • “ 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
    • 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
    • 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 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.
    • 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 about the size of a capital M.
    • “ opening double quote “ ” closing double quote ” ‘ opening single quote ‘ ’ closing single quote ’ – en dash – — em 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 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
    • 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 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