Design Lab · Typografie · Screen Typeface

Inter

Die Schrift die für Pixel gebaut wurde. Kein Kompromiss — nur Präzision.

"I started Inter because I needed a font that worked well in user interfaces — something specifically tailored for computer screens, not adapted from print."

Rasmus Andersson · rsms.me/inter · 2017

01 · Überblick

Geschichte

Eine Schrift, die aus dem Alltag entstand — und den Alltag neu definierte.

Inter ist eine Schriftfamilie, die von Rasmus Andersson ab 2016 entwickelt wurde. Der erste öffentliche Release erschien 2017. Das Ziel war von Anfang an klar: eine Schrift für Computerbildschirme, optimiert für kleine Größen, hohe Auflösung und schnelle Lesbarkeit in User Interfaces.

Was als persönliches Werkzeug begann, wurde zum De-facto-Standard der digitalen Produktgestaltung. GitHub, Notion, Linear, Vercel, Figma — die Liste der Firmen, die Inter in ihren Design-Systemen einsetzen, ist lang. Kostenlos, Open Source, und unter der SIL Open Font License verfügbar.

Bewertung:

02 · Person

Rasmus Andersson

Schwedischer Designer und Ingenieur — bekannt als rsms. Inter ist sein bekanntestes Werk.

Rasmus Andersson ist ein schwedischer Designer und Software-Ingenieur, der unter dem Pseudonym rsms bekannt ist. Er arbeitete unter anderem bei Spotify und Figma. Inter entstand nicht als Auftragsarbeit, sondern als persönliches Open-Source-Projekt — ein Werkzeug, das er selbst täglich brauchte.

Sein Ansatz war ingenieursmäßig: Statt eine bestehende Schrift zu lizenzieren oder anzupassen, entwarf er Inter von Grund auf für die Anforderungen moderner Screen-Interfaces. Jede Entscheidung — x-Höhe, Buchstabenabstand, Öffnung der Bögen — wurde durch die Anforderungen des digitalen Mediums begründet.

Designer als Nutzer Wenn der Designer das Problem selbst täglich hat, entsteht etwas Anderes als eine Auftragsarbeit. Inter ist von innen heraus gebaut, nicht von außen gestaltet.
Bewertung:

03 · Entwicklung

Entstehung

2016 begonnen, 2017 veröffentlicht. Über 3.000 GitHub-Commits — eine lebende Schrift.

Inter begann als internes Werkzeug und wurde von Beginn an öffentlich auf GitHub entwickelt. Die Entwicklung war transparent: Jede Änderung an Glyphen, jede neue OpenType-Funktion, jede kerning-Tabelle ist in der Commit-History dokumentiert. Das Repository hat heute über 4.000 Commits.

Inter ist eine lebende Schrift: neue Glyphen kommen hinzu, Fehler werden korrigiert, neue Sprachen werden unterstützt. Dies unterscheidet sie von den meisten anderen Schriften — sie ist ein Open-Source-Projekt im engsten Sinne, nicht nur ein freigegebenes Produkt.

Bewertung:

04 · Kernmerkmal

Screen-Optimierung

Große x-Höhe. Offene Bögen. Eindeutige Buchstabenformen. Drei Prinzipien, die für Screens entschieden wurden.

✓ Inter — Screen-First

Große x-Höhe → mehr Lesbarkeit bei kleinen Größen.
Offene Bögen → klare Unterscheidung von a/o/c.
Eindeutiges I/l/1 → verhindert Verwechslungen.

✕ Print-Schriften adaptiert

Kleine x-Höhe → auf kleinem Screen schwer lesbar.
Geschlossene Bögen → c/e/o kaum unterscheidbar.
Ambivalente Formen → gestört bei px-Rendering.

Die große x-Höhe ist das wichtigste Merkmal: Der Abstand zwischen Baseline und Versalhöhe, der von den Kleinbuchstaben eingenommen wird, ist bei Inter bewusst groß. Das macht Kleinbuchstaben auf kleinen Screens besser unterscheidbar — und ist der wichtigste Einzelfaktor für Lesbarkeit in UIs.

Bewertung:

05 · Zeichen

Das Alphabet

Inter Regular und Bold im direkten Vergleich — der Unterschied in der Gewichtung.

Majuskeln · Regular 400

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Minuskeln · Regular 400

a b c d e f g h i j k l m n o p q r s t u v w x y z

Majuskeln · Bold 700

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Minuskeln · Bold 700

a b c d e f g h i j k l m n o p q r s t u v w x y z

Bewertung:

06 · Großbuchstaben

Versalien

Klare Formen, einheitliche Breiten — die Versalien von Inter sind für Überschriften und Labels optimiert.

A B C D E F G
H I J K L M N
O P Q R S T U
V W X Y Z

