#webtypobuch

Aktivierende Typografie

Ich zitiere aus der Lesetypografie:

Bei der aktivierenden Typografie soll die Aufmerksamkeit des Lesers geweckt werden. Sie sollen dazu gebracht werden, den Text zu lesen, auch wenn sie es gar nicht wollen.

Bei den vielfältigen werblichen Angeboten im Netz fällt es nicht schwer, sich die Notwendigkeit einer solchen Typografie vorzustellen. Und so sind es vor allem Onlineshops oder Produktwebsites, welche mit allen Mitteln – auch typografischen – die Besucher zum Lesen, Betrachten und natürlich zum Kauf verleiten sollen. Zugegebenerweise besitzt die Fotografie das insgesamt größere Potenzial zur Verführung und Aktivierung, doch auch mit richtiger Schriftwahl und geschicktem Einsatz selbiger kann die Conversion Rate positiv beeinflusst werden.

Das Weingut Lagar de Costa hält nicht viel von Kitsch und geschichtlichem Mief, wie er in der Weinbranche so oft anzutreffen ist. Statt dessen konzentriert man sich auf nur wenige typografische Elemente, die dafür umso gekonnter in Szene gesetzt werden: die FF Meta Serif als saubere und hervorragend ausgewogene Schrift, sehr viel Weißraum und Mut zur asymmetrischen Platzierung der verschiedenen Seitenelemente. Ansonsten ausschließlich graue Farbflächen und sich abwechselnde, authentische Fotos im Karussell. Sieht wie eine einfache Fingerübung aus, ist es aber nicht.

Das alles mag auf Sie nicht sonderlich aktivierend wirken. Doch wer nicht mit lauten Hier-jetzt-kaufen!-Buttons agieren möchte, muss eben alle Elemente seines Designs entsprechend zurückhaltend umsetzen, um mit nur wenigen, höflich formulierten Call-to-Actions den gewünschten Effekt zu erzielen.

Einen Originalitätspreis gewinnt MailChimp sicher nicht. Der Trick, eine fette Helvetica mit einer sehr geringen Laufweite zu versehen, ist Jahrzehnte alt. Doch man muss fairerweise attestieren, dass solchermaßen gestaltete Wörter immer noch unverschämt gut aussehen! Die Aufgabe der riesigen Überschrift ist klar: in möglichst wenigen Buchstaben erläutern, was MailChimp ist. Denn je weniger Zeichen man dafür benötigt, desto größer kann man diese setzen, und desto besser sieht die eng spationierte Helvetica aus. Treibt man sich im Quelltext umher, erkennt man, dass die einzelnen Lettern sogar mit zusätzlichen individuellen Abständen versehen sind: Ein pragmatisches

<span class="char2" style="margin-left:0.011em">a</span>

lässt beispielsweise das kleine „a“ in „Easy“ ein wenig weiter nach rechts rutschen. Faszinierend, denn manuelle Spationierung habe ich im Web bisher auch noch nicht gesehen.

Abgesehen von diesem Detail: Mailchimp beweist, dass es auch ohne Webfonts und CSS3-Effekte möglich ist, großzügig, hemdsärmelig und prägnant mit Schrift umzugehen. Zielgenau eingesetzt und auf den Punkt getextet, erfüllt der „Text neben dem Affen“ einen nicht zu unterschätzenden Zweck: Den User zum Weiterlesen oder Registrieren zu bewegen. Gut gelöst!

Es ist für Designer immer eine spannende Übung, auch solche Dinge rein typografisch zu lösen, die man normalerweise eher über Fotografie oder Illustration transportiert. Die Website eines Hot-Dog-Ladens beispielsweise. Warum nicht die Urbanität und Andersartigkeit des Restaurants mit einer ungewöhnlichen und neugierig machenden Website unterstreichen? Wie ein Hot-Dog ungefähr aussieht, weiß man schließlich.

Interessant wird das Design unter anderem durch den riesigen Schriftzug in der prägnanten Gala von Canada Type, einer Mixed-Case-Schrift, bei der Minuskeln und Majuskeln wild durcheinandergemischt werden, was man seit den Achtzigerjahren im Pop- und Display-Bereich gerne mal macht. Auch die zupackende Farbigkeit und natürlich die Zutaten-Diagramme als Gimmick fallen auf. Der One-Pager ist liebevoll gemacht und kommt ganz ohne Kitsch aus. Kann (und sollte) man machen!

