Loader
Type here
GRADE 1GRADE 2GRADE 3
ACTION CONDENSED

How this microsite works

Action Condensed

Action Condensed was designed for the screen by Dutch type design legend Erik van Blokland, who was looking for typefaces for interface design without an overtly neutral personality. Each of the family’s four weights has three grades on the same width, allowing text to change weight on rollover without disrupting the layout. Although Action Condensed was designed with interface design in mind, particularly rollovers, it works as well on a poster as it does in a web browser or on a mobile phone. Its casual personality and quirky shapes give a friendliness that is unusual in a straight-sided condensed sans.

Action micro 04 1000 xxx

Within each weight of the Action Condensed family are three different grades, all of which, including the italic styles, have been drawn on the same set of widths. This allows for text to be switched between different grades without any reflowing of text.

Action micro 01 1000 xxx

The grades within each weight of Action Condensed allows for type to be switched between different grades or styles without changing the width of the text setting. 

Action micro 02 1000 xxx

Normally when multiple weights of a family are set within the same block of text, any changes require designers to dig in and switch each style individually. But because of the way that grades in Action Condensed are mapped, designers can set separate styles in the same block of text—like Light & Medium as shown here—and quickly toggle different grades via the type palette.

Action micro 03 1000 xxx
The user types text into a hidden input field in order to avoid out of sync updates to the different layers. This text is then replicated in 3 visible layers each using a different grade of the typeface. Users can zoom in or out using the mouse wheel. The vertical mouse position is translated into a weight for the base typeface. The horizontal mouse position is translated into different colors of each grade layer. At high zoom levels the mouse position is also used to pan over the whole text if it overflows the screen.
/4
<
>
Action micro 04 2000 xxx
Action micro 01 2000 xxx
Action micro 02 2000 xxx
Action micro 03 2000 xxx
X
This microsite is currently overloaded. Please try one of the others.
OK