Delivering Typographic Detail On Screen: A Lesson from the Past

Posted inFeatured Interactive Design
Thumbnail for Delivering Typographic Detail On Screen: A Lesson from the Past

Founded in 1940, Print seeks to build a dialogue about design by detailing the intersections of art and culture. Subscribe today to experience it all year long.


This month, Cooper Union’s program Type@Cooper hosted a weeklong event, Typographics, billed as a design festival for people who use type. In addition to workshops, tours, and a book fair, there were two days of talks in Cooper Union’s historic Great Hall, home to spirited debate since 1858.

The speaker program kicked off with Tobias Frere-Jones of Frere-Jones Type and a discussion of how today’s type design can still pick up some useful tricks from the past. Designing ink traps into a typeface to minimize the blurring of of small type running on cheap newsprint, as he did for Retina (1999), is not all that different from adjusting the shapes of letters meant to be read on screens: both are adaptations intended to get the most out of technology used to deliver content.

Pointing out that there will always be a need for new typefaces to solve legibility issues created by advances in technology, Frere-Jones said, “Even though the web is a huge part of how we consume type now, screen environments are not accommodating or cooperative for delivering typographic detail, which can disappear in the subpixel haze.”

01-OpticalSize

Lower-case A of Frere-Jones Type foundry’s Mallory, showing adjustments needed for screen hinting.

He went on to show an early example of the difficulty in rendering fonts on screen: nearly 50 years ago, CBS News was trying to improve the quality of the broadcast graphics they’d need while covering the 1968 Presidential election, and turned to their engineering department for help. The difficulty in maintaining legibility via broadcast technology, across TV sets with varied levels of reception (remember rabbit ear antennas?), was even more challenging than making sure a typeface displays correctly across all browsers and screen resolutions.

02-OpticalSizes

Adjusted display font (bottom) for television use. CBS News 36, by Rudi Bass and CBS Television Engineering Dept., 1967. From The Journal of Typographic Research, Vol. 1, No. 4, October 1967.

The solution was kind of primitive (punch holes at the joins of a custom face derived from News Gothic Bold, to open up the shapes for light bloom of the screen, and make the letters wider so they didn’t bleed into one another) but it was still an improvement, though Frere-Jones wondered aloud what would have happened if an actual type designer had been consulted.

03-OpticalSize

Detail of type adjustments to control light bleed of cathode ray screens. CBS News 36, by Rudi Bass and CBS Television Engineering Dept., 1967. From The Journal of Typographic Research, Vol. 1, No. 4, October 1967. Courtesy Tobias Frere-Jones.

04-OpticalSize

Type adjustments to control light bleed of cathode ray screens. CBS News 36, by Rudi Bass and CBS Television Engineering Dept., 1967. From The Journal of Typographic Research, Vol. 1, No. 4, October 1967. Courtesy Tobias Frere-Jones.

05-OpticalSize

Image from CBS News showing problems with onscreen type before adjustments were made.

His final observation, which he referred to as a “crazy hypothesis,” was actually pretty sane: what if screen text could be treated as optical sizes? The hot- and cold-metal type families of yesterday were thought of in this way: each size was a separate set of physical objects whose design could be gently adapted for maximum readability at 4 point or 48 point sizes. For Frere-Jones Type’s first release, Mallory, the designer repurposed this centuries-old strategy for the MicroPlus series meant to bridge the gap between print and digital environments, preserving legibility by reconsidering and reinforcing every shape to anticipate screens as well as the smallest sizes in print.

06-OpticalSizes

Heaton is meant to preserve legibility across a range of devices and bandwidths for online gaming. Courtesy Anton Bolin.

With an even narrower focus, designer Anton Bolin created Heaton in 2015, a typeface meant specifically to maintain the legibility of small, constantly-changing scores displayed on the screen in online gaming, played in real time by international players using a variety of screen resolutions and bandwidths. Stated this way it seems obvious, but also illustrates a larger truth: design thinking needs to keep pace with both the advantages and limitations of technology, and to use knowledge from the past to keep type looking its best.


Related Resources:

  1. On Web Typography by Jason Santa Maria

  2. Online Course: Web Typography