Download as PDF, PPTX
![PARENTHESES, ETC.
[LA Hacks OST (feat. LA Hacks)]
[LA Hacks OST (feat. LA Hacks)]
[LA Hacks OST (feat. LA Hacks)]
[LA Hacks OST (feat. LA Hacks)]](https://image.slidesharecdn.com/typography-150206020332-conversion-gate01/75/An-Introduction-to-Sensible-Typography-35-2048.jpg)
Uploaded byUCLA Association of Computing Machinery
An Introduction to Sensible Typography
This document provides an introduction to typography. It defines typography as involving more than just fonts and discusses why typography is important for maintaining reader attention. The document then provides guidelines for good typography, including using appropriate font sizes, line spacing, and line lengths. It also discusses font choices, formatting styles like quotation marks and hyphens/dashes, and techniques like font mixing and using bold or italic for emphasis. Specific free and paid font recommendations are also provided.
More Related Content
Similar to An Introduction to Sensible Typography
![[DevDay2019] Spacing and Typography, keys to a professional UI design - By Ng...](https://cdn.slidesharecdn.com/ss_thumbnails/duongnguyen-typographyspacing-190408082945-thumbnail.jpg?width=640&height=640&fit=bounds)
More from UCLA Association of Computing Machinery
An Introduction to Sensible Typography
- 1. TYPOGRAPHY AN INTRODUCTION TOSENSIBLE A UCLA ACM PRODUCTION
- 2.
- 3.
- 4. WHAT IS TYPOGRAPHY? •Text is words
- 5. WHAT IS TYPOGRAPHY? •Text is words • Visual text involves typography
- 6.
- 7. WHAT IS TYPOGRAPHY? •Text is words • Visual text involves typography • Typography is NOT just fonts!
- 8. WHY DOES ITMATTER? • Reader attention
- 9. WHY DOES ITMATTER? • Reader attention • Readers do not want to read
- 10. TYPOGRAPHY DOES NOT MAKEYOUR WRITING BETTER
- 11. –You, presumably “But James,I don’t know design!”
- 12. WHY DOES ITMATTER?
- 13. WHY DOES ITMATTER? • Reader attention • Readers do not want to read • Typography already matters to you
- 14. TYPOGRAPHY ISN’T REQUIRED, BUT NEITHERIS SHOWERING
- 16. WHAT IS GOOD? •Typography is utilitarian
- 17. WHAT IS GOOD? •Typography is utilitarian • There is more than one correct answer
- 18. WHAT IS GOOD? •Typography is utilitarian • There is more than one correct answer • Good typography can be ugly
- 19. –Some famous designerdude “Good design is invisible.”
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. QUOTATION MARKS • Straightquotation marks are what you get from the apostrophe key • Curly quotation marks are what you get from being good
- 30.
- 31.
- 32. QUOTATION MARKS • Straightquotation marks are what you get from the apostrophe key • Curly quotation marks are what you get from good typography
- 33. ONE SPACE • Alwaysput one space between sentences
- 34. PARENTHESES, ETC. • Parentheses,brackets, and braces should not take formatting of surrounded material
- 35. PARENTHESES, ETC. [LA HacksOST (feat. LA Hacks)] [LA Hacks OST (feat. LA Hacks)] [LA Hacks OST (feat. LA Hacks)] [LA Hacks OST (feat. LA Hacks)]
- 36.
- 37.
- 38.
- 39.
- 40. SPACES • Nonbreaking spacesexist. Please don’t abuse them.
- 41.
- 42. UNDERLINING • Never underlinein a printed document
- 43. UNDERLINING • Never underlinein a printed document • It’s okay to underline links
- 44. SILLY FONTS James Wu JamesWu JamesWu JamesWu James Wu
- 45. MONOSPACED • Only usein code
- 46.
- 47. SYSTEM FONTS • arebad • are overexposed
- 48.
- 49. BOLD OR ITALIC •Mutually exclusive
- 50. BOLD OR ITALIC •Mutually exclusive • Use for emphasis
- 51. –Syndrome “Everyone can besuper! And when everyone’s super, no one will be.”
- 52. BOLD OR ITALIC •Mutually exclusive • Use for emphasis • Italic for soft emphasis, bold for heavy
- 53. BOLD OR ITALIC •Mutually exclusive • Use for emphasis • Italic for soft emphasis, bold for heavy • With sans-serif fonts, use bold for both
- 54. ALL CAPS • Usesparingly
- 55. ALL CAPS CAPITALIZING FULLPARAGRAPHS IS BAD. WHY DO YOU STILL HAVE CAPS LOCK ENABLED ANYWAY. REMAP THAT TO CONTROL OR SOMETHING. IT’S BETTER FOR CODING. THIS IS EVEN HARDER TO READ WHEN IT’S BOLDED. ARE YOU HAVING FUN READING THIS? ARE YOU HAVING FUN YET?
- 56. HEADERS • ALL CAPSis okay for short ones • Don’t Use Title Case • Don’t underline • Emphasize by adding margins • Use bold over italic • Don’t make too much larger than body
- 57.
- 58. LETTERSPACING • CSS letter-spacing •If you can fit another character in the space, it’s too wide
- 59. FONT MIXING • Neverrequired
- 60. FONT MIXING • Neverrequired • Diminishing returns
- 61. FONT MIXING • Neverrequired • Diminishing returns • Any two different fonts are valid
- 62. FONT MIXING • Neverrequired • Diminishing returns • Any two different fonts are valid • Different fonts for different roles
- 63. OKAY, BUT WHAT FONTSHOULD I USE?
- 64.
- 65. FONTS 101 • Anyonecan appreciate a professional font
- 66. FONTS 101 • Anyonecan appreciate a professional font • Fonts cost money
- 67. FONTS 101 • Anyonecan appreciate a professional font • Fonts cost money • Respect the license
- 68. SANS-SERIF Proxima Nova DIN Pro Futura MetroNova Pro Avenir
- 69. SERIF Grandesign Neue Serif RobotoSlab Quattrocento
- 70.
- 71.
- 72. GOOD FREE FONTS TheLost Type Co-op The League of Moveable Type
- 73.
- 75.
- 77. THANK YOU TWEET ME@ZEKANOSHI