![Typeface vs. Fonts [A Song vs. an MP3]
These two words are commonly used interchangeably, but they have two very
separate meanings.
• Typeface is used when describing the what you see. It is an abstract way of
describing the way a specific collection of letters or characters looks or feels.
“This typeface really pulls the whole design together” [A Song]
• Font describes the physical embodiment or tangible representation of the
collection of letters and characters.
“You should change the font size to 14pt so it fits in the box” [an MP3]](https://image.slidesharecdn.com/11-230510050003-1a0b54f4/85/11-Typography-data-visualization-pdf-18-320.jpg)
11. Typography data visualization .pdf
- 1. Data and Information Visualization: Typography & Data Visualization Design Semester 2 2018/2019 Created By: Jeffrey A. Shaffer (Modified slightly for Data and Information Viz)
- 2. Typography & Data Visualization Design Created By: Jeffrey A. Shaffer (Modified slightly for Data and Information Viz)
- 3. Goals By completing the course modules, students will: • Understand the fundamentals of typography and graphics • Explore the use of font and its effect on emotion • Learn how typography is used in data visualization.
- 4. Typography & Data Visualization Design Who gives a ?
- 8. What is Typography? • Typography - the art and technique of arranging type to make written language: • Legible • Readable • and appealing when displayed. • Designing and arranging letters and characters.
- 9. The arrangement of type includes: • Adjusting the space between pairs of letters • Selecting • Points sizes • Leading • Line lengths • Letter spacing
- 10. Point Size • A font is typically measured in pt (points). • Points dictate the height of the lettering. • There are approximately 72 (72.272) points in one inch or 2.54 cm. • For example, the font size 72 would be about one inch tall, and 36 would be about a half of an inch.
- 11. Leading Leading is a typography term that describes the distance between each line of text. It is pronounced ledding (like "sledding" without the "s").
- 12. Line Length The distance between the left and right edges of a text block.
- 13. Letter Spacing • letter-spacing, also called tracking, refers to the amount of space between a group of letters to affect density in a line or block of text. • Letter-spacing can be confused with kerning. • Letter-spacing refers to the overall spacing of a word or block of text affecting its overall density and texture.
- 14. Why is it important? Typography is everywhere. • Phones • Computers • Billboards • Social Media • Newspapers • Advertisements Even your Chipotle has aspects of typography that makes it more appealing to the consumer.
- 15. Recent Examples of Typography • September 2015 – Google famously changes its logo to a san-serif type making it easier to scale. This slight change caused a social media uproar. • June 2016 – Facebook changes its typeface from Helvetica to Geneva. The difference was noticeable even though Geneva is only slightly thinner and lighter. • January 2017 – Apple changes its website and iOS 9 operating system from Helvetica Neue to a new typeface they created, called San Francisco, to increase the design appeal.
- 16. “If I had never dropped in on that single course in college, the Mac would have never had multiple typefaces or proportionally spaced fonts.” - Steve Jobs
- 18. Typeface vs. Fonts [A Song vs. an MP3] These two words are commonly used interchangeably, but they have two very separate meanings. • Typeface is used when describing the what you see. It is an abstract way of describing the way a specific collection of letters or characters looks or feels. “This typeface really pulls the whole design together” [A Song] • Font describes the physical embodiment or tangible representation of the collection of letters and characters. “You should change the font size to 14pt so it fits in the box” [an MP3]
- 19. These are all the same typeface – Garamond, but each one of these is a different font. http://nerdplusart.com/type-terminology-smackdown/ Example using Garamond Typeface
- 21. The Anatomy of a Typeface
- 22. The Basics of Type Classification serif Old Style (Adobe Jenson) Transitional (Times New Roman) Modern (Dido) Slab-serif (American Typewriter) sans-serif Grotesque (News Gothic) Neo-Grotesque (Helvetica) Humanist (Gill Sans) Geometric (Futura)
- 24. Anatomy of a Typeface
- 25. Adapted from A Crash Course in Typography: The Basics of Type Source: https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html The Anatomy of a Typeface
- 26. Cap height: The distance from the baseline to the top of the capital letter. Meanline: the line that fits most of the lowercase letters. This is known as the x- height, which is the height of the lowercase x. X-height: Is the distance between the baseline and the meanline, it's the height of the body of the lowercase letter, for example, the lowercase letter x (hence the name). Baseline: The line where the letters sit. Ascender: The portion of a letter that extends above the meanline of a font -- i.e., is taller than the font's x-height. (In this case, you’ll also notice the letter ‘h’ is actually taller than the x-height.) Descender: The longest point on a letter
- 27. The Anatomy of a Typeface
- 28. Cross bar: The bar that goes across the inside of the letter and connects one side to another Bowl: The curved part of the character that encloses the circular or curved parts of some letters, like 'd,' 'b,' 'o,' 'D,' and 'B.' (In this case, it's that round shape of the letter ‘b') Finial: The tapered end of letters such as ‘e’ or ‘c.' Terminal: A type of curve that you see at the top of the letter ‘f’ or the end of the letter ‘j.'
- 29. The Anatomy of a Typeface ligature: two or more letter are joined as a single glyph. This is see too often in web or even print, but it can create beautiful look and in some cases increase readability.
- 31. Source: https://blog.hubspot.com/marketing/typography-terms-introduction The Anatomy of a Typeface Kerning is the modification of the space between two letters.
- 32. Source: https://blog.hubspot.com/marketing/typography-terms-introduction The Anatomy of a Typeface Tracking is very similar to Kerning however tracking adjusts the space between all letters to distribute them evenly rather than altering two letters.
- 33. Source: https://blog.hubspot.com/marketing/typography-terms-introduction The Anatomy of a Typeface
- 34. Does Typography Connote Emotion?
- 41. Perception of Fonts Perceived Personality Traits and Uses
- 42. Emotions and Personalities associated with different fonts. serif fonts – “stable”, “practical” and “mature” sans serif – not positive or negative script – ‘”feminine” Modern fonts – “assertive” and “coarse” A Research Study in 2006
- 44. Top Three Fonts
- 45. “the challenging font choice made the task seem to require more time to achieve.” A Research Study in 2008
- 46. Processing fluency effects: Can the content and presentation of participant information sheets influence recruitment and participation for an antenatal intervention? The easier the font was to read, the less complex the intervention was perceived A Research Study in 2014
- 48. 10 Rules for Effectively Combining Fonts Source: https://designschool.canva.com/blog/combining-fonts-10-must-know-tips-from-a-designer
- 49. 10 Rules for Effectively Combining Fonts 1. Choose complimentary fonts 2. Establish a visual hierarchy 3. Consider context 4. Mix serif with sans serif 5. Create contrast 6. Stay away from font conflict 7. Avoid fonts that are too similar 8. Use fonts in the same family 9. Limit the number of fonts used 10.Practice Source: https://designschool.canva.com/blog/combining-fonts-10-must-know-tips-from-a-designer
- 50. 1. Choose complimentary fonts Fonts have different aesthetics to them that create different moods and have different personalities.
- 51. 1. Choose complimentary fonts For example you may use bubble letters for a birthday party invitation but it wouldn’t be appropriate for a business memo.
- 52. 2. Establish a visual hierarchy Use bold, italics, headlines and subhead lines, and captions to organize how the letters and characters are read on the page. A good way to organize font based on hierarchy is to determine which information is the most important and make that stand out.
- 53. 3. Consider context Keep in mind where your font will be places. Use fonts that will be easy to read in the space provided as well as use font size to help with readability. Another aspect of context and realizing when to use a neutral font vs. something that grabs your attention.
- 54. 4. Mix serif with sans serif As long as you stay within the same type family serif and sans serif tend to look good together
- 55. 5. Create contrast You can achieve contrast in a number of ways such as size, color, serif vs. sans serif, space etc. Differences in font can help make separate roles for the font letting them show different information.
- 56. • The mid level font is in blue, which on the Complaints Dashboard is also used to highlight the two most recent rating periods. • If the top level font were blue it would completely dominate the visualization. • Having the top level in the lighter gray and the mid level in blue creates a balance of the font
- 57. Source: The Big Book of Dashboards (BigBookofDashboards.com)
- 58. 6. Stay away from font conflict Generally speaking, typefaces that share a couple qualities—maybe they have similar proportions, or the lowercase letters have the same height (known as “x-height”)—are more likely to look harmonious together, even if the overall appearance differs.
- 59. 6. Stay away from font conflict While contrast can be helpful in font design avoid fonts that are drastically different.
- 60. 7. Avoid fonts that are too similar On the flipside you also want to avoid fonts that are too similar because you will be unable to establish the hierarchy and be unable to display those distinct roles of each font.
- 61. 8. Use fonts in the same family Fonts in the same family are usually made to work together well, so it is a good idea to merge different fonts from the same family to create the variation needed for a good design.
- 62. 9. Limit the number of fonts The rule of thumb is to usually stick to two or three fonts. A large variety of fonts can look good when going for certain aesthetics but there is a thin line before the amount of fonts looks conflicting and cluttered.
- 63. 10. Practice Makes Perfect
- 64. 2008 Feltron Report http://feltron.com It has a very clear hierarchy, contrast, mixing a serif with a sans serif is a beautiful way.
- 65. Word Clouds - Caution
- 66. Bush State of the Union - 2002
- 67. Obama State of the Union - 2010
- 68. Data from: http://www.studentsreview.com/OH/UC_c.html Word cloud on Student Feedback for the University of Cincinnati Is this good or bad?
- 69. (left) Single-word phrases (unigrams) (right) Multiword phrases Source: The Stanford Visualization Group (vis.stanford.edu) "Without the Clutter of Unimportant Words“: Descriptive Keyphrases for Text Visualization Jason Chuang, Christopher D. Manning, Jeffrey Heer Online Biography of the Pop Singer Lady Gaga
- 72. http://neoformix.com/2009/Sep11PagerData.html “Perhaps a more useful view of the data is provided by this set of timeline graphs.”