Typografie

Neue ZDF-Schrift: Mit dem Zweiten liest man besser

Das Zweite Deutsche Fernsehen hat an seinem Schriftbild gefeilt. In den kommenden Monaten wird die neue Schrift “ZDF Type” über die digitalen Touchpoints ausgerollt. Den Anfang machen die ZDF Heute-App sowie die ZDF Mediathek, beides digitale Produkte aus dem Hause Cellular. Wir erklären, wie sich aus einer neuen Schrift eine verbesserte User Experience ergibt – und zwar so, dass es den Nutzer:innen gar nicht auffällt.

Ähnlich wie die Mode oder die Architektur unterliegt auch Typografie bestimmten Trends. Jedes Jahr entstehen Dutzende neuer Schriften. Ging es einst darum, sie in Blei- und Fotosatz gut abbilden zu können, ist in den vergangenen zwei Jahrzehnten die Darstellung auf unterschiedlichen digitalen Devices immer wichtiger geworden. Kürzlich hat unser Kunde, das Zweite Deutsche Fernsehen, eine neue Schrift lanciert – genauer gesagt eine große Schriftenfamilie*: Künftig werden drei Schriften das Antlitz des Zweiten Deutschen Fernsehens zieren und die bisherige Typografie “Helvetica Neue” ersetzen. Neben “ZDF Type” sind auch die Schriften “ZDF Design” und “ZDF Micro” neu. ZDF Type wird in den kommenden Monaten über fast alle digitalen Touchpoints ausgerollt. Die ZDF Heute-App sowie das ZDF Mediathek-Ökosystem, beides Produkte aus dem Hause Cellular, machen den Anfang. 

Eine neue Schrift ist essentiell für die User Experience der Nutzer:innen – schließlich ist Typographie eine der fünf Basis-Zutaten, mit denen unsere Design-Teams gestalterisch-handwerklich umgehen, wenn sie Touchpoints gestalten:

Farben
Wie hoch sind Kontrast und Sättigung?

Fläche und Balance
Wieviel Raum bietet ein Device, um Schrift, Bild, Grafik sowie Weißraum auszubalancieren? 

Form und Linien
Sind in der Komposition die Geometrie sowie die Strichstärken konsistent?  

(Informations-) Hierarchie
In welcher Reihenfolge werden User über den Bildschirm geführt?

Typographie
Wie kann eine Schrift zugleich eine unterstützende wie auch führende Rolle einnehmen?

Diese Basis-Zutaten werden zudem angereichert durch eine abgestimmte Bildsprache sowie UI-spezifischen Aspekte. Dazu gehören die Identifikation des Problems, das User lösen wollen, Nutzungsszenarien, Nutzerverständnis und -führung sowie Abstraktion und Kreativität, um komplexe oder langweilige Zusammenhänge einfach, überraschend oder freudebringend darzustellen. Das Ganze ist schließlich abzustimmen mit technischen oder Geräte-spezifischen Zusammenhängen – denn selbstredend stellt eine Apple Watch andere Anforderungen an die Darstellung eines Angebots als ein Tablet. 

Vor diesem Hintergrund ist es nur folgerichtig, dass unser Kunde ZDF sogleich eine ganze Font-Familie einsetzt. ZDF Design ist überall dort optimal, wo die Schrift plakativ und groß genutzt wird. ZDF Type wird vermehrt digital zu sehen sein und ZDF Micro ist für Minimal-Typografie vorgesehen. 

"Fast uninspiriert folgen Designer dem heißen Scheiß"

Thorben Ehlers, Design Lead im ZDF-Studio bei Cellular

In unserem Fall gilt ein besonderer Fokus der ZDF Type-Type, da sie die Basis für die Ausgestaltung des Schriftbilds im digitalen Ökosystem des ZDF darstellt. Thorben Ehlers, Design Lead im ZDF-Studio bei Cellular, erläutert, wie die Schrift digital ausgerollt wird und welche Verbesserungen sich ergeben.

Die Typografie-Ikone Eric Spiekermann hatte den Copytext in der ZDF Heute-App auf Twitter vor einiger Zeit als “Augenpulver” bezeichnet. Kannst du nachempfinden, was er seinerzeit damit meinte?

Thorben: Sicher, ja. 2013 erlebte die typographische Welt mit dem Release des mobilen Betriebssystems iOS7 eine kleine Renaissance. Durch höhere Bildschirmauflösungen erschien vermehrt sehr feine Typographie auf der Bildfläche. So entschied man sich beim ZDF in Folge dieses Typographie-Trends offenbar für die Helvetica Neue, im Schriftschnitt Light, und setzte sie einige Zeit später auch recht tollkühn als Schrift für Fließtexte ein. Auch wenn die Helvetica ein zeitloser Schriftenklassiker ist, regt sich Herr Spiekermann deshalb nicht zu Unrecht auf. Er selbst erfand mit “ZDF News” ein paar Jahre vor diesem Trend eine Schrift, die im Kontext gut passte und in Sachen Lesbarkeit besser funktioniert hatte.  

Bietet die neue Schrift ZDF Type denn jetzt Abhilfe?

