DDQ TUE 2021-10-26

28. Typography

28.1. Agenda

  1. General Announcements

  2. Discussion & Activity

Table 28.1 Current Assignments for Everyone

Category

Assignment

Day

Date

Term Project

Milestone 3: Design Alternatives

FRI

2021-11-05

Exams

Exam 21

TBD

TBD
1

As explained in the Exams section of the syllabus, the final milestone of your term project serves as your final examination in this course. Exam 2 is, therefore, a regular exam; it is not the final exam.

28.2. Activity

28.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.

initial
illuminated initial

An enlarged and decorated letter introducing an important word or section of text.

The Fedex logo introduced in 2016

Fig. 28.1 The FedEx logotype. It is notable for containing a subliminal right-pointing arrow in the negative space between the “E” and the “X”.

The corporate logo of Amazon.

Fig. 28.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.

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

MDN: CSS: Fonts

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.

28.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.

example of a serif font with individual serifs marked redx

Fig. 28.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:

Other Examples

serif
The name 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.
Texturina
Texturina is a highly applicable typeface with the richness of Blackletter, yet maintaining fluidity by combining broken and softened curves. Texturina is designed by Guillermo Torres. To contribute, see the project page here.
Playfair Display
Playfair is a transitional design. In the European Enlightenment in the late 18th century, broad nib quills were replaced by pointed steel pens as the popular writing tool of the day. Together with developments in printing technology, ink, and paper making, it became to print letterforms of high contrast and delicate hairlines that were increasingly detached from the written letterforms. The Playfair project is led by Claus Eggers Sørensen, a type designer based in Amsterdam, Netherlands. To contribute, see the project page here.

28.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.

example of a sans-serif font

Fig. 28.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:

Other Examples

sans-serif
The name 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.
Oswald
Oswald is a reworking of the classic style historically represented by the "Alternate Gothic" sans serif typefaces. The characters of Oswald were initially re-drawn and reformed to better fit the pixel grid of standard digital screens. Oswald is designed to be used freely across the internet by web browsers on desktop computers, laptops and mobile devices. Oswald is designed by Vernon Adams. To contribute, see the project page here.
Exo 2
Exo 2 is a complete redrawing of Exo, a contemporary geometric sans serif typeface that tries to convey a technological/futuristic feeling while keeping an elegant design. Exo is a very versatile font, so it has 9 weights (the maximum on the web) and each with a true italic version. Exo 2 has a more organic look that will perform much better at small text sizes and in long texts. Exo 2 is designed by Natanael Gama. To contribute, see the project page here.

28.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
The name 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.

28.2.5. Other Typefaces

Examples

fantasy
The name 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
The name 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.
Roboto Mono
Roboto Mono is a monospaced addition to the Roboto type family. Like the other members of the Roboto family, the fonts are optimized for readability on screens across a wide variety of devices and reading environments. Roboto Mono is designed by Christian Robertson.

28.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 [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.

28.2.7. Kerning

kerning

The process of adjusting the spacing between characters in a font, usually to achieve a visually pleasing result.

kerning example

Fig. 28.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.

LAYER
LAYER
LICK
LICK
kerning
kerning
keming

The result of improper kerning.

28.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 (or 3:1 for large text).

See also

Apple Human Interface Guidelines: Visual Design: Typography

28.2.9. After Class

  1. 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 discussion, individually respond to the following in one or two followup discussions to Piazza @83 before 11:55PM tonight.

    Typohraphy Win

    1. Definition of typography win.

    2. Include a picture of a design that exemplifies your definition of a typography win.

    3. Provide a brief description of your example, including a justification. Be sure to use terms from typography and design whenever possible to help make your case.

    Typography Fail

    1. Definition of typography fail.

    2. Include a picture of a design that exemplifies your definition of a typography fail.

    3. Provide a brief description of your example, including a justification. Be sure to use terms from typography and design whenever possible to help make your case.

  2. Before 11:55PM on WED 2021-10-27 (Oct 27), comment on another group’s post by replying to their followup discussion in Piazza @83.

    Comments

    Please keep the comments polite and constructive. In addition to whatever else you want to write, please comment on:

    • one or more aspects that you like or think is interesting; and

    • one or more aspects that you think needs improvement.

    Be sure to provide a brief justification for each, and use terms from typography and design whenever possible to help make your case.

  3. Continue reading the Design and Practicum modules, and make sure you’re aware of current assignments and their due dates.

  4. Suggestion: Consider reproducing an interface relevant to your term project as a mockup in Adobe XD or Figma.

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.