This week saw the release of an intriguing new typeface from FontFont, FF Franziska. It’s the first major release for Jakob Runge, a promising talent currently based in Munich, Germany. Franziska is a full-featured serif family in a range of weights from Hair to Black, complete with italics, small caps and many extras. It started life as a student project — not in Reading nor in The Hague, but at Muthesius Academy of Fine Arts and Design in Kiel, Germany, under the guidance of Albert-Jan Pool and André Heers.
What’s quite remarkable for a freshly launched debut is that Franziska is already in high-profile use, and not just by one newspaper, but two: It has proven itself in Bündner Tagblatt, a local daily newspaper from Switzerland, and ZEITmagazin Online, the digital version of the supplement to Die Zeit, Germany’s most widely read weekly newspaper. This Blog post shows how these two early adopters have used the same typeface in very different ways. See the correspondingentriesin the Collection for more images of both Uses.
Franziska with ‘ff’ ligature in Bündner Tagblatt
Franziska is the text typeface for ZEITmagazin Online.
“Besides the traditional use as a printing type, making a good impression on screen is the be-all and end-all of every contemporary face”, says Jakob Runge. Franziska was conceived as a typeface that works in both mediums, in print and on the Web. With its sturdy serifs and the low contrast, it sits somewhere between a serif and slab.
First she’s big in Hamburg, then she takes Berlin
The redesign of Bündner Tagblatt was carried out by Christian Hruschka and Stefan Semrau of twotype design, a Hamburg-based studio specialized on editorial design. Jakob Runge had done freelance work for them while studying in Kiel. After finishing his Master thesis, he sent them a beta version and a printed specimen booklet — and struck gold. They were chomping at the bit; they even wanted to use the fonts for their current job from Switzerland. At that point, Franziska hadn’t undergone the quality check of the experienced engineers at FontFont yet, so there was some risk to it. And indeed twotype design ran into a technical problem, but that was more due to the newspaper’s outdated standards (with a workflow that involved QuarkXPress and Acrobat Distiller) than the fonts themselves, and could be sorted out eventually.
ZEITmagazin Online was designed by Edenspiekermann, a design agency with close ties to FontFont. In May 2013, Jakob submitted his typeface to the foundry’s TypeBoard. Erik Spiekermann, one of the board’s members, obviously was impressed with what he saw. Not only was Franziska accepted as a FontFont right away, it also was chosen for a project his studio was working on.
Modest teamplayer vs. versatile solo artist
On the homepage and landing pages of the ZEITmagazin website, there is no sign of Franziska. All the type there is in Tablet Gothic. Two weights of this sans serif are used for headlines, decks, captions, pullquotes, navigational elements. Franziska makes an appearance only deeper into the site, and “only” as text typeface. For a web magazine that embraces longformfeatures, in-depthinterviews and other text-heavy content, this means that Franziska after all is its primary typeface, certainly in terms of word count. Only three of its twenty styles are used; Regular, Italic, and Bold; all of them at one size only.
Franziska Bold is mainly used in interviews. The floating box in the margin has extremely short lines. Note that the upright Tablet Gothic is paired with Franziska’s italics here.
Reinventing the drop cap: a large ‘W’ from a lighter weight of Franziska provides an entry point for the reader’s eye.
Bündner Tagblatt, in contrast, fully relies on Franziska. It uses several of its weights, in a wide range of sizes. The whole typographic hierarchy is orchestrated from within the same family. The TV network schedule (pictured in the Collection entry) is the only place where it gets a little help from a condensed Futura.
Print provides the control that is necessary for doing adventurous text wraps.
Swiss-style quotation marks and a whole lot of italics
Both publications are not shy to use Franziska’s excellent italics. They set themselves apart from the Roman by the cursive shapes and the animated texture, while they have very little slant. The newspaper also employs a bold Italic for emphasis in decks.
Lots of funky italics on the Web as well! No (controllable) hyphenation plus crazy long compounds like “Vorweihnachtsgemütlichkeit” means wildly ragged margins. With a responsive layout, lines do not always break ideally. Sometimes, you’ll end up with an orphaned word, or only half a line to enclose a floated box.
Headers and headlines are not in Bold, but from a lighter weight. With their bigger sizes, they appear more or less in the same (typographic) color as the texts. Hierarchy is created with contrasting sizes and alignments, with spacing and capitalization, not so much with weights.
Bündner Tagblatt has a crush on Franziska’s figures: each page is crowned with large eyecatching numbers (above). Of Franziska’s many figure sets, ZEITmagazin uses the oldstyle — or rather hybrid — variety (below). At least that is what you get in Chrome. Safari apparently still lacks support for this kind of typographic finesse and displays tabular lining figures instead — not the best choice for a text typeface, but at least they aren’t two large in comparison to the lowercase, given the moderately high x-height.
Tabular lining figures in Safari (top), proportional oldstyle figures in Chrome (bottom)
The Web is not made for control freaks
While the printed paper features «Swiss-style» quotation marks (a.k.a. guillemets), the magazine website shows straight (or “dumb”) quotes most of the time. It seems to be impossible to have typographically correct quotation marks on the Web. I wonder why that is — the print edition of ZEITmagazin (which uses different typefaces) doesn’t have this problem. Are they too difficult to input? Maybe it’s the different, continuous publication process with no fixed deadline and no final lector. If Edenspiekermann can’t manage to train the editors, who can? Is it ultimately a conscious decision for straight quotes? Luckily, that’s not the case. In an interview for DMIG, Christian Hanke, Design Director at Edenspiekermann, asserts that he hasn’t given up the fight for proper details: Someday, there will be guillemets (»German-style«) in ZEITmagazin Online, too.
The comparison of these two Uses shows that, in general, print is still the realm of fine-tuned details. The medium doesn’t have to deal with browser inconsistencies. There are no fake italics, no resources that fail to load, no FOUC. And, most importantly, the size and proportion of the canvas is fixed and known. Some of the Web’s restrictions don’t really hurt and can even be beneficial to the design, like the limitation to a few font styles only. Others, like varying browser support for typographic features are often beyond the control of the designer. And for fine-tuning templates and stylesheets to cater for all eventualities … well, the budget’s the limit.
In an interview with Peter Glaab, Jakob Runge acknowledges that, despite the meticulous hinting efforts that went into Franziska, the typographic scope is still limited on screen: It’s almost standard to have a low stroke contrast, and if details are present at all, they have to be striking at least. “Gimmicks such as alternate characters or text figures more and more take a backseat in my design process, as I have to assume that they can’t always be used.” Such details aside, the two examples prove that a well-made contemporary font like Franziska makes appealing typography easy — irrespective of the medium.
The new design for Bündner Tagblatt was introduced in August 2013 and immediately earned an Award of Excellence for its typography at the European Newspaper Award 2013. ZEITmagazin Online launched in May 2014 and will presumably win some prizes, too. See more images from both Uses entriesin the Collection. FF Franziska was officially released this week and is now available for everyone. Learn more about it on the specimen site.