Sie verwenden derzeit einen Browser, der nicht mehr unterstützt wird und bei dem es daher zu Darstellungsfehlern kommen kann. Wechseln sie den Browser, um ein noch schöneres Design zu erleben.

Cookies helfen uns bei der Bereitstellung unserer Dienste. Durch die Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies setzen. Mehr erfahren.

Close

Über den Tellerrand geschaut

Die Auswahl der richtigen Schriftart – eine Einführung

Texte spielen in jedem Interface eine Rolle, sei es z.B. bei der Bezeichnung von Formularfeldern oder der Darstellung von längeren Hilfe-Inhalten. Dieser Text soll eine allgemeine Einführung in das Thema „Auswahl der richtigen Schrift“ geben. Einsteiger erhalten einige Hinweise, mit deren Hilfe sich die Suche nach der richtigen Schriftart vereinfachen lässt.

Bei der Erstellung eines Interface oder einer Webanwendung stößt jeder Designer irgendwann auf die Frage nach der richtigen Schrift. Auf den ersten Blick lässt sich diese Aufgabe mit zwei simplen Fragen lösen:

“Welche Schriftart benutze ich?” und “Wie groß soll die Schrift sein?”

In der Realität wird man dann leider schon bei der Beantwortung der ersten Frage von deren Komplexität überrumpelt – die Anzahl der Schriftarten ist schier grenzenlos.

Einfache, komplexe, verspielte, gradlinige, themenbezogene, zwei- sowie dreidimensionale Schriften… der Fantasie der Schriftgestalter sind offenbar kaum Grenzen gesetzt. Dazu kommen dann noch Parameter wie Gewichtung, die eventuelle Nutzung von Kapitälchen und so weiter.

Ist dann nach langer Suche die vermeintlich richtige Schriftart gefunden, wendet man sich der Frage nach der Schriftgröße zu. Doch auch hinter diesem Punkt verbirgt sich mehr als nur eine Zahl. Abgesehen von der Höhe der Buchstaben, müssen außerdem Zeilenabstand, Absatzhöhe, Abstand der Buchstaben zueinander und viele weitere Faktoren berücksichtigt werden.

Wie findet man also zu der Schrift, die perfekt zum Interface passt?

Leider existiert kein Erfolgsrezept, welches am Ende die perfekte Schriftart für ein bestimmtes Interface liefert. Wenn man sich jedoch näher mit Typografie und einigen Regeln auseinander setzt, lässt sich die Liste der in Frage kommenden Fonts auf eine übersichtliche Anzahl reduzieren.

Worin unterscheiden sich Schriften? – Der normative Aspekt

Lässt man die – als Interface-Grundlage ohnehin unbrauchbaren – Spaß-Schriftarten wie zum Beispiel Hypmotizin außen vor, lässt sich das Feld der Fonts in zwei Lager unterteilen: Serifenschriften und serifenlose Schriften. Als Serifen (auch Füßchen oder End-Querstrich) bezeichnet man die kleinen, quer zum Abschluss der  Linie eines Buchstabens verlaufenden Striche.

Deutlich feiner lassen sich Schriften anhand der DIN-Norm DIN 16518:Schriftart unterteilen.  Diese teilt die Masse der Schriftfamilien in elf Gruppen auf, beispielsweise Gruppe II: französische Renaissance-Antiqua,  Gruppe IV: Klassische Antiqua, Gruppe X: Gebrochene Schriften oder Gruppe XI: fremde Schriften. Diese Gruppen unterscheiden sich durch ihre Herkunftszeit, die Strichführung, das Vorhandensein von Serifen, besondere Achsen, die Winkel und Form eventuell vorhandener Serifen und viele andere Merkmale. Zusätzlich gibt es einige besondere Schriftgruppen wie Gruppe VIII: Schreibschriften, welche als Vorgabe nur die Verbindung der Buchstaben und das Aussehen einer heutigen Handschrift vorgibt.

Legibility und Readability – Der theoretische Aspekt

Übersetzt man die beiden Begriffe ins Deutsche, entsprechen sie dem deutschen Wort

„Lesbarkeit“. Dennoch beschreiben sie zwei unterschiedliche Eigenschaften.

Die Legibility einer Schriftart bezieht sich auf die Lesbarkeit der einzelnen Buchstaben, beeinflusst durch Attribute wie zum Beispiel Strichstärke, Serifen und Formeigenschaften. Die Legibility bezieht sich ausschließlich auf die Form einer Schrift, andere Faktoren wie Farbe, Kontrast und ähnliches fallen in den Bereich der Readability.

