--- title: "UI-bezogene Schriftgrößenrichtlinien: Meistern von Typografie für besseres UX-Design" url: "https://b13.com/de/wissen/designing-with-type-a-guide-to-ui-font-size-guidelines" description: Entdecke die Bedeutung von UI-Schriftgrößenrichtlinien für barrierefreie und visuell ansprechende UI-Designs. Lerne die besten Praktiken für Typografie in der Benutzeroberfläche, einschließlich Konsistenz, Hierarchie und Responsivität, und bringe dein Benutzererlebnis auf die nächste Stufe. image: "https://b13.com/fileadmin/_processed_/c/3/csm_FontGuidelines_Sharing_7a234f1b9a.png" date: 2025-05-14 modified: 2026-08-19 lastUpdated: 2026-08-19 --- # UI-bezogene Schriftgrößenrichtlinien: Meistern von Typografie für besseres UX-Design [ UX/UI-Design ](https://b13.com/de/wissen/uxui-design) [ Accessibility ](https://b13.com/de/wissen/accessibility) Mit Schriften gestalten: Ein Leitfaden für UI-Schriftgrößenrichtlinien ======================================================================== ![](https://b13.com/fileadmin/_processed_/a/d/csm_david_5ce18d41e2.jpg)David Steeb 03. Juni 2025 [ RSS Feed ](https://b13.com/de/rss.xml) ![Zwei Roboterarme sind um eine Lupe positioniert und konzentrieren sich auf den Buchstaben "g" in einer stilisierten Schriftart. Der Hintergrund zeigt ein Gittermuster mit wiederholten "Ag"-Symbolen.](https://b13.com/fileadmin/_processed_/1/8/csm_FontGuidelines_Headerbild_9a55174ca3.webp) Der Hauptzweck von Websites besteht darin, Informationen zu vermitteln, und das geschieht in erster Linie durch Text. Das macht die Typografie zu einem der wichtigsten Aspekte bei der Gestaltung der Benutzeroberfläche (UI). Wenn du die Typografie als Teil deines Website-Designs betrachtest, musst du einige Dinge beachten, um sicherzustellen, dass die Inhalte auf deiner Website leicht zu lesen sind und die Bedürfnisse deiner Nutzer erfüllen. Es gibt auch einige Herausforderungen, denen du in Printmedien nicht begegnen wirst. In diesem Blogbeitrag gehen wir auf die Schriftgröße ein — wie sie sich auf das Nutzererlebnis auswirkt, wie sie zur Markenwahrnehmung beiträgt und welche typografischen Elemente du bei der Gestaltung deines nächsten digitalen Auftritts berücksichtigen solltest. Unsere UX-Experten bei b13 lieben es, Probleme mit gutem Design zu lösen und Schriftgrößen zu nutzen, um Bedeutung zu vermitteln. Brauchst du Hilfe bei deinem UI-Design? Unsere User Experience Services helfen dir dabei, eine barrierefreie und visuell ansprechende Benutzeroberfläche zu gestalten. [ Let’s Connect ](https://b13.com/de/kontakt) 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. > Webdesign ist zu 95% Typografie. Oliver Reichenstein 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 Wörter „Schrift“ („Typeface“) und „Schriftart“ („Font“) werden oft synonym verwendet, aber eigentlich sind es zwei verschiedene Dinge. Eine **Schrift** bezieht sich auf das Design einer ganzen Familie von Schriftarten, wie zum Beispiel „Helvetica“. Eine **Schriftart** ist ein bestimmtes Mitglied dieser Familie, z. B. „Helvetica light“. Mit diesem praktischen [Spickzettel für Typografie-Begriffe](http://„https://www.nngroup.com/articles/typography-terms-ux/“) kannst du weitere Begriffe entschlüsseln. Die Grundlage schaffen: Beständigkeit ist alles! -------------------------------------------------- Es gibt [keine „beste Schriftart“](https://www.nngroup.com/articles/best-font-for-online-reading/) für das Lesen im Internet, und die zunehmende Verbreitung von hochauflösenden Bildschirmen bedeutet, dass [sowohl serifenbetonte als auch serifenlose Schriftarten](https://www.nngroup.com/articles/serif-vs-sans-serif-fonts-hd-screens/) für das Lesen auf Bildschirmen [geeignet sind](https://www.nngroup.com/articles/serif-vs-sans-serif-fonts-hd-screens/). 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](https://www.nngroup.com/articles/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](https://spectrum.adobe.com/page/typography/#Font-sizes)-Schriftarten verwenden ein Verhältnis von 1,125, und [IBM](https://carbondesignsystem.com/guidelines/typography/overview/#scale) 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](https://www.nngroup.com/articles/principles-visual-design/) 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,](https://www.nngroup.com/articles/visual-hierarchy-ux-definition/) 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](https://danmall.com/posts/typography-in-design-systems/), 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. ![Schriftartenbeispiele für "Pluto Sans" in verschiedenen Größen und Stilen, einschließlich "Condensed Bold" in 40px, 32px, 24px und 20px. Text enthält Platzhalterinhalte zur Demonstration der Schriftart.](https://b13.com/fileadmin/_processed_/c/9/csm_image4_10c5ac585b.webp) 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. ![Zwei Textblöcke vergleichen die Lesbarkeit von Überschriften und Fließtext. Der erste Block zeigt eine "fette" Überschrift mit "mittlerem" Text, während der zweite Block eine "fette" Überschrift mit "normalem" Text präsentiert, der besser lesbar ist.](https://b13.com/fileadmin/_processed_/1/3/csm_image1_5662f10d25.webp) ### 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](https://b13.com/de/wissen/ui-design-grundlagen-farben). 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](https://www.nngroup.com/videos/il1-typography-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](https://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](https://airbnb.design/working-type/). 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. ![Vier Textblöcke in verschiedenen Farben (schwarz, grau, rot) sind gleichmäßig auf einem weißen Hintergrund angeordnet. Jeder Block enthält mehrere Zeilen Text, wobei einige Zeilen hervorgehoben sind.](https://b13.com/fileadmin/_processed_/a/8/csm_image3_9188fd349d.webp) The grouping on the left is too spaced out, making it hard to identify the blocks. The grouping on the right clearly shows the elements that belong together. 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)](https://www.nngroup.com/articles/effective-use-of-style-sheets/) 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](https://matthewjamestaylor.com/responsive-font-size) 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)](https://www.w3.org/TR/WCAG21/#resize-text) 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](https://www.w3schools.com/css/css_rwd_viewport.asp), 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](https://www.w3.org/TR/WCAG21/#contrast-enhanced) 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. ### Geschrieben von: ![Lächelnder Mann mit kurzen Haaren und einem Bart, der ein rotes T-Shirt trägt, steht in einem gut beleuchteten Innenraum mit verschwommenem Hintergrund.](https://b13.com/fileadmin/_processed_/a/d/csm_david_cf042ebb7f.webp) Als b13-Gründer und CEO is David derjenige, mit dem Du es zu tun haben wirst, wenn Du mit uns zusammenarbeiten möchtest. Er eignet sich ständig neue Fähigkeiten an und bestimmt maßgeblich unsere hochmodernen Ansätze in der Frontend-Entwicklung. David Steeb CEO [ mehr von David Steeb ](https://b13.com/de/team/david-steeb) Ähnliche Artikel ------------------ - ![Eine robotische Hand hält einen Pinsel und erzeugt einen lila Wirbel vor einem hellblauen Hintergrund mit kreisförmigen Mustern.](https://b13.com/fileadmin/_processed_/b/d/csm_DesignAndKI_Headerbild_bd966b1d32.webp) ### Verantwortungsvoll gestalten im KI-Zeitalter: Unsere Learnings 17. Juli 2026 | Laura Heine Laura Heine teilt, was sie beim Design Leadership Meetup über Verantwortung, Dokumentation und einen fairen Umgang mit KI im Team gelernt hat. [ weiterlesen: Verantwortungsvoll gestalten im KI-Zeitalter: Unsere Learnings ](https://b13.com/de/wissen/verantwortungsvoll-gestalten-im-ki-zeitalter-unsere-learnings) - ![Mehrere farbenfrohe Mockups von Webseiten, die übereinander gestapelt sind und verschiedene Layouts sowie Designelemente vor einem lila Hintergrund präsentieren.](https://b13.com/fileadmin/_processed_/e/3/csm_CaminoTheme_Headerbild_d082598009.webp) ### Camino—The Need for a Default Theme in TYPO3 Is Real 27. Januar 2026 | Benni Mack With TYPO3 v14, Camino introduces a default theme that removes friction from first installs. Why this matters—and how TYPO3 laid the groundwork. - ![Benutzeroberflächendesign mit einer dunklen Seitenleiste, die Navigationsoptionen bietet, und einem zentralen Inhaltsbereich mit Platzhaltertext.](https://b13.com/fileadmin/_processed_/6/6/csm_V14BackendUX_Headerbild_6dcecb335f.webp) ### Gestaltung des Backends von TYPO3 v14: Unsere Vision für eine moderne, erweiterbare Grundlage 12. Januar 2026 | Laura Heine b13 gestaltet das Backend von TYPO3 für Version 14 neu, damit es moderner wirkt, schneller läuft, den Benutzerkontext beibehält und eine erweiterbare Grundlage schafft, die sich… [ weiterlesen: Gestaltung des Backends von TYPO3 v14: Unsere Vision für eine moderne, erweiterbare Grundlage ](https://b13.com/de/wissen/gestaltung-des-backends-von-typo3-v14-unsere-vision-fuer-eine-moderne-erweiterbare-grundlage) - ![Benutzerschnittstellenelemente wie Textfelder, Kontrollkästchen und Schaltflächen, verbunden durch Pfeile auf einem lila Hintergrund.](https://b13.com/fileadmin/_processed_/f/7/csm_EffectiveWebForms_Headerbild_2c906e6176.webp) ### Wie man Webformulare richtig macht 18. August 2025 | David Steeb Effective web form design is a critical component of user engagement and conversion. By focusing on clarity, simplicity, and user experience, businesses can create web forms that… [ weiterlesen: Wie man Webformulare richtig macht ](https://b13.com/de/wissen/wie-man-webformulare-richtig-macht) - ![Eine lila Mappe ist zentral platziert und von roten und blauen rechteckigen Elementen umgeben, die durch Linien auf einem Gitterhintergrund verbunden sind.](https://b13.com/fileadmin/_processed_/1/5/csm_EffectiveInformationArchitecture_Headerbild_c5bbf51bfe.webp) ### Effektive Informationsarchitekturen entwerfen: Best Practices 30. Juli 2025 | David Steeb Tauche ein in unseren neuesten Artikel über die Welt der Informationsarchitektur und ihren entscheidenden Einfluss auf die User Experience. Erfahre zentrale Strategien und Best… [ weiterlesen: Effektive Informationsarchitekturen entwerfen: Best Practices ](https://b13.com/de/wissen/designing-an-effective-information-architecture-best-practices) - ![Ein Laptop mit einem gelben Vorhängeschloss auf dem Bildschirm, umgeben von roten Symbolen, die ein Auge, ein Ohr, ein Mikrofon, eine Hand und ein Gehirn darstellen, was Sicherheits- und Datenschutzbedenken in digitalen Umgebungen symbolisiert.](https://b13.com/fileadmin/_processed_/d/a/csm_AccessibilityIsKey_Headerbild_a91f1c635a.webp) ### Barrierefreiheit im Internet: Design jenseits der Vorgaben für inklusive digitale Erlebnisse für alle Benutzer 25. März 2025 | Marco Heine Aus Bequemlichkeit, Zeitmangel und Unwissenheit wird das Thema Barrierefreiheit oft vernachlässigt. Doch schon mit kleinen Verbesserungen kann man dafür sorgen, dass die eigene… [ weiterlesen: Barrierefreiheit im Internet: Design jenseits der Vorgaben für inklusive digitale Erlebnisse für alle Benutzer ](https://b13.com/de/wissen/barrierefreiheit-jenseits-der-vorgaben-fuer-inklusive-digitale-erlebnisse) - ![](https://b13.com/fileadmin/_processed_/a/5/csm_CodeAccessibility_Headerbild_d1ed666070.webp) ### Leitfaden zur Umsetzung von Standards für die Barrierefreiheit im Internet 07. März 2025 | David Steeb Das Schreiben von Code ist im Grunde eine Aufgabe, bei der es darum geht, eine solide Grundlage zu schaffen, die sowohl Inklusivität als auch Skalierbarkeit berücksichtigt.… [ weiterlesen: Leitfaden zur Umsetzung von Standards für die Barrierefreiheit im Internet ](https://b13.com/de/wissen/leitfaden-umsetzung-standards-barrierefreiheit) - ![Illustration of a manual and automated website testing process. A human hand holds a magnifying glass, highlighting various information symbols, while a robotic hand also uses a magnifying glass. In the background, gears and a technical grid pattern emphasize the technological aspect of the topic. The image symbolizes the contrast between manual and automated accessibility testing.](https://b13.com/fileadmin/_processed_/a/8/csm_ManualTesting_Headerbild_08d02da14d.webp) ### Warum automatisierte Barrierefreiheitsprüfungen nicht genug sind 28. Februar 2025 | Marco Heine Automatisierte Tests finden nur etwa 20–30 % der Fälle WCAG-Probleme. Hier erfährst du, warum du manuell testen solltest, um echte Barrierefreiheit zu erreichen! [ weiterlesen: Warum automatisierte Barrierefreiheitsprüfungen nicht genug sind ](https://b13.com/de/wissen/warum-automatisierte-barrierefreiheitspruefungen-nicht-genug-sind) - ![Ein Abschlusskappe ist zentral zwischen verschiedenen Elementen eines Flussdiagramms platziert, darunter Rechtecke und Kreise, vor einem Farbverlauf-Hintergrund. Das Design vermittelt Themen von Bildung und Entscheidungsprozessen.](https://b13.com/fileadmin/_processed_/2/e/csm_MasteringWebFlow_Headerbild_1558d4dcea.webp) ### Mastering Website Flowcharts 21. Mai 2024 | Stefanie Kreuzer Ein optimaler Benutzerfluss ist entscheidend für erfolgreiche Websites. Erfahre, wie du mit Flowcharts schon früh im UX-Designprozess für Klarheit sorgen kannst. [ weiterlesen: Mastering Website Flowcharts ](https://b13.com/de/wissen/mastering-website-flowcharts) - ![Wireframing Best Practices](https://b13.com/fileadmin/_processed_/1/e/csm_Wireframing_4b24c64a42.webp) ### Die Kunst des Wireframing beherrschen: Wichtige Tipps und Techniken 31. August 2023 | Stefanie Kreuzer Wireframing ist der erste Schritt bei der Gestaltung einer Website und dient vielen Zwecken: Es beschreibt, wie Informationen auf einer Seite dargestellt werden, legt die Struktur… [ weiterlesen: Die Kunst des Wireframing beherrschen: Wichtige Tipps und Techniken ](https://b13.com/de/wissen/die-erfolgsmethode-wireframing)