Barrierefreie Schriftarten 2026: Die besten Accessibility Fonts
Barrierefreie Schriftarten 2026: Atkinson Hyperlegible Next, Lexend und Inter im Vergleich, WCAG konform und BFSG ready, Praxiswissen von NCA Duisburg
Mehr erfahren
Inter ist eine frei verfügbare Open Source Schriftart, die 2016 von dem schwedischen Designer und Entwickler Rasmus Andersson während seiner Zeit bei Figma entworfen und 2017 erstmals veröffentlicht wurde. Sie ist speziell für Bildschirm Oberflächen konzipiert: eine neo grotesque Sans Serif mit hoher x Höhe, offenen Aperturen und klar unterscheidbaren Zeichen, die auch bei kleinen Schriftgrößen lesbar bleibt.
Inter steht unter der SIL Open Font License (OFL) und ist damit kostenfrei für kommerzielle und private Projekte nutzbar, inklusive Einbettung in Webseiten, Apps und Betriebssysteme. Die Schrift unterstützt über 140 Sprachen und steht als Variable Font zur Verfügung, was bedeutet: alle Gewichte von 100 (Thin) bis 900 (Black) stecken in einer einzigen Datei.
Im Kontext der digitalen Barrierefreiheit zählt Inter zu den relevantesten Schriftarten überhaupt. Große Organisationen wie NASA, Mozilla, GitLab, ISO, Notion und Pixar setzen Inter in ihren Benutzeroberflächen ein. GNOME nutzt eine angepasste Variante namens Adwaita Sans, elementary OS verwendet Inter direkt als System Schrift. Der Grund ist immer derselbe: Inter wurde von Grund auf für die Anforderungen moderner Screen UIs entworfen, nicht für den Druck.
Wir sind hier, um Ihnen zu helfen. Gemeinsam meistern wir Ihre digitalen Herausforderungen und fördern die Inklusion im Internet. Lassen Sie uns Ihre Projekte mit barrierefreiem Webdesign erfolgreich machen.
Eine Schriftart ist dann barrierefrei, wenn sie Menschen mit unterschiedlichen Sehgewohnheiten und kognitiven Voraussetzungen zuverlässig lesbar bleibt. Die Web Content Accessibility Guidelines (WCAG) geben dafür keinen konkreten Schriftnamen vor, sondern Prinzipien: hinreichender Kontrast, klare Zeichenformen, Skalierbarkeit ohne Layoutbruch und ausreichend Weißraum zwischen Buchstaben und Zeilen. Inter erfüllt diese Anforderungen durch bewusste Designentscheidungen.
Die Accessibility Stärken von Inter im Überblick:
Für die Auswahl einer barrierefreien Schriftart bedeutet das konkret: Inter ist zwar nicht als Dyslexie Font wie OpenDyslexic konzipiert, bringt aber durch ihre UI Optimierung viele der gleichen Vorteile mit. Studien zur Typografie bei Dyslexie zeigen, dass serifenlose Schriften mit großzügiger Buchstaben und Wortabständen generell gut lesbar sind. Inter erfüllt beides.
Der entscheidende technische Vorteil von Inter liegt im Variable Font Format. Klassisch lädt eine Website pro Schriftgewicht eine eigene Datei: Regular, Medium, Bold, Black. Vier Gewichte bedeuten vier HTTP Requests, vier Cache Einträge und mehrere hundert Kilobyte Traffic. Bei Inter steckt die gesamte Gewichtsachse von Thin 100 bis Black 900 in einer einzigen WOFF2 Datei. Das spart Ladezeit, reduziert Cumulative Layout Shift (CLS) und kommt damit auch Core Web Vitals zugute.
Die Installation ist in modernen Frontend Projekten trivial. Über das NPM Paket @fontsource-variable/inter lässt sich Inter als selbst gehostete Variable Font in wenigen Zeilen einbinden, ohne externe CDN Abhängigkeit und damit ohne DSGVO Risiko durch Google Fonts. Das Paket ist Teil des Fontsource Projekts, das OFL Schriften als NPM Module verteilt.
npm install @fontsource-variable/inter
Nach der Installation reicht ein Import in der zentralen CSS oder JavaScript Datei der Anwendung. Das Paket liefert die WOFF2 Datei und die benötigte @font-face Deklaration. In einer Astro, Next.js, Vue oder React Anwendung funktioniert der Import identisch.
/* global.css */
@import '@fontsource-variable/inter';
:root {
--font-sans: 'Inter Variable', system-ui, sans-serif;
}
body {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
font-feature-settings: 'cv11', 'ss01', 'ss03';
}
Die font-feature-settings aktivieren OpenType Features: cv11 sorgt für eine Single Story a, ss01 für alternative Zeichen Varianten und ss03 für gerade Anführungszeichen. Welche Features sinnvoll sind, hängt vom Einsatzzweck ab. Für Accessibility kritische Anwendungen empfiehlt sich die klassische Default Variante ohne Stylistic Sets, da diese am breitesten getestet ist.
Inter gilt bei vielen Entwicklern als die Schriftart, die bei Vercel und GitHub im Einsatz ist. Die Wahrheit ist differenzierter und lohnt sich zu kennen, gerade wenn Design Entscheidungen auf der Behauptung fußen, bestimmte Tech Konzerne würden genau diese Schrift nutzen.
Die ehrliche Einordnung:
vercel/geist-font) nennt aber Inter explizit als Inspirationsquelle neben Univers, SF Mono und SF Pro. Vercel selbst bestätigt, dass Inter als Vorbild diente.next/font/google Integration. Wer dem Next.js Getting Started folgt, landet automatisch bei Inter.Die praktische Konsequenz: Wer moderne Web App Ästhetik erreichen will, die Developer wiedererkennen, liegt mit Inter richtig. Die Schrift ist für viele Frontend Entwickler der visuelle Default für saubere, minimalistische UIs. Und weil sie unter OFL steht, gibt es keine Lizenzprobleme bei kommerzieller Nutzung.
Eine schöne Schriftart allein schafft keine Barrierefreiheit. Inter muss in einem durchdachten Typografie System eingebettet sein, damit WCAG Erfolgskriterien erfüllt werden. Die wichtigsten Hebel sind Schriftgröße, Zeilenhöhe, Buchstabenabstände und Kontrast.
Accessibility Checkliste für Inter Typografie:
rem statt px erlauben Nutzern, die Schriftgröße im Browser anzupassen.
/* Barrierefreies Typografie Setup mit Inter */
body {
font-family: 'Inter Variable', system-ui, sans-serif;
font-size: 1rem; /* 16px Default */
line-height: 1.6; /* WCAG 1.4.12 konform */
letter-spacing: 0.01em; /* Leichte Verbreiterung */
color: #1a1a1a; /* Kontrast 16:1 auf Weiß */
background: #ffffff;
}
h1, h2, h3 {
font-weight: 600; /* Variable Font, fein steuerbar */
line-height: 1.3; /* Headlines enger als Body */
}
p {
max-width: 70ch; /* Optimale Zeilenlänge */
}
Screen-based user interfaces are the new norm and Inter is designed to be the best possible utilitarian solution for this modern medium, much in the same way 60 years ago Helvetica was designed for physical medium.
Im Developer Umfeld haben sich 2026 drei große Open Source UI Schriften etabliert, die alle für Accessibility taugen. Die Unterschiede sind subtil, aber relevant, wenn eine Brand oder ein Produkt eine konkrete visuelle Identität aufbauen will.
Inter (2016, Rasmus Andersson): Der Allrounder und Community Liebling. Höchste Verbreitung, ausgereifteste OpenType Features, gut dokumentiert und breit getestet. Wird von NASA, Mozilla, GitLab, Notion und Figma eingesetzt. Für Projekte, die nicht wie Vercel oder GitHub aussehen wollen, sondern eigenständig und neutral wirken, die pragmatischste Wahl.
Geist (2024, Vercel und Basement Studio): Jüngere, geometrischere Schrift mit eigenem Charakter. Von Vercel für Marketing und Produktkommunikation entwickelt, inspiriert von Inter und SF Pro. Passt zu Produkten, die bewusst ein technisches, minimalistisches und leicht Vercel nahes Branding anstreben. Nachteil: weniger OpenType Features als Inter, kürzere Produktionsgeschichte.
Mona Sans (2022, GitHub mit Degarism): Variable Schrift mit drei Achsen (Gewicht, Breite, Neigung) und industrieller Grotesk Ästhetik. GitHub nutzt sie auf Marketing Seiten und für GitHub Universe. Für Projekte mit markanter, etwas charakterstärkerer Bildsprache eine interessante Alternative. Hubot Sans ergänzt sie als zweite Brand Schrift für Headlines.
Konkrete Empfehlung:
Alle drei stehen unter SIL Open Font License und sind DSGVO konform selbst hostbar.
Finde das passende Angebot für dein Projekt
Anfrage-Konfiguration
Eliminierung technischer Schulden mit PHPStan, Rector PHP und PHPUnit. Über 20 Jahre Praxiserfahrung in skalierbaren Backends.
Gesetzliche Konformität & Inklusion. Optimierung von Performance und Conversion durch radikal nutzerzentriertes, universelles Design.
Skalierbare KI-Systeme mit echtem Code Ownership. CI/CD, Backup-Strategien und Infrastruktur, die mit deinem Team wächst.
Anfrage-Konfiguration
Wähle die Expertise, die dein Projekt jetzt am dringendsten benötigt.
Bei Never Code Alone haben wir Inter in über einem Dutzend Accessibility Audits und Relaunches als Hausschrift oder empfohlene Alternative eingesetzt. Die Erfahrung nach drei Jahren Produktivbetrieb ist deutlich: Inter liefert konstant gute Audit Ergebnisse bei WAVE, axe DevTools und Silktide, ohne dass wir über Dyslexie spezifische Sonderfonts diskutieren müssen. Die Schrift ist pragmatisch, performant und rechtssicher.
In der Praxis setzen wir Inter immer selbst gehostet über Fontsource ein, nie über Google Fonts. Das ist für uns und unsere Kunden ein nicht verhandelbarer DSGVO Baustein: Google Fonts überträgt die IP des Besuchers bei jedem Seitenaufruf an Google LLC. Selbst gehostete WOFF2 Dateien eliminieren dieses Risiko vollständig. Der technische Aufwand für die Umstellung ist minimal, der rechtliche Gewinn maximal.
Typische Einsatzszenarien aus unserer Praxis: Behördenportale nach BFSG Anforderung, Kundenportale im Finanzsektor mit erhöhten Lesbarkeitsansprüchen und SaaS Dashboards, in denen Datenmengen klar strukturiert dargestellt werden müssen. In allen drei Kontexten spielt Inter die Kombination aus hoher x Höhe, Tabular Numbers und klar differenzierten Zeichen voll aus.
Wer ein Projekt nach WCAG 2.2 oder BFSG umsetzt, sich aber unsicher ist, ob Inter die richtige Wahl ist oder ob eine spezialisierte Dyslexie Schrift wie OpenDyslexic zusätzlich als Nutzer Präferenz angeboten werden sollte, dem bieten wir ein kostenloses Erstgespräch zum Accessibility Audit an. Roland und das NCA Team prüfen die konkrete Zielgruppe, die Content Typen und die technische Umgebung und geben eine pragmatische Empfehlung ohne Schriftart Religionskrieg. Kontakt direkt an roland@nevercodealone.de oder telefonisch unter +49 176 24747727.
Antworten auf die wichtigsten Fragen zu Inter, Variable Fonts, Accessibility und der praktischen Einbindung in moderne Webprojekte.
Inter ist eine frei verfügbare Open Source Sans Serif Schriftart, die 2016 von Rasmus Andersson bei Figma entwickelt und 2017 veröffentlicht wurde. Sie ist speziell für Bildschirm UIs konzipiert, unterstützt 140 Sprachen und gilt 2026 als meistgenutzte UI Schrift auf Fontsource und Google Fonts.
Inter erfüllt alle relevanten WCAG 2.2 Typografie Anforderungen durch hohe x Höhe, klar unterscheidbare Zeichen, offene Aperturen und Variable Font Technologie. Die Schrift selbst ist konform, entscheidend bleibt die korrekte Umsetzung mit mindestens 16 Pixel Basisgröße, Line Height 1.5 und ausreichendem Farbkontrast.
Nein, nicht direkt. Vercel nutzt Geist als Hausschrift, GitHub nutzt Mona Sans. Beide nennen Inter allerdings als Inspirationsquelle. In Next.js Dokumentation und Beispielen dominiert Inter, und auf GitHub gehosteten Projekten ist Inter die am häufigsten eingebundene UI Schrift.
Inter steht unter der SIL Open Font License Version 1.1 (OFL). Damit ist sie frei für kommerzielle und private Nutzung, Einbettung in Websites, Apps und Betriebssysteme, sowie Modifikation erlaubt. Einzige Einschränkung: Inter darf nicht als Softwareprodukt selbst verkauft werden.
Am einfachsten über das NPM Paket @fontsource-variable/inter. Nach der Installation reicht ein @import in der CSS Datei. Die gesamte Gewichtsachse von 100 bis 900 steckt in einer einzigen WOFF2 Datei, die selbst gehostet ausgeliefert wird und damit DSGVO konform ist.
Inter ist keine dedizierte Dyslexie Schrift wie OpenDyslexic, bringt aber viele der gleichen Vorteile mit. Die klar unterscheidbaren Zeichen (I/l/1, 0/O), offene Aperturen und hohe x Höhe helfen bei Leseunterstützung. Für hochsensible Kontexte empfiehlt sich zusätzlich eine Nutzer Präferenz für OpenDyslexic.
Tabular Numbers sind Ziffern mit einheitlicher Breite. Das bedeutet: die 1 ist genauso breit wie die 8. In Tabellen, Dashboards und Finanzanwendungen richten sich damit Spalten sauber aus. Inter aktiviert Tabular Numbers über das OpenType Feature tnum via font-feature-settings: tnum.
Geist ist geometrischer und moderner, inspiriert von Swiss Design und von Vercel entwickelt. Inter wirkt klassischer und neutraler, ist umfangreicher getestet und breiter verbreitet. Geist passt zu tech nahen Marken, Inter zu Projekten mit neutralem oder professionellem Auftritt.
Mona Sans ist eine Grotesk mit industrieller Ästhetik und drei Variablen Achsen (Gewicht, Breite, Neigung). GitHub entwickelte sie für Marketing Persönlichkeit. Inter ist funktionaler und weniger charakterstark, dafür maximal neutral und universell einsetzbar.
Next.js bietet mit next/font/google eine direkte Integration. Alternativ empfiehlt sich @fontsource-variable/inter als selbst gehostete Variante, was DSGVO Probleme mit Google Fonts CDN vermeidet. Der Import geschieht in app/layout.tsx oder pages/_app.tsx als CSS Variable.
16 Pixel (1 rem) sind das absolute Minimum für Body Text nach WCAG 2.2 und Auditor Empfehlungen. Kleinere Schriftgrade nur für unterstützende Labels oder Metadaten, nie für Hauptinhalt. Inter bleibt auch bei 14 Pixel lesbar, unterschreitet aber damit Accessibility Best Practices.
Neben Inter eignen sich Open Sans, Atkinson Hyperlegible (speziell für Sehbehinderung), IBM Plex Sans, Public Sans und Mona Sans. Für dedizierte Dyslexie Unterstützung OpenDyslexic oder Lexie Readable. Wichtiger als die Schriftart bleibt die korrekte Implementierung mit WCAG konformer Größe, Zeilenhöhe und Kontrast.