Dekorative Schriftarten haben beispielsweise meistens eine geringe Legibility, da sie auf das Aussehen und nicht die leichte Lesbarkeit ausgerichtet sind. Für Zeitungen oder den Buchdruck entworfene Schriften hingegen zeichnen sich durch eine hohe Legibility aus.

Bei der Schrift-Auswahl sollte man – um eine maximale Lesbarkeit zu gewährleisten – bezüglich der Legibility auf folgende Punkte Rücksicht nehmen:

  • Die Schriftart sollte keine besonderen Formen aufweisen
    • An Buchstaben, die eine außergewöhnliche Form aufweisen (besondere Verzierungen, ungewöhnliche Proportionen…) bleibt das Auge des Nutzers hängen. So stehen einzelne Buchstaben anstelle des gesamten Textes im Vordergrund.
  • Die richtige Laufweite finden
    • Als Laufweite wird der Abstand zwischen den einzelnen Zeichen einer Schriftart bezeichnet. Hier gilt:
      • Für kleine Schriftgrößen sollte eine eher große Laufweite gesetzt werden, da die Buchstaben sonst für das Auge des Lesers schwer zu unterscheiden sind.
      • Für große Schriftgrößen sollte die Laufweite der Schrift reduziert werden, um den Zusammenhang der Buchstaben eines Wortes zu verdeutlichen.
  • Die Buchstaben einer Schriftart sollten nicht zu schmal sein
    • Durch schmale Buchstaben wird es dem Leser erschwert, beispielsweise ein „c“ von einem „e“ zu unterscheiden.  Diese Regel ist jedoch nur in Kombination mit dem ersten genannten Punkt zu betrachten – die Breite sollte nur soweit erhöht sein, dass noch ein natürliches Schriftbild gewährleistet ist.

Die Readability einer Schriftart wiederum bezieht sich nicht auf die einzelnen Zeichen, sondern deren Kombination in einem Text. Es geht also nicht darum, mit welchem Aufwand der Nutzer jedes Zeichen erkennt, sondern darum, wie gut sich ein Text in der Gesamtheit lesen lässt. Es fließen also Faktoren wie Gewichtung, Größe, Ausrichtung, Farbe etc. mit in die Bewertung ein.

Auch bezüglich der Readability gibt es einige Tipps:

  • Eine Schriftart funktioniert nicht an jeder Stelle des Interface
    • Eine für eine Überschrift sehrmgut geeignete Schriftart lässt sich beispielsweise oft schwieriger lesen, je länger der Text ist, für den sie verwendet wird.
  • Flattersatz anstelle von Blocksatz
    • Zu große oder ungleichmäßige Abstände zwischen Wörtern, wie sie sich im Blocksatz zuweilen ergeben, erschweren die Lesbarkeit eines Textes.
  • Den richtigen Zeilenabstand finden
    • Liegen die Zeilen eines Textes zu nah zusammen, ist es für das Auge schwer, von einer Zeile in die nächste zu springen. Hier gibt es keinen feste Formel, mit der sich die perfekte Zeilenhöhe bestimmen lässt, als Faustregel kann man sich jedoch merken: Die Zeilenhöhe sollte in etwa 120%-130% des Schriftgrades betragen. Bei einem Schriftgrad von 10pt ergibt sich also eine Zeilenhöhe von 12-13pt.
  • Die richtige Zeichengröße finden
    • Durch unterschiedliche Zeichengrößen lassen sich Hierarchien innerhalb  eines Textes abbilden.
    • Bnonn Tennant behauptet in seinem Artikel „16 Pixels: For Body Copy. Anything Less Is A Costly Mistake”, Schriftarten unter 16 Pixeln seien schlicht zu schwer lesbar für einen großen Anteil der Bevölkerung

Der Aspekt der Readability spielt vor allem im Content-Bereich eines Interfaces eine große Rolle, wenn Fließtexte in Form von Hilfetexten, Informationen etc. angeboten werden. In den Navigations- und Headerbereichen steht hingegen die Legibility im Vordergrund.

Kontextbedingte  Einschränkungen – der technische Aspekt

Auch auf Einschränkungen, die sich durch den Einsatzkontext eines Interface ergeben, muss Rücksicht genommen werden. Dies betrifft beispielsweise den Einsatz von Schriften bei Webanwendungen, da die korrekte Anzeige davon abhängt, ob die gewählte Schriftart auch auf den Rechnern der einzelnen Nutzer installiert ist. Als Alternative bieten sich Webfonts an, die nicht lokal installiert werden müssen, sondern bei Bedarf aus dem Web geladen und eingebunden werden.