Es ist eigentlich zu naheliegend, Apples Website für seine gestalterischen Qualitäten zu loben. Aber man muss einfach anerkennen, wieviel individuelle Layoutideen auf jeder einzelnen Seite umgesetzt werden. Die typografischen Elemente befinden sich stets im visuellen Dialog mit den dargestellten Produkten, und jeder Unterbereich ist anders und ganz bewusst konstruiert. Bisweilen wird zwar ein wenig zuviel Mittelachse eingesetzt, doch insgesamt ist handwerklich wenig zu meckern. So fokussiert und kraftvoll schafft es kein anderer Konzern, seine Produkte in Szene zu setzen – man schaue sich vergleichbare Produktseiten bei Dell, HP oder Samsung an.

Apple vertraut in Navigation und Fließtext nach wie vor auf die Lucida, und zwar in Schriftgraden zwischen 10px und 18px. Wenn es größer wird, schwenkt man auf die Hausschrift Myriad um (meist im Thin-Schnitt), wobei diese verwunderlicherweise nicht als Webfont, sondern als gerasterte PNG-Dateien daherkommen. Wie lange Apple sich diesen Traffic- und Request-Luxus noch leisten will, bleibt abzuwarten. Klar ist, dass mit der gestalterischen Pflege der Apple-Website eine große Menge an kompetenten Personen beschäftigt ist, da hier kaum etwas automatisiert sein dürfte. Im Jahr 2012 ein fast schon kurioser Spleen.

Ein gutes Beispiel dafür, dass man bei der Schriftwahl manchmal einfach nur die richtige Atmosphäre treffen muss, ist das Restaurant Barley’s in South Carolina. Logo und Corporate Design sind unzweifelhaft aus der Welt der Bieretiketten entlehnt. Die Wahl einer kräftigen, eng gesetzten Serifenbetonten fügt dem Ganzen noch einen gepflegten Western-Look hinzu. Dieser macht auch komplett ohne Interieur-Fotos deutlich, wie sich dieser Pub anfühlt, wenn man ihn betritt. Das mag im Vergleich zu den meist minimalistischen Layouts, die ich bisher vorgestellt habe, furchtbar kitschig wirken, doch manchmal ist genau das die gewünschte Wirkung. Nicht ohne Ironie wird hier ein gewaltiges Stück Bierbrautradition interpretiert, und die Sache geht meines Erachtens auf. Mit einer feinen Garamond oder einer modernistischen Museo hätte man hier kaum eine vergleichbare Wirkung erzielen können.

Hart an der Grenze zur Exaltiertheit, aber in all seiner Experimentierfreude extrem faszinierend gemacht ist der Online-Shop von DEDON. Ein Screenshot alleine reicht nicht aus, um den Ideenreichtum zu zeigen, den alleine die Startseite bietet. Typografisch versucht man, an die Siebzigerjahre anzuknüpfen, als großflächige und eng gesetzte Schriftzüge in der Modeschrift Avant Garde absolut en vogue waren. Worauf bei DEDON allerdings leider verzichtet wird, sind die vielfältigen Ligaturen³⁷, welche die Avant Garde in ihren gut ausgebauten Varianten zu bieten hätte. Erst jene kunstvollen, fast skulpturalen Zeichenkonstrukte machten nämlich den wahren Reiz dieser Displayschrift aus. Schade. Dafür bedient man sich eines etwas moderneren Stilmittels: der willkürliche Zeilenumbruch mitten im Wort – ohne Trennstrich. Nicht unstylisch, wenn auch etwas zu gewollt eingesetzt für meinen Geschmack. Doch ich möchte eigentlich nicht meckern. Grundsätzlich schafft es der Online-Katalog mit größtenteils typografischen Mitteln, mächtig aufzufallen und Furore zu machen; es dürfte kaum einen Besucher geben, den diese Website kalt lässt. Spätestens bei Benutzung des Suchformulars hat man eine Meinung. Und das muss man als Webdesigner erst einmal schaffen!