Mit Schriften gestalten: Ein Leitfaden für UI-Schriftgrößenrichtlinien

Die Bedeutung der Typografie im UI-Design

Die Typografie spielt eine wichtige Rolle im UI-Design. Die Wahl der Schriftart, des Schriftbildes und der Schriftgröße ist ausschlaggebend dafür, wie ein Nutzer deine Inhalte erlebt. Mit Bedacht eingesetzt, kann die Art und Weise, wie der Text gestaltet wird — Größe, Abstand und Form der Buchstaben — eine klare visuelle Hierarchie schaffen, die Lesbarkeit verbessern und Ton und Persönlichkeit vermitteln.

Egal, ob du auf den Bildschirm eines tragbaren Geräts wie einer Smartwatch schaust, dich mit langen Inhalten beschäftigst oder online einkaufst, die Schrift — und insbesondere die Schriftgröße — trägt zu einem positiven Erlebnis bei. Ist die Schriftgröße zu klein, können die Nutzer den Inhalt nur schwer lesen, ist sie zu groß, stört sie das Gesamtdesign. Beides wirkt sich negativ auf das Leseerlebnis aus und führt zu Frustration. Eine gut gewählte Schriftgröße bedeutet, dass der Text lesbar und angenehm zu lesen ist, was zum Verständnis und zur allgemeinen Benutzerfreundlichkeit beiträgt.

Die Grundlage schaffen: Beständigkeit ist alles!

Es gibt keine „beste Schriftart“ für das Lesen im Internet, und die zunehmende Verbreitung von hochauflösenden Bildschirmen bedeutet, dass sowohl serifenbetonte als auch serifenlose Schriftarten für das Lesen auf Bildschirmen geeignet sind. Wie wählst du also die Schriftarten für dein Design aus?

Laura Heine, UX-Designerin bei b13, erklärt unseren Ansatz. „Wenn wir für einen Kunden eine neue Typografie auswählen müssen, überlegen wir, was am besten zu seiner Marke und dem Charakter seines Unternehmens passt. Wir berücksichtigen auch Funktion und Form. Dabei orientieren wir uns zunächst an den Richtlinien für das Corporate Branding.“

Markenrichtlinien

Corporate Branding Guidelines sind ein Regelwerk für die konsistente visuelle Darstellung der Marke eines Unternehmens über verschiedene Kanäle und Materialien hinweg, um eine erkennbare und einheitliche Identität zu schaffen. Die Richtlinien umfassen normalerweise Elemente wie Logos, Farbpalette, Typografie und Sprachstil.

Um die Markenidentität über alle Kanäle (einschließlich Print und Online) hinweg einheitlich zu gestalten, sollten Designer die gleichen Schriftarten verwenden. Die Verwendung einer Schriftart für den Druck unterscheidet sich jedoch von der für das Internet - und das beginnt schon bei der Lizenzierung. Prüfe, ob du eine kostenlose oder eine lizenzierte Schrift verwendest. Wenn sie lizenziert ist, überprüfe, ob die Webschrift in der Lizenzvereinbarung enthalten ist. 

Wenn du keine Markenrichtlinien hast oder es dir nicht leisten kannst, eine Schriftart zu kaufen, musst du vielleicht eine neue Schriftart für dein Design auswählen. Laura Heine erzählt, wie b13 damit umgeht: „In den seltenen Fällen, in denen wir die Schriftart für die Website eines Kunden frei wählen können, verwenden wir nie mehr als zwei und für jede Schriftart nicht mehr als drei verschiedene Schriftarten. So haben wir genug Möglichkeiten, verschiedene Informationshierarchien darzustellen und gleichzeitig das Gesamtbild konsistent zu halten.“

Schriftarten mischen

Zwei verschiedene Schriftarten reichen schon aus, um einen Text interessanter zu gestalten und Überschriften von Fließtext zu unterscheiden, aber die Kombination von Schriftarten kann knifflig sein. Achte darauf, dass sie gut zusammenpassen — das heißt, achte auf Konsistenz bei Grundlinie, x-Höhe, Fuß und Strichstärke. Schau dir die Empfehlungen der NNGroup in ihrem Leitfaden an: The Dos and Don'ts of Pairing Typefaces.

Einheitliche Schriftgrößen

Es ist sehr wichtig, dass die Schriftgrößen immer einheitlich sind, und zwar aus mehreren Gründen:

• Optische Konsistenz: Das sorgt für ein einheitliches und professionelles Erscheinungsbild. Ungleichmäßige Schriftgrößen können verwirrend sein und den Gesamteindruck beeinträchtigen.
• Markenidentität: Wenn du überall die gleiche Schriftgröße verwendest, z. B. auf Websites, in Marketingmaterialien und in Apps, wird die Wiedererkennbarkeit deiner Marke verbessert und ihre visuelle Identität gestärkt.
• Lesbarkeit und Benutzerfreundlichkeit: Wenn Nutzer in einer Benutzeroberfläche oder einem Inhalt durchgängig auf vertraute Schriftarten stoßen, reduziert dies die kognitive Belastung und sorgt für ein angenehmeres Leseerlebnis.
• Hierarchie und Kommunikation: Einheitliche Schriftarten, -größen und -stärken erleichtern die Navigation und ermöglichen es den Nutzern, Überschriften, Unterüberschriften, Fließtext und andere Elemente schnell zu unterscheiden.
• Barrierefreiheit: Nutzer mit Sehbehinderungen oder kognitiven Einschränkungen sind auf einheitliche Schriftarten und Typografie angewiesen, um sich zurechtzufinden und Inhalte zu verstehen.

Richtlinien zur Schriftgröße

Jede Schriftart sieht ein bisschen anders aus, daher ist es schwierig, eine definitive Antwort auf die Frage nach der Mindestschriftgröße zu geben. Laura Heine empfiehlt, dass „der Fließtext nicht kleiner als 16 px sein sollte, damit er gut lesbar ist. Wenn du eine Website mit langen Artikeln hast, solltest du besser eine Schriftgröße zwischen 18 px und 20 px wählen, damit das Lesen längerer Texte für den Nutzer angenehm ist.“ Oft ist es sinnvoll, einen zweiten Stil für den Fließtext zu verwenden, der entweder etwas kleiner oder etwas größer ist als der Haupttext. Dieser kann für Artikelüberschriften, Teaser-Texte oder Infoboxen verwendet werden.

Am besten skaliert man Überschriften relativ zur Textgröße, um eine klare visuelle Unterscheidung zwischen verschiedenen Überschriftenebenen und dem Fließtext zu schaffen. Verwende eine vorhersehbare Skalierung — es gibt aber keine festen Regeln. Beginne mit einer Grundgröße und erhöhe diese dann konsistent um ein Verhältnis wie 1,125 oder 1,333. Adobe-Schriftarten verwenden ein Verhältnis von 1,125, und IBM hat eine eigene Skalierung auf Basis einer einzigen Gleichung entwickelt.

Bei informativen Texten wie Bildunterschriften, Fußnoten oder Kleingedrucktem ist es wichtig, ein Gleichgewicht zwischen Lesbarkeit und Platzersparnis zu finden. Die Schriftgröße für kleineren Text sollte den Kontext und alle visuellen Elemente oder Einschränkungen berücksichtigen. Info-Text wie das Copyright unter einem Bild oder erklärender Text in einem Formular kann recht klein sein, sollte aber auf keinen Fall kleiner als 12 px sein, damit er lesbar bleibt.

Establishing a Typographic Hierarchy

Hierarchien sind bei jedem Informationsdesign echt wichtig. Sie helfen dem Leser, relevante Inhalte schnell zu finden und machen den Inhalt einer Website übersichtlich. Typografie ist ein super Tool, um diese Hierarchien einfach und effektiv zu erstellen — aber damit die Website einheitlich aussieht, sollten wir nicht zu viele verschiedene Textstile verwenden.

Die NNGroup sagt, dass drei Schriftgrößen für den Anfang ausreichen. Klein, mittel und groß bieten genug Abwechslung, um damit zu arbeiten, und halten trotzdem die hierarchischen Beziehungen klar und deutlich. Der Kreativdesigner Dan Mall weist darauf hin, dass viele Designs mehr als drei Optionen brauchen (bei Kleidung reichen die üblichen Größen S, M und L nicht aus, um allen Bedürfnissen gerecht zu werden und Abwechslung zu bieten). Er hat ein einfaches numerisches System entwickelt, um sieben typografische Stile mit einer leicht vorhersehbaren Skala zu erstellen, das auch in Zukunft noch Bestand haben dürfte.

Laura Heine stimmt zu, dass sieben eine gute Ausgangsbasis sind. Sie sagt: „Normalerweise reicht es, vier verschiedene Überschriften, zwei Schriftgrößen für den Fließtext und vielleicht ein Infotextelement zu definieren. Damit hast du etwa sieben verschiedene Schriftgrößen, was eine gute Ausgangsbasis ist.“ Während des Designprozesses kommt es häufig vor, dass du auf Ausnahmen stößt oder vielleicht eine weitere Überschrift hinzufügen musst, aber denk einfach daran: weniger ist mehr.