Die Versalien von Inter haben gleichmäßigere Breiten als historische Schriften. Das Verhältnis zwischen schmalen Buchstaben (I, J) und breiten (M, W) ist moderater als beispielsweise bei einer Garamond. Das erleichtert das Rendering auf Pixel-Grids und vermeidet optische Ungleichgewichte bei Großbuchstaben-Texten.

Bewertung:

07 · Kleinbuchstaben

Gemeine

Das einstöckige g. Das offene a. Das eindeutige l. Inter wählt Klarheit über Tradition.

a b c d e f g
h i j k l m n
o p q r s t u
v w x y z

Inter verwendet ein einstöckiges g — eine Entscheidung, die bewusst gegen die typografische Tradition verstößt, aber für digitale Kontexte sinnvoll ist. Das einstöckige g ist klarer, weniger komplex, und auf kleinen Screens besser erkennbar. Ähnlich gilt für das I/l-Problem: Inter verwendet ein I mit Serifen-Strichen oben und unten (sogenannte Serifs am I), um Verwechslungen mit l zu vermeiden.

Bewertung:

08 · Zahlen

Ziffern

Proportionale Ziffern für Fließtext — tabellarische Ziffern für Tabellen und Dashboards.

Proportional

0 1 2 3 4
5 6 7 8 9

Standard — unterschiedliche Breiten

Tabular

0 1 2 3 4
5 6 7 8 9

font-feature-settings: 'tnum' 1

Inter unterstützt sowohl proportionale als auch tabellarische Ziffern. Proportionale Ziffern sehen im Fließtext natürlicher aus — jede Ziffer nimmt die für sie passende Breite ein. Tabellarische Ziffern sind für Tabellen und Dashboards besser: Alle Ziffern nehmen exakt dieselbe Breite ein, sodass Zahlen in Spalten perfekt ausgerichtet sind.

Bewertung:

09 · Gewichtspalette

Schnittbreite

9 Gewichte von Thin (100) bis Black (900) — ein vollständiges System.

100 Thin Display onlyExtreme contrast
200 ExtraLight Hero / DisplayGroße Headlines
300 Light Langer FließtextEleganter Lauftext
400 Regular Standard BodyDefault für alles
500 Medium UI LabelsButtons, Tabs, Nav
600 SemiBold HervorhebungenInline emphasis
700 Bold ÜberschriftenH1–H3 im Fließtext
800 ExtraBold DisplayNur groß verwenden
900 Black Display onlyMaximaler Druck
Bewertung:

10 · Variable Font

Variable Font

Ein Dateiformat, alle Gewichte. CSS kann das Gewicht animieren, interpolieren, auf jeden Wert setzen.

Gewicht

Axis: font-weight 100 → 900

100
900
/* Variable Font — alle Gewichte in einer Datei */ @import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]'); .animated-heading { font-family: 'Inter', sans-serif; animation: weightcycle 4s ease-in-out infinite alternate; } @keyframes weightcycle { from { font-weight: 100; } to { font-weight: 900; } }

Als Variable Font lädt Inter nur eine einzige Datei — statt 9 separater Schriftdateien. Der Browser interpoliert zwischen den Gewichten in Echtzeit. Das spart Bandbreite, erlaubt CSS-Animationen über Gewichtsachsen, und macht Gewichte wie 450 oder 650 möglich, die keine eigenen Schnitte haben.

Bewertung:

11 · OpenType

OpenType Features

tnum, case, frac, sups, liga — Inter unterstützt umfangreiche OpenType-Funktionen für professionellen Schriftsatz.

Inter unterstützt eine breite Palette an OpenType-Features:

tnum — Tabellarische Ziffern (gleiche Breite), ideal für Tabellen.
case — Buchstaben für Großbuchstaben-Texte optimiert (Klammern, Bindestriche).
frac — Echte Brüche: ½ statt 1/2.
sups — Hochgestellte Ziffern für Fußnoten.
liga — Standard-Ligaturen (fi, fl, etc.).

Takeaway OpenType-Features sind in CSS aktivierbar: font-feature-settings: 'tnum' 1, 'case' 1. Sie machen den Unterschied zwischen professionellem und amateurhaftem Schriftsatz.
Bewertung:

12 · Zahlen in Tabellen

Tabular Numerals

Die wichtigste Funktion für Dashboards und Datentabellen — alle Ziffern exakt gleich breit.

Proportional

1
11
111
1.111
11.111

Tabular

1
11
111
1.111
11.111

Im proportionalen Modus ist die Ziffer 1 schmaler als 8. Das führt dazu, dass Zahlen in Spalten nicht untereinander ausgerichtet sind. Im tabellarischen Modus nehmen alle Ziffern exakt dieselbe Breite ein — und Zahlen richten sich perfekt aus, ohne Manipulation durch Leerzeichen.

Bewertung:

13 · Gewichtshierarchie

Tonal Weights