Des Weiteren sollte geprüft werden, ob alle benötigten Zeichen im Schriftpaket enthalten sind

Ästhetik – der emotionale Aspekt

Schließlich darf auch die emotionale Komponente nicht zu kurz kommen. Ein Steuerberater wird keine Software mit Comic als Schriftart verwenden können, ohne seine Seriösität in Frage zu stellen

Jede Schriftart vermittelt eine gewisse „Anmutung“ (Siehe Figure xx). Sei es das kindliche einer Comic-Schriftart (Comic Sans MS), das klare, seriöse Auftreten einer für den Print entworfenen Schrift mit besonders hoher Legibility  (Garamond)  oder das bedrängende, fast schon aggressive Erscheinungsbild einer gedrungenen, fetten Schrift ohne oder gar mit negativem Zeichenabstand (Weltron Urban) – der gleiche Text kann durch Verwendung einer anderen Font eine komplett andere Wirkung erzielen.

Dies heißt jedoch nicht, dass für jeden Bereich eine neue Schriftart verwendet werden sollte. Eine zu große Anzahl an verschiedenen Schriften und Größen lasst ein Interface extrem unruhig wirken und erschwert die Übersicht um ein vielfaches.

Bei der Auswahl der gewünschten Schrift müssen nicht immer alle im System und Web vorkommenden Fonts getestet werden. Unter  http://www.100besteschriften.de/ gibt es eine Auflistung der hundert meistgenutzten Schriftarten – und diese sind nicht ohne Grund so häufig genutzt.

Fazit

Die korrekte Auswahl einer guten Schriftart ist eine Wissenschaft für sich. Die schier endlose Anzahl an verfügbaren Möglichkeiten zur Gestaltung des Textbildes lässt sich jedoch durch einige einfache Regeln auf ein übersichtliches Maß reduzieren. Zusätzlich spielen auch der persönliche Geschmack sowie das emotionale, von der Schrift gezeichnete Bild eine große Rolle.

Orientiert man sich zusätzlich an den meist benutzten Schriften anderer Designer, lassen sich relativ schnell eine oder mehre passende Fonts für das eigene Interface finden.

Unterstützung bei der Suche liefern zahllose Quellen im Internet, wie http://www.typosuche.de/ und viele mehr.

Quellen

Flowchart: http://gdesignbylaura.files.wordpress.com/2011/06/font-selection-chart1.png

Typosuche: http://www.typosuche.de/

16 pixels… http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/

100 beste Schriften: http://www.100besteschriften.de/

Choosing & Using Type: http://www.will-harris.com/use-type.htm (Webseite nicht mehr verfügbar)

DIN http://www.mufuku.de/sk.pdf

Hypmotizin: http://cooltext.com/Download-Font-Hypmotizin

Webfonts: http://www.google.com/webfonts

Möchten Sie mehr zu unseren Leistungen, Produkten oder zu unserem UX-Prozess erfahren?
Wir sind gespannt auf Ihre Anfrage.

Corporate Experience Manager
+49 681 959 3110
Kontaktformular

Bitte bestätigen Sie vor dem Versand Ihrer Anfrage über die obige Checkbox, dass wir Sie kontaktieren dürfen.
  • Saarbrücken

    Science Park Saar, Saarbrücken

    Standort Südwest

    Hauptsitz Saarbrücken
    Centigrade GmbH
    Science Park 2
    66123 Saarbrücken
    Deutschland
    Saarland
    Auf der Karte

    +49 681 959 3110

    +49 681 959 3119

  • Mülheim an der Ruhr

    Games Factory Mülheim an der Ruhr

    Standort Nordwest

    Geschäftsstelle Mülheim
    Centigrade GmbH
    Kreuzstraße 1-3
    45468 Mülheim an der Ruhr
    Deutschland
    Nordrhein-Westfalen
    Auf der Karte

    +49 208 883 672 89

    +49 681 959 3119

  • Haar · München

    Haar / München

    Standort Süd

    Geschäftsstelle München
    Centigrade GmbH
    Bahnhofstraße 18
    85540 Haar · München
    Deutschland
    Bayern
    Auf der Karte

    +49 89 20 96 95 94

    +49 681 959 3119

  • Frankfurt am Main

    Frankfurt am Main

    Standort Mitte

    Geschäftsstelle Frankfurt
    Centigrade GmbH
    Kaiserstraße 61
    60329 Frankfurt am Main
    Deutschland
    Hessen
    Auf der Karte

    +49 69 241 827 91

    +49 681 959 3119