Condensed for the web

Action Condensed

The initial sketches of Action (née LTR Condensed) were drawn in 2010 as a headline font for the Letterror website. Inspired by ‘mobile first’ and responsive web typography, I made a typeface with narrow proportions and relatively large cap and x-heights that would also work on small screens.

action_text_light_caps

Most letters were determined by the choice of stroke-weight and proportion, but round and complex shapes resisted the grid and needed special attention. In the first drawings the terminals varied widely – from extremely loose and round to straight. By testing the fonts at many sizes I found a disparity between shapes that look condensed at large sizes and shapes that behave condensed at smaller sizes. Many illustrative qualities didn’t translate well to the small screen.

action_LRG_light_name

Experimenting with these fonts while rebuilding letterror.com gave me the idea to make different weights with the same metrics, so that the glyph geometry can change without causing reflow. The bolder grades need more heft in the stems, but in a condensed typeface there is not much room if you don’t want the width to change. By choosing the masters wisely it was possible to control the weight and width, the spacing and the counters. The resulting duplexed fonts make dynamic variation possible.

Action_lineProof

I liked the first results, cleaned it up considerably but made sure to keep it ‘alive’. The project grew to eight masters that could generate 24 fonts in four weights, in three grades and two styles. I was happy to be able to get TM grad Dave Foster to help out. With the help of the folks at Commercial Type, Action developed into a great family.

action_text_bold_name

Drawing type for screen involves more than good hinting and robust features that survive low resolution. Type on screen has to deal with totally new conditions and boundaries but still work with the old-fashioned eye. If a column is too wide in a book, it is likely to be too wide on a phone. If type is too thin to read on a page, you’re not going to read it on a phone. Holding a device closer to the eye, or zooming in, are ways of manipulating size but they have practical limitations.
There is a role for type design in determining ‘best practices’ for screen typography. We need to experiment and see what this web type thing can do for readers. Action Condensed is such an experiment. It has been designed to be part of animated text, to display selected items in lists, and to acknowledge rollovers and hovers and so on. I’m looking forward to seeing it in action.

The Action Condensed Collection can be licensed for print and web, in all sorts of formats and combinations at Commercial Type.