Berger and Föhr’s new website showcases their modernist approach to design and art direction through a combination of simple typography and grayscale photography.

Screen grab of Berger & Föhr's website



Avant Garde Gothic is the principal typographic element here, used in a single black weight in the headlines, navigation and extended text settings. ITC Garamond Italic adds a midtone to the otherwise super high-contrast flavor of the design.

The decision to use such a heavy weight for the extended text settings is worth examining. The standard issue advice for setting text nowadays, especially on screen, goes something like this: Use a regular weight, preferably something with serifs or some modulation of stroke width, optimised for screen; set it between 12 to 16 pixels, and add heavier weights and italics for hierarchy and emphasis; always consider your reader first. That’s usually what you’ll hear around here anyway.

But Berger and Föhr clearly want to push their modernist values to the fore, and while reader comfort should never be disregarded entirely, the text here remains readable because it’s set a point or two higher than that general 16px advice, while the heavier weight lessens the scope for poor rendering quality.

There’s more to Berger & Föhr’s decision to use Avant Garde Gothic for text than just style. Modernism was about a rejection of the past, of received notions of the best ways to do things, and typography that replicated the work of the human hand even while being machine made was one of the relics that modernist designers wanted to leave behind. Objectivity and rationality are central to their design philosophy, and the typography expresses those values very well.

Much of the discussion around typography for the web and on screen is about making a reader’s experience as comfortable as possible — much effort is going into replicating the atmosphere of the printed page. This is fine for content-oriented websites with lots of long form articles, but the text here isn’t intended for immersive reading. Equally, typographic hierarchy would add an unnecessary level of complexity to the layout so extra weights would be redundant.

Fonts used:

ITC Avant Garde Gothic Bold from Fonts.com

ITC Avant Garde™ Bold: Used for site title, headings, navigation and text.

Garamond Book Italic

ITC Garamond™ Book Italic™: Used for call outs.

Available from:

Fonts.com (Subscription)