NCA Social Media
Aktualisiert:
Autor:
Roland Golla
Inter Web Font als 3D Aa Skulptur mit Lupe zeigt Typografie für Barrierefreiheit

Was ist die Inter Schriftart?

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.

CYPRESS.IO Ambassador und IT Consultant für QA Engenieering und Qualität in PHP Projekten.

Erreichen Sie unsere Spezialisten zu barrierefreien Webdesign

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.

Warum Inter barrierefrei ist: Lesbarkeit nach WCAG Prinzipien

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:

  • Hohe x Höhe: Die Kleinbuchstaben sind im Verhältnis zur Versalhöhe überdurchschnittlich groß. Das hilft Menschen mit geringer Sehkraft und verbessert die Lesbarkeit in kleinen Schriftgraden, wie sie in Webformularen und Dashboards vorkommen.
  • Klar unterscheidbare Zeichen: Die Ziffer 0 und der Buchstabe O, das kleine l, das große I und die Ziffer 1 sind in Inter eindeutig unterscheidbar. Für Menschen mit Dyslexie oder eingeschränktem Sehvermögen ein entscheidender Faktor.
  • Offene Aperturen: Buchstaben wie c, e und s haben offen gestaltete Formen. Das verhindert, dass sie bei kleiner Darstellung optisch zu O oder anderen geschlossenen Zeichen verschmelzen.
  • Tabular Numbers: Ziffern mit gleicher Breite sorgen in Tabellen und Datenvisualisierungen für saubere Ausrichtung. Screenreader Nutzer und sehende Nutzer profitieren gleichermaßen.
  • Optical Size Axis: Die Variable Font Technologie passt die Glyphen automatisch an die Schriftgröße an. Bei 10 Pixel sieht Inter anders aus als bei 24 Pixel, immer mit maximaler Lesbarkeit im Fokus.

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.

Variable Font Technologie: Eine Datei, alle Gewichte

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.

Code:
          

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.

Code:
          

/* 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 bei Vercel, GitHub und Co: Was stimmt wirklich?

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 selbst nutzt Geist, nicht Inter. Geist ist die 2024 vorgestellte, ebenfalls Open Source Hausschrift von Vercel. Das offizielle Geist Repository auf GitHub (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.js nutzt Inter als Default Beispiel. Das von Vercel entwickelte Framework Next.js zeigt Inter in fast allen offiziellen Dokumentationsbeispielen, inklusive der next/font/google Integration. Wer dem Next.js Getting Started folgt, landet automatisch bei Inter.
  • GitHub nutzt Mona Sans, nicht Inter. GitHub hat 2022 mit Mona Sans und Hubot Sans eigene Open Source Fonts veröffentlicht, die auf GitHub.com Marketing Seiten und im Produkt zum Einsatz kommen. Inter wird bei GitHub nicht als Hauptschrift genutzt.
  • Inter wird aber auf unzähligen GitHub Projekten genutzt. Weil Inter OFL lizenziert ist und Inter in Next.js Dokumentationen dominant auftaucht, ist die Schrift die meistgeteilte UI Schrift auf GitHub selbst. Millionen von Projekten haben Inter eingebunden.

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.

Inter in der Praxis: WCAG konforme Typografie umsetzen

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:

  • Mindest Schriftgröße 16 Pixel für Fließtext, ausdrücklich empfohlen von WCAG 2.2 und allen gängigen Accessibility Auditoren. Relative Einheiten wie rem statt px erlauben Nutzern, die Schriftgröße im Browser anzupassen.
  • Line Height zwischen 1.5 und 1.6 für Body Text. Das WCAG Erfolgskriterium 1.4.12 fordert explizit eine Zeilenhöhe von mindestens dem 1,5 fachen der Schriftgröße in Absätzen.
  • Letter Spacing 0.12em bis 0.16em bei kompaktem Text, wie empfohlen für verbesserte Lesbarkeit durch WCAG 1.4.12. Bei Inter funktioniert der Default gut, nur bei All Caps oder kleinen Schriftgraden sind Anpassungen nötig.
  • Maximale Zeilenlänge 45 bis 80 Zeichen. Längere Zeilen erschweren das Zurückfinden zum Zeilenanfang, besonders bei kognitiver Einschränkung oder Dyslexie.
  • Kontrast mindestens 4.5:1 für normalen Text, 3:1 für großen Text (ab 18pt oder 14pt bold). Mehr zu diesem Thema im Artikel Farbkontrast.
  • Nie Text als Bild. WCAG 1.4.5 fordert, dass Text als echter Text dargestellt wird, nicht als Bild. Inter als Webfont löst dieses Problem automatisch.
Code:
          

/* 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.

Rasmus Andersson, Designer von Inter, ehemals Figma und Spotify – rsms.me, Work on Inter

Inter, Geist oder Mona Sans: Welche Open Source UI Schrift passt?

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:

  • Für Standard Accessibility Projekte, Behörden Websites oder Kundenportale: Inter. Maximum Kompatibilität und neutrales Erscheinungsbild.
  • Für Tech nahe SaaS Produkte und Developer Tools: Geist, wenn ein moderner Look erwünscht ist.
  • Für Brand Marketing und Publishing: Mona Sans, wenn Persönlichkeit und Ausdruck wichtiger sind als reine Funktionalität.

Alle drei stehen unter SIL Open Font License und sind DSGVO konform selbst hostbar.

Lass uns sprechen

Finde das passende Angebot für dein Projekt

Anfrage-Konfiguration

Starten Sie Ihre Anfrage

Projektart
Infos
Nachricht

Eliminierung technischer Schulden mit PHPStan, Rector PHP und PHPUnit. Über 20 Jahre Praxiserfahrung in skalierbaren Backends.

CORE EXPERTISE

Gesetzliche Konformität & Inklusion. Optimierung von Performance und Conversion durch radikal nutzerzentriertes, universelles Design.

BFSG COMPLIANT

Skalierbare KI-Systeme mit echtem Code Ownership. CI/CD, Backup-Strategien und Infrastruktur, die mit deinem Team wächst.

ENTERPRISE READY

NCA Erfahrung: Warum wir Inter in Kundenprojekten empfehlen

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.

Häufige Fragen zur Inter Schriftart

Antworten auf die wichtigsten Fragen zu Inter, Variable Fonts, Accessibility und der praktischen Einbindung in moderne Webprojekte.

Was ist die Inter Schriftart 2026?

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.

Ist Inter WCAG konform 2026?

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.

Nutzen Vercel und GitHub wirklich Inter 2026?

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.

Welche Lizenz hat Inter 2026?

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.

Inter als Variable Font einbinden 2026?

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.

Ist Inter für Menschen mit Dyslexie geeignet?

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.

Was sind Tabular Numbers bei Inter?

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.

Was ist der Unterschied zwischen Inter und Geist?

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.

Was ist der Unterschied zwischen Inter und Mona Sans?

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.

Wie nutze ich Inter in Next.js?

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.

Welche Mindest Schriftgröße für Accessibility mit Inter?

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.

Welche Alternativen zu Inter gibt es für barrierefreies Webdesign?

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.