of 107/107
Initiate Typography Tony Naccarato Selection, Arrangement & formatting SORT 2011

Initiate Typography Presentation

  • View
    104

  • Download
    0

Embed Size (px)

DESCRIPTION

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

Text of Initiate Typography Presentation

  • 1. Initiate Typography Selection, Arrangement & formattingTony NaccaratoSORT 2011

2. @tonynaccarato #typesort 3. initiate 1. to cause or facilitate the beginning of : set going 2. to instruct in the rudiments or principles of something : IntroduceMerriam-Webster Dictionary 4. Why Typography Matters 5. Good type on the web might not be our primary focus when creating a website but typography is unavoidable. 6. 95% of the information on the web is written language.Oliver Reichenstein, Web Design is 95% Typography 7. What is typography? Typography entails the selection, arrangement and formatting of type. 8. Typography exists to honor the content.Robert Bringhurst, The Elements of Typographic Style 9. Paths that each of us is free to follow or notif only we know the paths are there and have a sense of where they lead.Robert Bringhurst, The Elements of Typographic Style 10. What you need to knowTypography 11. Typography isnt about picking the coolest font 12. Dysfunction Typothermia The refusal to make a lifelong commitment to a single typefaceor even to ve or six, as some doctors recommend. The typothermiac is constantly tempted to test drive "hot" new fonts, often without a proper license 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. Legibility & Readability 15. Legibility Readability 16. Legibility Can I understand and recognize the characters?Readability 17. Legibility Can I understand and recognize the characters?Readability Can I read this comfortably for a long time? 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 typographyprose 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 typographyprose ction, non-ction, editorial, educational, religious, scientic, spiritual and commercial writing all have diering 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 seried "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. 1Selection 20. 234,580 21. What Typeface Should I Use? 22. What context will the typeface be used and what purpose will it serve? 23. Body The text we read TextDisplay Type used at large sizes Text 24. Serif or Sans-serif ? 25. Sans-serif 26. Serif vs. Sans-Serif in Body Copy34%66%SerifSans-Serif 27. Serif vs. Sans-Serif in Display Copy40%60%SerifSans-Serif 28. Georgia Arial Verdana Lucida Grande Helvetica Times New Roman Other 05Body Text1015Display Text20 29. CHOOSING YOURBody The text we read 30. 1Generous x-height NOT GOODGOODFoxFox144pt, Lindon Hill144pt, Georgia 31. 2Familiar Letterforms NOT GOODIl1 144pt, Gill Sans 32. 2Familiar Letterforms NOT GOODGOODIl1Il1144pt, Gill Sans144pt, Georgia 33. 3Designed for the screenM 34. Verdana9 Verdana 18Verdana 36Verdana 60 35. CHOOSING YOURDisplay text Type used at large sizes 36. Dress for the Occasion 37. This afternoon, lets go for a walk in the park. 38. This afternoon, lets go for a walk in the park. 39. Workhorse Typeface 40. Workhorse Typeface Easily recognizable letterforms Trustworthy and reliable under heavy or prolonged useHas dierent styles within the typefaceCan be used in body text or display textLooks good at any size 41. WELCOME TO THE SHOWTypography 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 typographyprose ction, non-ction, editorial, educational, religious, scientic, spiritual and commercial writing all have diering 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. WELCOME TO THE SHOWTypography 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 typographyprose 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. It is essential to be creative, but typography must be legible or else it becomes almost uselessMatt Cronin, 10 Principles for Readable Web Typography 44. Dont be Wimpy 45. Keep it exactly the same, or change it a lot avoid wimpy, incremental variationsDan Mayer, What Font Should I Use? 46. TypographyFranklin Gothic BookIn 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 NeueFonts Do you mean fonts or typefaces? Choice of font(s) is the primary aspect of text typographyprose ction, non-ction, editorial, educational, religious, scientic, spiritual and commercial writing all have diering 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. TypographyGeorgiaIn 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.VerdanaFonts Do you mean fonts or typefaces? Choice of font(s) is the primary aspect of text typographyprose 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. Georgia typeface is named after a tabloid headline titled, Alien heads found in Georgia. 49. Georgia Arial Verdana Lucida Grande Helvetica Times New Roman Other 05Body Text1015Display Text20 50. 2Arrangement 51. How users read on the web: they don't. Instead, they scan the page, picking out individual words and sentences.Jakob Nielson 52. Measure Line length 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 typographyprose ction, non-ction, editorial, educational, religious, scientic, spiritual and commercial writing all have diering characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of4575 characters 54. Hierarchy & Scale Type Size 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. abababababab abab ab6 7 8 9 10 11 12 14 16ab ab 1821ab 24ab ab 3648abababab8 13213455abab ab ab 60ab 897284ab 144ab ab 96110 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 28ptTypography 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 at20pt 40pt 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 typographyprose ction, non-ction, editorial, educational, religious, scientic, spiritual and commercial writing all have diering 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. 36 18Typography 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.36Fonts24Do you mean fonts or typefaces?18Choice of font(s) is the primary aspect of text typographyprose ction, non-ction, editorial, educational, religious, scientic, spiritual and commercial writing all have diering 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. Leading Line Height 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. 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. 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 typographyprose ction, non-ction, editorial, educational, religious, scientic, spiritual and commercial writing all have diering 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. Spacing 65. Space in typography is like time in music.Robert Bringhurst 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.FontsDo you mean fonts or typefaces? Choice of font(s) is the primary aspect of text typographyprose ction, non-ction, editorial, educational, religious, scientic, spiritual and commercial writing all have diering 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 seried "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 Grio (a punchcutter who created the model for Aldine typefaces), and 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 typographyprose ction, non-ction, editorial, educational, religious, scientic, spiritual and commercial writing all have diering 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. 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. FlowStartTypography 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 StartFontsFlowDo you mean fonts or typefaces?StopChoice of font(s) is the primary aspect of text typographyprose ction, non-ction, editorial, educational, religious, scientic, spiritual and commercial writing all have diering 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. 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 typographyprose ction, non-ction, editorial, educational, religious, scientic, spiritual and commercial writing all have diering 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 typographyprose ction, non-ction, editorial, educational, religious, scientic, spiritual and 71. Once you know how to design and manipulate the space outside, inside, and around your content, youll give your readers a head startMark Boulton, Whitespace 72. Paragraphs 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 typographyprose ction, non-ction, editorial, educational, religious, scientic, spiritual and commercial writing all have diering 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 seried "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 Grio (a punchcutter who created the model for Aldine typefaces), and Claude Garamond. With their more specialized requirements, newspapers and magazines rely on compact, tightly tted seried text fonts specially designed for the task, which oer maximum exibility, readability and ecient use of page space. Sans serif text fonts are often used for introductory paragraphs, incidental text and whole short articles.Paragraph Spacing 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 typographyprose ction, non-ction, editorial, educational, religious, scientic, spiritual and commercial writing all have diering 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 seried "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 Grio (a punchcutter who created the model for Aldine typefaces), and Claude Garamond. With their more specialized requirements, newspapers and magazines rely on compact, tightly tted seried text fonts specially designed for the task, which oer maximum exibility, readability and ecient 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 seried font of matching style for the text of an article.Indent 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 typographyprose ction, non-ction, editorial, educational, religious, scientic, spiritual and commercial writing all have diering 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 seried "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 Grio (a punchcutter who created the model for Aldine typefaces), and Claude Garamond. With their more specialized requirements, newspapers and magazines rely on compact, tightly tted seried text fonts specially designed for the task, which oer maximum exibility, readability and ecient use of page space. Sans serif text fonts are often used for introductory paragraphs, incidental text and whole short articles.Paragraph Spacing + Indent 76. 3Formatting 77. 3Type Sins 78. SI N N UM B E R O NETwo Spaces After a Period. 79. I have set this paragraph with one space after a period. The ow is a lot better and doesnt 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. Youll 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 dont believe me, check The Chicago Manual of Style. Youll nd answers to a lot of questions. 80. SI N N UM B E R T W OUsing Prime Marks for Quotes 81. '" 82. '" 83. '" 6' 1" 84. 85. Where did the cat go? 86. SI N N UM B E R T HRE EImproper Use of the Hyphen 87. -Hyphenmother-in-lawEn dashOctoberDecember 6:308:45 A.M.Em dashIts twice as long as the en dashits about the size of a capital M. 88. opening double quoteclosing double quoteopening single quoteclosing single quoteen dashem dash 89. SI N N UM B E R F O URNot Using Hanging Punctuation 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 typographyprose ction, non-ction, 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 typographyprose ction, non-ction, editorial, 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 typographyprose ction, non-ction, editorialIn 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 typographyprose ction, non-ction, editorial 92. SI N N UM B E R F I V EUsing Too Much Emphasis 93. Hear me now, and understand me later! 94. A little care to typography goes a long way in making your site more professional and elegant.Jeff Croft, Elegant Web Typography 95. A little care to typography goes a long way in making your site more professional, elegant, and readable.Jeff Croft + Tony 96. The End Tony Naccarato @tonynaccarato