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

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.

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.“

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.„

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.

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.

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.

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.

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.

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.

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!

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.

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.

• 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.

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.

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.

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.

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. 

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.