Laura erklärt, wie das UX-Design-Team bei b13 die Größe nutzt, um eine Hierarchie innerhalb der Benutzeroberfläche zu schaffen. „Ausgehend von der Größe des Fließtextes definieren wir vier Überschriftenstile. Die größte Schriftart für Titel und auffällige Überschriften kann ziemlich dramatisch sein. Für die anderen drei füllen wir die Skala zwischen dem Fließtext und der größten Überschrift aus. Es ist wichtig, die Schriftgrößen immer im Kontext zu betrachten, verschiedene Überschriften mit Fließtext zu kombinieren und zu prüfen, was zusammen gut aussieht. Auch der Kontext sollte berücksichtigt werden. Eine Überschrift der Stufe drei wird höchstwahrscheinlich in unmittelbarer Nähe zum Fließtext verwendet, daher musst du darauf achten, dass sie den Lesefluss nicht stört.“

Beachte, dass du bei der Wahl der Schriftgrößen immer auch die Zeilenhöhe berücksichtigen musst. Als Faustregel gilt: Für Überschriften solltest du das 1,2-fache der Schriftgröße und für Fließtext das 1,5-fache der Schriftgröße wählen. So ist die Zeilenhöhe groß genug, damit der Leser leicht von einer Zeile zur nächsten springen kann, und gleichzeitig klein genug, damit ein Textblock noch wie ein tatsächlicher Block aussieht.

Tipps für Schriftstärke und Farbe

Die Größe ist nicht das einzige, was du bei der Auswahl von Text in deinem Design beachten solltest. Denk auch an die Schriftstärke und -farbe. Achte darauf, dass du eine einheitliche Optik und eine klare Designsprache anstrebst. Wenn du zu viele Schriftstärken oder verschiedene Farben verwendest, kann das Design schnell unübersichtlich und überladen wirken. Wenn du Schriftstärken und -farben mit Bedacht einsetzt, kannst du die visuelle Hierarchie unterstreichen, die Verständlichkeit für den Nutzer verbessern und die Lesbarkeit erhöhen.

Kontrast zwischen Überschriften und Fließtext mit Schriftstärke verbessern

Mit der Schriftstärke kannst du deine Überschriften besser hervorheben und kleinere Überschriften vom Fließtext abheben. Bei der Gestaltung von Webinhalten solltest du dünne oder hauchdünne Schriftstärken vermeiden. Diese sehen auf hochwertigen Bildschirmen zwar gut aus, können aber auf älteren Geräten oder für Menschen mit Sehschwäche schwer lesbar sein. Um einen guten Kontrast zwischen den Hierarchien zu gewährleisten, solltest du Schriftstärken verwenden, die sich nicht zu sehr ähneln. Versuche außerdem, nicht mehr als drei Schriftstärken zu verwenden, damit das Erscheinungsbild deiner Website einheitlich bleibt.

Nutze Schriftfarben, um Hierarchien zu ergänzen und zu unterstützen

Farben können ein zusätzliches Mittel sein, um Hierarchien zu vermitteln, sollten aber nie das einzige Mittel zur Informationsvermittlung sein. Kombiniere sie daher unbedingt mit Schriftgröße oder Schriftstärke. Wenn du mehr über die Verwendung von Farben im UI-Design erfahren möchtest, lies unseren Artikel zu den Grundlagen des UI-Designs: Farbe.

Richtlinien für die Schriftgröße im UI-Design umsetzen

Lesbarkeit und Zugänglichkeit für alle Nutzer sicherstellen

Lass dich nicht dazu verleiten, Stil über Substanz zu stellen — achte bei der Auswahl einer Schriftart auf die Lesbarkeit. Handgeschriebene oder geschwungene Schriftarten sehen als Akzente toll aus, sind aber bei längeren Textblöcken oft schwer zu lesen. Wähle Schriftarten mit klaren Zeichen (die den I-L-1-Test bestehen), damit die Nutzer Informationen auf einen Blick leicht unterscheiden können.

Bestandsaufnahme deiner vorhandenen Schriftarten

Wenn du nicht ganz von vorne anfängst, ist es eine gute Idee, deine vorhandenen Schriftarten zu überprüfen. Ein Tool wie CSSstats.com zeigt dir schnell, wie viele verschiedene Schriftgrößen und Schriftfamilien du gerade verwendest. Von hier aus kannst du dann deine Codebasis durchsuchen und sehen, wie bestimmte Schriftgrößen verwendet werden, indem du sie einer bestimmten Kategorie zuordnest. Möglicherweise stellst du fest, dass viele deiner Schriftgrößen kaum verwendet werden — eine gute Gelegenheit, um aufzuräumen und einige Schriftgrößen aus dem Verkehr zu ziehen!

Absatzformate mit echten oder Dummy-Inhalten testen

Sobald du verschiedene Absatzformate definiert hast, solltest du sie in einem echten Website-Layout ausprobieren. So kannst du sehen, wie sie im Gesamtkontext der Website wirken und wie sie miteinander harmonieren. Wenn du deine Formate testest, solltest du immer echte Inhalte verwenden, wenn du welche hast. Wenn nicht, nimm Dummy-Inhalte in der Sprache der Website. Versuche, verschiedene Wortzahlen und Satzlängen zu mischen, um deine Stile in verschiedenen Kontexten wirklich zu testen. Manchmal braucht man eine absichtlich textlastige Benutzeroberfläche, um die Wirkung einer Schriftart zu erkennen.

UI-Typografie sollte in den meisten, wenn nicht sogar in allen Situationen gut funktionieren. Die einzige Möglichkeit, um herauszufinden, ob die von dir gewählte Typografie diese Eigenschaften aufweist, ist, sie in der Praxis zu verwenden oder zu simulieren. Diese Art von Tests ist äußerst nützlich, da wir die Schriftart anhand ihrer Vorzüge in der Benutzeroberfläche beurteilen können. AirBnB hat seine neue Schriftart Cereal ausgiebig getestet. Sechs Monate lang wurden 30 verschiedene Versionen der Schriftart hinsichtlich Stil und Gewicht getestet. Nachdem man sich für einen Gesamtstil entschieden hatte, wurden weitere sechs Monate damit verbracht, die Schriftart in der Benutzeroberfläche auf Herz und Nieren zu prüfen.

Tipps für Textlayout, Zeilenlänge und Abstände

Bei Sprachen, die von links nach rechts gelesen werden, solltest du immer linksbündigen Text verwenden, damit alles gut lesbar ist. Zentrierter Text sollte nur mit Bedacht eingesetzt werden. Er kann zwar als Akzent schön aussehen, aber die unregelmäßigen Anfangskanten erschweren es dem Auge, von einer Zeile zur nächsten zu springen. Vermeide nach Möglichkeit Blocksatz. Blindtext kann in gedruckter Form gut aussehen, wo du jeden Absatz manuell anpassen kannst, aber im Web führt das zwangsläufig zu unschönen Leerzeichen in deinen Zeilen.

Achte auch auf die tatsächliche Breite deiner Textzeilen. Laura Heine erklärt: „Hast du schon mal versucht, einen langen Artikel auf einer Website zu lesen, die die gesamte Breite des Fensters für den Text nutzt? Das ist für jeden Leser sehr anstrengend.“ Die beste Vorgehensweise für lesbare Inhalte ist, die Zeilenlänge auf etwa 70 bis 80 Zeichen zu beschränken. Das ist besonders wichtig, wenn du längere Inhalte wie Blog-Artikel auf deiner Website hast.

Der Abstand kann eine knifflige Angelegenheit sein. Das Wichtigste beim Abstand zwischen typografischen Elementen ist, Elemente zu gruppieren, die zusammengehören. Das erleichtert dem Leser das Überfliegen und Verstehen von Inhaltsblöcken. Das klingt vielleicht einfach, hat aber eine große Wirkung.

Responsives Design und Anpassung der Schriftgröße

Du möchtest, dass deine sorgfältig ausgewählten Schriftarten sich elegant an verschiedene Geräte anpassen, damit sich Inhalte nahtlos an unterschiedliche Bildschirmgrößen anpassen, ohne dass die Lesbarkeit darunter leidet. Dazu musst du dich mit Stylesheets auskennen. Dieser jahrzehntealte Artikel der NNGroup über die effektive Verwendung von Cascading Style Sheets (CSS) ist auch heute noch aktuell.

Verwende relative Einheiten anstelle von festen Pixelwerten. Relative Einheiten wie Prozentangaben und ems ermöglichen eine proportionale Skalierung der Schriftgrößen basierend auf dem übergeordneten Element oder den Standardeinstellungen des Browsers. Du kannst auch Media Queries verwenden, um die Schriftgrößen für bestimmte Breakpoints fein abzustimmen und so das Nutzererlebnis auf verschiedenen Geräten zu steuern.

Techniken zur Wahrung der Lesbarkeit auf verschiedenen Geräten