Gewichtsunterschiede als Tonalität — wie in der Musik gibt es Lautstärken, die Hierarchie erzeugen.

Primäre Überschrift
Sekundäre Überschrift
Fließtext, Standard Body-Größe, maximale Lesbarkeit im Mengensatz.
Caption, Metadaten, Sekundärinformation

Ein gutes Design-System mit Inter nutzt Gewicht als Hierarchiesignal: Wichtigeres ist schwerer, weniger Wichtiges leichter. Dieser visuelle Ton-Ansatz funktioniert weil Inter über 9 klar unterscheidbare Gewichte verfügt, die alle dieselbe Grundform teilen — die Harmonie bleibt trotz Kontrast.

Bewertung:

14 · Leseprobe

Fließtext

Inter war für UIs gemacht — aber es liest sich auch im Fließtext.

Inter wurde für Computerbildschirme entworfen — nicht für Bücher, nicht für Zeitungen, nicht für Plakate. Und genau das ist die Ehrlichkeit dieser Schrift: Sie weiß was sie ist, und sie ist es ohne Entschuldigung.

Dabei überrascht Inter im Fließtext: Die große x-Höhe, die für UI-Labels gemacht wurde, macht auch längere Texte angenehm lesbar. Wer ein Interface baut, in dem auch Fließtext vorkommt — Dokumentationen, Einstellungsseiten, Onboarding-Texte — der muss die Schrift nicht wechseln. Inter hält durch.

Das ist der Unterschied zu einer spezialisierten Display-Schrift oder einem reinen UI-Font ohne Fließtext-Qualitäten. Inter ist breit genug für beides — ohne in beiden Disziplinen das Beste zu sein.

Bewertung:

15 · UI-Kontext

UI-Anwendung

Labels, Buttons, Inputs, Tabellen — Inter bei 10–14px in realen Interface-Kontexten.

Formular · 11–13px

E-Mail-Adresse

[email protected]

Status

Aktiv Review Archiv

Inter wurde für genau diesen Kontext entwickelt. Labels bei 11px sind noch klar lesbar. Buttons bei 13–14px haben die richtige Dichte für Touch-Targets. Tabellenzeilen bei 12px bleiben übersichtlich. Das ist kein Zufall — sondern das Ergebnis von Designentscheidungen, die speziell für Screen-UIs getroffen wurden.

Bewertung:

16 · Display

Display-Einsatz

Bei großen Größen entfaltet Inter seinen ganzen Kontrast. Thin und Black als Gegenpole.

Thin — Display
Black — Display
40px Thin
40px Black
Bewertung:

17 · Kombinationen

Paarungen

Inter allein — oder im Kontrast mit einer Serifenschrift für Überschriften.

Inter allein Empfehlung

System-Interface

Konsistenz im ganzen Interface. Eine Schrift, alle Gewichte — kein mentales Springen zwischen Schriftarten.

Inter + Serif Überschrift

Editorial-Interface

Serif-Überschrift für editoriale Würde, Inter für UI-Elemente und Fließtext. Hoher Kontrast.

Inter + Mono für Code

Developer Tools

Inter für Labels und Beschreibungen, SF Mono / Fira Code für Code-Blöcke. Standard in IDEs.

Bewertung:

18 · Dynamisch

Dynamic Type

Inter skaliert — von 10px Tooltip bis 120px Hero-Headline. Eine Schrift für den ganzen Größenbereich.

10px Dashboard · Tooltips · Status-Indikatoren · Timestamps · Metadaten
12px Captions · Footnotes · UI-Beschriftungen · System-Interface-Komponenten
14px Mobile Body · Kompakter Fließtext · Sidebar-Inhalte · Formulare
16px Standard Desktop-Fließtext · Artikel-Inhalt · Haupttextbereiche
24px Überschrift Dritte Ebene
40px Hero-Überschrift
Bewertung:

19 · Skalierung

Responsive

Inter funktioniert auf jedem Device — vom 10px Smartphone-Label bis zur 4K-Display-Headline.

Inter wurde von Anfang an für unterschiedliche Pixeldichten entworfen. Auf Retina-Displays (2x) zeigen sich die feinen Haarstriche und Kurven in voller Qualität. Auf normalen Displays (1x) bleibt die Lesbarkeit durch die hohe x-Höhe und die offenen Formen erhalten.

Das font-feature-settings-System erlaubt kontextabhängige Anpassungen: tabellarische Ziffern in Datentabellen, case-sensitive Zeichen in Überschriften aus Großbuchstaben, echte Brüche in technischen Texten — ohne die Schrift zu wechseln.

Takeaway Inter ist die zuverlässigste Wahl für Interfaces, die auf vielen Devices laufen. Kein System-Font-Fallback nötig — Inter läuft überall gleich.
Bewertung:

20 · Ressourcen

Bezug

Open Source, kostenlos, auf Google Fonts und direkt verfügbar.

Bewertung: