Webtype in use: Heimat Berlin


Heimat Berlin, one of Germany’s most renowned creative agencies, recently launched a new website designed by Scrollan and built by null2. The site is built around a simple column structure that easily accommodates a range of content, including videos, campaign announcements, and tweets, allowing the agency to update the site with minimal effort. This gallery layout is also naturally responsive, accommodating narrow viewports, such as those on mobile screens, without loss of content or degradation of design.

The site responds elegantly to various viewport widths.

The site responds elegantly to various viewport widths.

A design this fluid requires a solid typographic palette to keep everything cohesive and coherent. Webtype’s Scout and Ibis RE imbue the brand with a personality that is human and sincere — yet with a knowing wink to the agency’s unconventional culture and ideas. Scout Bold Condensed reflects the strength and density of the Heimat logotype (set in Compacta).

Scout Bold Condensed conveys Heimat Berlin’s headlines and the “Play” button on ad videos.

Scout Bold Condensed is used Heimat Berlin’s headlines and the “Play” button on their videos.

Ibis RE shares that hand-wrought squareness, but has the necessary width and screen optimization to deliver all the body copy on the site. While the rugged and crunchy Reading Edge version of Ibis is meant for small text, Scrollan punches up Heimat’s semi-strangeness by using Ibis RE at mid-range sizes for Twitter posts and sub-navigation.

Heimat Berlin - agentur

All site text is set in Ibis RE. The family is also used for navigation and other supplementary text at various sizes. A page with nothing but text becomes a little more interesting in a typeface like Ibis.

Besides running text, Ibis RE is also used for navigation and other supplementary text at various sizes. A page with nothing but text becomes a little more interesting in a typeface like Ibis.

We talked with Peter Bünnagel, one member of the three-person team at Scrollan, about these typographic choices and his experience with the Heimat Berlin project.

What was your role in the design process?
I did the concept for the website together with Barbara Kotte and was responsible for the design of the digital media as the website and the keynote templates. Anne-Lene Proff was responsible for the more corporate design parts of the job. (She also did the initial Heimat design when the company was founded.) But we always work together as a group, and everyone is involved in everything.

Why did you choose these typefaces?
When Heimat asked us to do a redesign for them, it soon turned out that we are basically talking about digital presentations plus business cards. 14 years ago there were tons of printed matter, but no such thing as a website. So we were looking for fonts that would look good on the screen as well as on paper.

Scout is a typeface that transfers the specific feel (or smell?) of Heimat into type. If you type a headline in keynote with Scout, it looks like a real Heimat sentence.

Ibis Text, as the name states, is for reading. Nobody wants to read texts in a condensed sans.

Though Heimat are famous for striking, sometimes weird advertising, they think a lot and work in a very strategic way. We wanted to have both sides of Heimat in a very simple typographic system so the chance would be quite high that it is actually used. Add some color and you get a — very basic — visual system that is quite hard to destroy by people not interested in reading design manuals.

The navigation and text of Heimat Berlin’s many portfolio pages are set in Ibis RE, the screen version of Font Bureau’s Ibis Text.

What feature was most important to you (rendering, availability, extensiveness of family in weights or widths, design feature, etc.)?
Foremost it was the character of the typefaces. Heimat doesn’t need 24 weights of a typeface. (I don’t, either.)

How did you go about determining font-sizes, line-spacing, and other typographic parameters?
We started quite old-fashioned with Photoshop layouts. After null2 (the fantastic guys who did the front- and backend) did a first version of the site, we made some adjustments — also to solve some problems caused by the responsive design. We had some problems with light text on dark background — Scout’s counters nearly disappeared in the beginning; everything looked much bolder than intended. But after some tweaks it worked fine.

How was your experience with licensing and implementing the fonts?
I wasn’t involved. The licensing was done by Heimat, the implementing by null2. The only thing I can tell is that it was very cool that you provided Scout as a webfont for testing as it wasn’t in your library at that time.

Comments are closed.