• Barrierefreiheit: Nutzer mit Sehbehinderungen benötigen möglicherweise größere Schriftgrößen, um den Text bequem lesen zu können. Die Web Content Accessibility Guidelines (WCAG 2.1) legen fest, dass Text ohne Verlust von Inhalt oder Funktionalität auf bis zu 200 % vergrößert werden können muss.
• Setz den Viewport-Meta-Tag: Der Viewport ist der sichtbare Bereich auf dem Bildschirm eines Nutzers. Setz den Viewport-Meta-Tag, damit der Browser die Größe des Inhalts an den Bildschirm anpassen kann. So müssen Nutzer nicht mehr zoomen, um den Text auf verschiedenen Geräten lesen zu können.
• Halt die Zeilenlänge möglichst kurz: Vermeide übermäßig lange Textzeilen, die Nutzer zum horizontalen Scrollen zwingen würden. Als allgemeine Richtlinie gilt, dass Zeilen zwischen 45 und 75 Zeichen lang sein sollten, einschließlich Leerzeichen.
• Gestalte für deinen Anwendungsfall: Verstehe, wie deine Nutzer mit deinem Design interagieren werden, und wähle Schriftgrößen, die in diesem Kontext angenehm zu lesen sind. Achte auf den Betrachtungsabstand.
• Führe Nutzertests durch: Teste deine Schriftgrößen auf verschiedenen Geräten und Bildschirmauflösungen. Emuliere reale Szenarien, indem du deine Benutzeroberfläche auf verschiedenen Smartphones, Tablets und Desktop-Monitoren betrachtest.

Typografie zum Leben erwecken: Der Schlüssel zu coolen Webdesigns

Eine gut gemachte Typografie ist das A und O für ein cooles Webdesign. Sie hilft dir, deine Inhalte lesbar und ansprechend zu präsentieren, und erhöht die Chance, dass die Leute deine Inhalte lesen und verstehen.

Es ist nie zu spät, deine UI-Designs mit einem kritischen Blick auf deine Schriftarten zu überprüfen und zu aktualisieren. Passen sie noch zu deiner Marke und vermitteln sie den Stil deines Unternehmens? Wenn du das Gefühl hast, dass das typografische System deiner Website im Laufe der Jahre aus dem Ruder gelaufen ist, wende dich an b13 und wir finden gemeinsam eine Lösung.

Möchtest du die Benutzerfreundlichkeit deiner Website verbessern? Unsere User Experience Services helfen dir dabei, deine Typografie und das Gesamtdesign zu optimieren.

Häufig gestellte Fragen

Was ist die beste Schriftgröße für UI-Design?

Es gibt keine offizielle Mindestschriftgröße, aber für Fließtext sind etwa 16 Pixel ein guter Anfang. Die Größe für andere Elemente wie Überschriften und Informationstexte sollte sich nach der Größe des Fließtextes richten. Denk an Lesbarkeit, Hierarchie, Kontext und responsives Design.

Wie viele Schriftarten sollte man in einem UI-Design verwenden?

Wenn du die Schriftarten auf eine Hauptschriftart, eine Überschriften- und ein paar Akzent-Schriftarten beschränkst, bleibt das Design harmonisch und bietet trotzdem genug Abwechslung für verschiedene UI-Elemente.

Wie kann ich sicherstellen, dass mein UI-Design für alle Nutzer zugänglich ist?

Mach dein UI-Design inklusiv und zugänglich, indem du die folgenden Tipps beachtest:

• Verwende einen angemessenen Farbkontrast für gute Lesbarkeit.
• Füge beschreibende Alternativtexte für Bilder hinzu.
• Verwende eine hierarchische Überschriftenstruktur.
• Sorge dafür, dass alle interaktiven Elemente über die Tastatur zugänglich sind.
• Verwende beschreibende Linktexte, um den Zweck der Links zu vermitteln.
• Achte bei der Gestaltung auf Skalierbarkeit und Anpassungsfähigkeit an verschiedene Geräte.
• Führe Nutzertests mit Personen mit unterschiedlichen Fähigkeiten durch. 

Wie passe ich die Schriftgröße an verschiedene Geräte und Bildschirmauflösungen an?

Verwende relative Einheiten wie Prozent, em oder rem anstelle von festen Pixelwerten. So wird die Schriftgröße automatisch an das Gerät oder die Bildschirmgröße des Benutzers angepasst. Testen Sie die Lesbarkeit auf verschiedenen Geräten und mit unterschiedlichen Auflösungen, um sicherzustellen, dass der Text auf allen Bildschirmen gut lesbar ist.