Thorben: Das neue Set an Hausschriften des ZDF macht einen deutlichen Schritt nach vorne. Es sind drei Font-Familien, wovon wir aktuell nur ZDF Type in unseren Apps nutzen. Sie hat viele Schriftschnitte, dabei ist besonders die Light-Version nicht ganz so dünn wie ihre Vorgängerin. Im Fließtext unserer ZDF Heute-App macht sich dies direkt bemerkbar.
Die Schrift weist typographische Feinheiten auf, die helfen, gewisse Buchstaben besser voneinander zu unterscheiden. So hat die Schrift stellenweise Serifen, wie beim Buchstaben I oder beim kleinen l, das anders als bei Helvetica unten einen kleinen Haken hat – so wie der Griff eines Regenschirms. All das führt dazu, dass die Schrift besser lesbar ist. Vor allem für Menschen mit Sehschwäche oder auf kleinsten-Devices, wie der Apple Watch – für die in Kürze ein neues Release herauskommt. 

Durch das Prinzip der „Uniwidth“ - geltend für alle Proportionalschriftarten, nach dem die Zeichenbreiten unabhängig vom Fontweight gleichmäßig sind – eignet sie sich hervorragend für den Einsatz in Apps und generell im interaktiven Umfeld. Die Schrift hat also über alle Schriftschnitte hinweg die gleiche Laufweite und kann somit auch für “Highlighting” oder verschiedene “Button States” verwendet werden, ohne dass sich durch den Wechsel eines Schriftschnittes auch die “Bounding Box” des Buttons vergrößern muss. Kurz gesagt: Es springt nichts.
Durch das Uniwidth-Prinzip polarisiert die ZDF Type-Schrift aber auch. Bei einer normalen Proportionalschriftart nimmt abhängig vom sogenannten Fontweight der gleiche Buchstabe eine andere Breite ein. Dafür ist das Kerning konsistent, also der Abstand von Buchstabe zu Buchstabe derselbe. Bei der Uniwidth hingegegen stehen in dünneren Schnitten die Buchstaben automatisch weiter auseinander. In fetten Schnitten ist das Schriftbild enger. Mehr Letterspacing, also Abstand zwischen den Buchstaben, bedeutet zwar in der Regel bessere Lesbarkeit, stehen aber deutlich unterschiedlich dicke Schriften nebeneinander, kann das ein wenig nach zwei verschiedenen Font-Families aussehen.

ZDF Type: besser lesbar auf kleinen Devices

Wenn ein Kunde wie das ZDF global eine neue Schrift einführt, kann sie in den digitalen Produkten einfach so ersetzt werden? Also in diesem Fall: Helvetica raus, ZDF Type rein, fertig?

Thorben: Klares jein. Das hängt an unterschiedlichsten Faktoren – etwa daran, wie unterschiedlich die Schriften sind: Hat die Schrift dieselbe Lineheight, also Zeilenhöhe? Läuft sie weiter oder schmaler? Müssen im Design danach alle “Paddings” und “Margins” überarbeitet werden? Erfüllt die neue Schrift alle Anforderungen, wie die Maximalanzahl von Buchstaben, die eine Headline umfassen darf in einem vorgegebenen Raum?
Wer darüber hinaus auf eine saubere Arbeitsweise achtet, egal ob in der Programmierung oder in den Design Files, und einen ebenso sauberen interdisziplinären Workflow pflegt, hat mit so einem Tausch wenig Schmerzen.
In unserem Fall stellte sich heraus, dass die Schriften in Lineheight und Laufweite so ähnlich sind, dass dies vergleichsweise wenig manuelle Justierungen erforderte. Ich denke, das dürfte auch Bestandteil des Briefings zur Erstellung der Schrift gewesen sein. Daneben gibt es dann auch ein, zwei Plugins, die einem Designer das Leben ein Stück weit erleichtern.

Wie geht es jetzt weiter? Müssen andere Basis-Zutaten wie Farben, Formen, Linien sukzessive an die Schrift angepasst werden? Anders gefragt: Wird das Design in Zukunft von der Schrift beeinflusst?

Thorben: Ich möchte etwas grundsätzlicher antworten. Ich freue mich immer darüber, wenn eine Corporate Identity eine eigene Seele hat. Einen roten Faden, der sich durch alle Gestaltungselemente zieht. Für den Bereich UI-Design stelle ich seit rund fünf Jahren allerdings eher eine sehr starke trendbasierte Entwicklung fest. Fast uninspiriert folgen Designer nur noch dem, was jetzt gerade der heiße Scheiß ist. Vor ein paar Jahren war es die Schrift Montserrat, die ihren Weg in so viele Design-Portfolios gefunden hat, dass ich diese eigentlich schöne Schrift schlicht nicht mehr sehen kann.
Genauso wenig wie Trends eine CI zu stark verwässern dürfen, sollten Betriebssysteme vorgeben, wie ein UI auszusehen hat. In Zeiten digitaler Emanzipation und durch das responsive Web zunehmend enabelter Nutzer:innen dürfen auch die Interfaces wieder individueller werden. Dinge haben unterschiedliches Aussehen, und es gibt verschiedene UX-Patterns. Die sollten immer gut gemacht und verständlich sein, doch dafür gibt es Designer. Und genau diese Gestalter haben auch dafür Sorge zu tragen, dass eine CI ebenso konsistent, wie auch unique ist.
Beim Design gehört für mich weit mehr dazu als sein ästhetisches Verständnis, das nur auf Nacheifern beruht. Das Design sollte sich vom Logo über die Schrift und die Icons bis zur Farbwelt nach Einigkeit anfühlen. Und – das haben wir bereits oben gelernt – dabei stets eines nie verlieren: Den Fokus auf die Nutzbarkeit.


*Das Schriftdesign kommt von der Firma B-Box aus Berlin: https://bboxtype.com

Autor

Stefanie Bilen
Director Marketing & Communications
sbilen@cellular.de