DDQ MON 2020-11-23 @ 12:40 PM
38. Typography¶
38.1. Agenda¶
General Announcements
Paper presentation videos are now posted to eLC.
Any remaining presentations and guest speaker videos will be uploaded before this weekend.
Tentative Roadmap
Day
Date
Event / Assignment
TUE
11-24
Last DDQ prior to Thanksgiving
THU
11-26
No Class: Thanksgiving Holiday
THU
12-03
MON
12-07
Last DDQ prior to Finals
FRI
12-11
Activity
38.2. Activity¶
38.2.1. Introduction to Typography¶
- typography
The art and technique of arranging type to make written language legible, readable, and appealing when displayed.
- type
One or more characters or some text; the term usually refers to one of the following:
- glyph
Digital. A single character within a given font.
- movable type
Physical. A rectangular block usually of metal bearing a relief character from which an inked print can be made.
- logotype
Text that is part of a logo or brand name.
- baseline
The invisible line upon which a line of text rests.
Fig. 38.1 The FedEx logotype. It is notable for containing a subliminal right-pointing arrow in the negative space between the “E” and the “X”.¶
Type can be organized into named collections:
- font
A complete collection of type with identical weight and/or style.
- font family
- typeface
A collection of fonts with strict commonalities of design.
- font weight
The weight (or boldness) of a font,
- font style properties
Properties that affect the visual presentation of a font or typeface.
See also
You always want text to be both legible and readable:
- legibility
The extent to which characters in a typeface or font are distinguishable.
- readability
The extent to which a user can follow and understand text. While things like grammar, word choice, and sentence structure play an important role in readability, so do design elements such as typeface and style.
38.2.2. Serif Typefaces¶
- serif
A small stroke line in type that is regularly attached to the end of a larger stroke.
- serif typeface
A typeface containing serifs.
Serif typefaces are generally considered superior for print media; however, no study to date has shown a statistically significant improvement in the readability of serif fonts in digital media.
Fig. 38.2 An example of a serif font. The serifs in this text are marked red, and the font is Times New Roman. Image Credit: User:Stannered; GFDL.¶
The mood and feelings most associated with serif typefaces are classic, elegant, formal, confident and established. Notable examples include:
Georgia; and
Other Examples
serif is used to denote the generic font family name for
serif fonts in CSS. When used, the browser (or other renderer) selects an
acceptable default serif font when necessary. For this reason, this font,
as displayed on this page, may appear different when viewed using different
browswers or on different devices.
38.2.3. Sans Serif Typefaces¶
- sans-serif typeface
A typeface that is without serifs.
In digital displays, sans-serif typefaces are used more often than serif typefaces. Historically, this is likely due to the low resolution displays where details like serifs may disappear or appear too large due to visible pixel mapping.
Fig. 38.3 An example of a sans-serif font. As the name suggests, it is “without” serif strokes; the font is Arial. Image Credit: User:Stannered; GFDL.¶
The mood and feelings most associated with sans serif typefaces are modern, friendly, direct, clean and minimal. Some notable examples of sans serif typefaces include:
Futura; and
Other Examples
sans-serif is used to denote the generic font family name for
sans-serif fonts in CSS. When used, the browser (or other renderer) selects an
acceptable default sans-serif font when necessary. For this reason, this font,
as displayed on this page, may appear different when viewed using different
browswers or on different devices.
38.2.4. Script Typefaces¶
- script typeface
A typeface based upon or inspired by the varied and often fluid stroke created by handwriting.
Other Examples
cursive is used to denote the generic font family name for
script fonts in CSS. When used, the browser (or other renderer) selects an
acceptable default script font when necessary. For this reason, this font,
as displayed on this page, may appear different when viewed using different
browswers or on different devices.
38.2.5. Other Typefaces¶
Examples
fantasy is used to denote the generic font family name for
decorative fonts (e.g., for titles, etc.) in CSS. When used, the browser
(or other renderer) selects an acceptable default decorative font when necessary.
For this reason, this font,
as displayed on this page, may appear different when viewed using different
browswers or on different devices.
monospace is used to denote the generic font family name for
fixed-width fonts in CSS. When used, the browser (or other renderer) selects an
acceptable fixed-width font when necessary. For this reason, this font,
as displayed on this page, may appear different when viewed using different
browswers or on different devices.
38.2.6. Fonts to Avoid¶
A few […] typefaces are of the highest quality, such as Adobe Garamond Pro and Hoefler Text, while other (including Comic Sans, Apple Chancery, and Papyrus) are reviled by design snobs everywhere.
—Ellen Lupton [NOV23:1]
Some notable examples of fonts to avoid include:
Comic Sans: The typeface’s widespread use, often in situations for which it was not intended, has made it the subject of much criticism.
Using Comic Sans is like turning up to a black-tie event in a clown costume.
—Holly Combs, Co-Founder, “Ban Comic Sans” Movement
In 2012, Errol Morris, a film producer and The New York Times essayist, collaborated with Dr. David Dunning (Cornell) on an online typeface experiment. The results suggest that Comic Sans makes readers slightly less likely to believe that a statement they are reading is true. Details about this study can be found here.
See also
Read about appropriate uses of Comic Sans here.
38.2.7. Kerning¶
- kerning
The process of adjusting the spacing between characters in a font, usually to achieve a visually pleasing result.
Fig. 38.4 An example where kerning brings A and V closer, resulting in their serifs overlapping the some of the same horizontal space. Image Credit: User:Sherbyte; Public Domain.¶
- keming
The result of improper kerning.
38.2.8. Typography Guidelines¶
Whether you’re building a website or designing an app, you should strive to meet accepted usability and accessibility guidelines. Here are some typical examples:
Use consistent typefaces and styles whenever possible. For apps, try to use built-in fonts and styles. For web content, make proper semantic use of HTML tags. CSS can be used in most modern development environments to help define and apply styles.
Emphasize important information. Use font weight, size, and color to highlight the most important information in your app or website. Text should have a contrast ratio of at least
4.5:1(or3:1for large text).
38.2.9. References¶
- NOV23:1
Ellen Lupton. Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students. Princeton Architectural Press, New York, 2 edition, 2010. ISBN 978-1568989693.
38.2.10. Participation Activity¶
Before class tomorrow, individually complete the following activity:
Consider some possible meanings for the terms typography win and typography fail in the context of user experience design, then find one example of each that you have personally encountered in a user interface. You get to define those terms for this activity; however, try to come up with a definition that makes sense in the context of user experience design. After some thought and contemplatation, respond to the following in a followup discussion here.
Typography Win
Definition of typography win.
Include a picture of a design that exemplifies your definition of a typography win.
Provide a brief description of your example, including a justification. Be sure to use terms from typography whenever possible to help you make your case.
Typography Fail
Definition of typography fail.
Include a picture of a design that exemplifies your definition of a typography win.
Provide a brief description of your example, including a justification. Be sure to use terms from typography whenever possible to help you make your case.
Comment on another student’s post by replying to their followup discussion.