DDQ TUE 2023-04-18
39. Typography¶
39.1. Agenda¶
Released |
Category |
Assignment |
Day |
Date |
|---|---|---|---|---|
2023-01-10 |
Term Project |
FRI |
2023-01-20 |
|
2023-01-19 |
Paper Pres. |
THU |
2023-01-26 |
|
2023-01-19 |
Term Project |
Milestone 1: Problem Proposal (Part 1) |
FRI |
2023-01-27 |
2023-01-19 |
Paper Pres. |
THU |
2023-02-09 |
|
2023-01-19 |
Term Project |
Milestone 1: Problem Proposal (Part 2) |
FRI |
2023-02-10 |
2023-02-07 |
Exams |
FRI |
2023-02-10 |
|
2023-02-07 |
Exams |
TUE |
2023-02-14 |
|
2023-02-16 |
Term Project |
FRI |
2023-03-17 |
|
2023-03-20 |
Term Project |
FRI |
2023-04-14 |
|
2023-03-28 |
Exams |
FRI |
2023-04-21 |
|
2023-03-28 |
Exams |
THU |
2023-04-27 |
|
2023-03-28 |
Term Project |
TUE |
2023-05-09 |
General Announcements
Exam 2 vs. Final Exam
As explained in the Exams section of the syllabus, the final milestone of your term project (i.e., Milestone 4: Prototyping & Testing) serves as your final examination in this course. Exam 2 is, therefore, a regular exam; it is not the final exam. The final term project milestone is considered a “take-home final exam.”
No In-Person Meeting on WED 04/19
CSCI 4800/6800 will not meet in-person on WED 04/19. Class is NOT cancelled. Instead, you should refer to the DDQ page for that day for instructions – you will be asked to meet with your team project team and report your progress in a Piazza post. The paper presentation that was originally scheduled for WED will happen on THU instead.
Activity
39.2. Activity¶
39.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:
- baseline¶
The invisible line upon which a line of text rests.
- initial¶
- illuminated initial¶
An enlarged and decorated letter introducing an important word or section of text.
Fig. 39.1 The FedEx logotype. It is notable for containing a subliminal right-pointing arrow in the negative space between the “E” and the “X”.¶
Fig. 39.2 The Amazon logotype. It is notable for containing an arrow from “A” to “Z,” which may elicit feelings related to completeness and availability in viewers.¶
See also
Jacopo Prisco. 2018. Follow the arrow: Hidden designs in famous logos. CNN, Cable News Network, Warner Media Company.
39.2.2. Type Collections¶
Type can be organized into named collections:
39.2.3. Legibility vs. Readability¶
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.
39.2.4. 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. 39.3 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.
39.2.5. Sans Serif Typefaces¶
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. 39.4 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.
39.2.6. 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.
39.2.7. 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.
39.2.8. 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 [TYPE: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.
39.2.9. Kerning¶
- kerning¶
The process of adjusting the spacing between characters in a font, usually to achieve a visually pleasing result.
Fig. 39.5 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.¶
39.2.10. 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).
39.2.11. Breakout Groups¶
No in-class breakout group activity today.
39.2.12. After Breakout Groups¶
N.A.
39.2.13. After Class¶
Before class on THU 2023-04-20, individually create a followup discussion in Piazza @117 that responds to the following prompt:
Prompt
Consider some possible meanings for the terms typography win and typography fail in the context of user experience design, then include your definitions for those terms in your post along with at least one example that exemplifies each. Provide a brief description for each example, including a justification. Be sure to use terms from typography and design, whenever possible, to help make your case.
Continue reading the Practicum module.
Read the abstracts for upcoming paper presentations – the schedule can be found here.
Here is a list of current assignments:
Released
Category
Assignment
Day
Date
2023-01-10
Term Project
FRI
2023-01-20
2023-01-19
Paper Pres.
THU
2023-01-26
2023-01-19
Term Project
Milestone 1: Problem Proposal (Part 1)
FRI
2023-01-27
2023-01-19
Paper Pres.
THU
2023-02-09
2023-01-19
Term Project
Milestone 1: Problem Proposal (Part 2)
FRI
2023-02-10
2023-02-07
Exams
FRI
2023-02-10
2023-02-07
Exams
TUE
2023-02-14
2023-02-16
Term Project
FRI
2023-03-17
2023-03-20
Term Project
FRI
2023-04-14
2023-03-28
Exams
FRI
2023-04-21
2023-03-28
Exams
THU
2023-04-27
2023-03-28
Term Project
TUE
2023-05-09
References
- TYPE:1
Ellen Lupton. 2010. Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students. Princeton Architectural Press, New York, 2 edition. ISBN 978-1568989693.