Schriftkombinationen für SaaS: Die Anforderungen an eine Produkt-Schriftart

Bevor über Geschmack diskutiert wird, lohnt sich eine statistische Auswertung. Wir haben die Ergebnisse für diese Suchanfrage erfasst, jede Seite mit auslesbaren Inhalten analysiert und gezählt, welche Familien jeweils empfohlen werden.

Die Konvergenz ist real, und sie als bloße Bequemlichkeit abzutun, würde den Kern verfehlen. Diese Schriften tauchen immer wieder auf, weil sie eine spezifische Liste von Anforderungen erfüllen, an denen die meisten anderen scheitern. Sobald man diese Liste kennt, werden sowohl die Konvergenz als auch die Alternativen offensichtlich.

Ratschläge zu Schriftkombinationen stammen überwiegend aus dem Editorial- und Brand-Design, wo eine Serif-Display-Schrift über einer Sans-Fließtext-Schrift der Klassiker ist. Produkt-Interfaces funktionieren anders. Der Großteil des Textes auf einem Produkt-Screen ist zwischen 12 und 16 Pixel groß: Labels, Tabellenzellen, Formular-Hinweise, Navigationspunkte, Empty States. Es gibt kaum „Display“-Elemente, dafür eine Menge an kleinem, dichtem, funktionalem Text.

Die Standardantwort lautet daher: eine Schriftfamilie in zwei Rollen (eine fettere, engere Einstellung für Überschriften, eine reguläre für den Fließtext), wobei der Unterschied durch Schriftschnitt, Größe und Zeichenabstand statt durch ein zweites Design erzeugt wird. Das ist kein Kompromiss. Es ist genau das, was ein dichtes Interface ruhig wirken lässt und eine ganze Klasse von fast identischen, aber nicht ganz passenden Kombinationen eliminiert.

1. Tabellarische Ziffern. Sobald eine Tabelle, eine Rechnung, eine Preisliste oder eine aktualisierende Metrik ins Spiel kommt, führen proportionale Ziffern dazu, dass Spalten springen und Zahlen ihre Breite ändern, wenn sich ihr Wert ändert. Eine Schrift ohne tabellarische Ziffern oder ein UI, in dem diese nie aktiviert werden, erzeugt jene unruhigen Dashboards, die jeder kennt, aber niemand benennen kann.
2. Echte Trennung zwischen benachbarten Schriftschnitten. Die Produkthierarchie bewegt sich bei kleinen Größen meist zwischen 400 und 600. Wenn 400 und 500 bei 14px nahezu identisch aussehen, wirken alle Labels gleich stark und die Hierarchie verschwindet schleichend. Prüfen Sie dies in Ihrer tatsächlichen Fließtextgröße, nicht bei 48px, wo jede Familie gut aussieht.
3. Eine große x-Höhe. Kleiner Text macht den Großteil eines Produkts aus. Schriften mit großzügiger x-Höhe und offenen Aperturen bleiben bei 12 bis 13px lesbar; elegante Schriften mit kleiner x-Höhe verschwimmen, was oft durch eine Erhöhung der Schriftgröße kompensiert wird, was wiederum die Informationsdichte zerstört.
4. Eindeutige Zeichen. 1, l und I; 0 und O; rn und m. Produkte zeigen IDs, API-Keys, Fehlercodes und Benutzernamen. Eine Schrift, bei der diese Zeichen verschmelzen, führt zu mehr Support-Tickets – und das ist in einem Lorem-Ipsum-Specimen nicht erkennbar.
5. Eine Lizenz, die Web-Apps abdeckt. Self-Hosting, App-Embedding und die erwartete Traffic-Stufe. Dies ist die Einschränkung, die meist zuletzt entdeckt wird und am meisten schmerzt, was ein wesentlicher Grund ist, warum Open-Licence-Google-Fonts jede Liste dominieren.

Diese fünf Punkte scheiden die meisten Schriftarten aus, weshalb immer wieder dieselben Namen auftauchen. Aber beachten Sie, was *nicht* auf der Liste steht: nichts über Stimmung, Ära oder Persönlichkeit. Die technischen Anforderungen reduzieren die Auswahl auf einige Dutzend Familien, nicht auf vier – und die verbleibende Entscheidung liegt tatsächlich bei Ihnen.

Wenn die Fließtextschrift aller Produkte eine neutrale Grotesk ist, kostet es nichts, sich hier anzupassen, und es bringt wenig, sich hier abzuheben. Der Nutzer betrachtet nicht die Tabellenzellen und bewundert die Schriftart. Zwei andere Hebel bewirken weit mehr:

• Eine Display-Rolle, die wirklich anders ist. Eine Condensed Sans, eine echte Serifenschrift oder eine markant geformte Grotesk, die nur für Seitentitel und Marketingflächen verwendet wird. Sie erscheint selten und definiert die Stimme des Produkts. Da sie keinen dichten Text transportiert, muss sie nicht alle fünf oben genannten Anforderungen erfüllen.
• Eine Monospace-Schrift, die bewusst gewählt statt geerbt wurde. Jedes Produkt, das Code, IDs, Zeitstempel oder Metriken anzeigt, hat ständig eine Mono-Schrift auf dem Bildschirm. Sie auf dem Browser-Standard zu belassen, ist eine sichtbar nicht getroffene Entscheidung; eine eigene zu wählen, ist ein kostengünstiger, distinktiver Schachzug, den kaum jemand kopiert.

Echte Pairings aus Shipping-Kits folgen genau diesem Muster: eine Condensed Sans über einem neutralen Fließtext; eine Serif-Display über einer geometrischen Sans; eine einzige Familie für beide Rollen, wenn das Produkt so dicht ist, dass eine zweite Schrift nur Rauschen erzeugen würde. Was keines dieser Kits tut: zwei ähnliche Grotesks kombinieren und hoffen, dass der Unterschied wahrgenommen wird.

Hier sind drei dieser Muster live gerendert, damit Sie die *Display-Rolle* direkt vergleichen können – der einzige Ort, an dem sich die Typografie eines Produkts sinnvoll unterscheidet. Betrachten Sie diese am unteren Ende der Skala (Captions) statt am oberen (Headings): Bei 48px sieht alles distinktiv aus.

Dies ist der Teil, den Listicles nie erreichen, und dort scheitert die meiste Produkt-Typografie tatsächlich. Eine perfekt gewählte Familie auf einer ad-hoc zusammengestellten Skala sieht schlechter aus als eine schlichte Familie auf einer konsistenten Skala.

Fixieren Sie vier Dinge und halten Sie diese schriftlich fest: eine Basisgröße, ein Verhältnis zwischen den Stufen, einen kleinen Satz an Zeilenhöhen und welche Schriftschnitte zulässig sind. Ein Verhältnis von etwa 1,2 bis 1,25 eignet sich für dichte Produkt-UIs: größere Verhältnisse ergeben schöne Marketingseiten, lassen aber nichts Nutzbares zwischen einer Sektionsüberschrift und einem Tabellen-Label. Die Zeilenhöhe sollte mit zunehmender Größe abnehmen, obwohl viele das Gegenteil erwarten. Und die Beschränkung der zulässigen Schnitte auf zwei oder drei verhindert, dass eine Codebase fünf verschiedene ansammelt.

Interfaces werden zunehmend aus schriftlichen Briefings generiert, und die Typografie ist der Punkt, an dem diese Briefings am dünnsten sind. Wir haben 299 öffentliche DESIGN.md-Dateien analysiert – das Dokument, das ein Coding-Agent liest, bevor er das UI schreibt. 83 % erwähnen Typografie überhaupt, was gut klingt, bis man sieht, was sie sagen: 44 % nennen keinen einzigen konkreten Größenwert, und 54 % enthalten mindestens ein nicht messbares Adjektiv, am häufigsten „clean“ oder „modern“.

„Die Typografie sollte raffiniert wirken“ ist keine Spezifikation. Es ist eine Absichtserklärung. Ein Agent erfüllt dies mit seiner medianen Vorstellung von „raffiniert“, was Inter bei 16px mit einer Zeilenhöhe von 1,5 ist – und genau das tut der Agent von jedem anderen auch. Eine benannte Familie, eine Basisgröße, ein Verhältnis und eine Liste zulässiger Schnitte ändern das Ergebnis in vier Zeilen.

1. 1

   Filterung nach den fünf Anforderungen

   Tabellarische Ziffern, Trennung der Schriftschnitte in Ihrer Fließtextgröße, x-Höhe, Zeichen-Eindeutigkeit, Lizenz. Das dauert zwanzig Minuten und sortiert den Großteil des Feldes aus, bevor der Geschmack eine Rolle spielt.

2. 2

   Test bei 13px in einer Tabelle

   Nicht in einem Specimen. Erstellen Sie eine echte Tabelle mit Zahlen, einer ID-Spalte und einem Mix aus 400er und 500er Schnitten. Fast jeder Fehler wird hier sichtbar und nirgendwo sonst.

3. 3

   Entscheiden Sie, ob Sie eine zweite Familie benötigen

   Wenn das Produkt dicht ist, wahrscheinlich nicht: investieren Sie die Mühe stattdessen in die Skalierung. Wenn Sie eine hinzufügen, wählen Sie eine Display-Schrift, die unmissverständlich anders ist.

4. 4

   Wählen Sie die Monospace-Schrift bewusst

   Wenn Code, IDs oder Zeitstempel in Ihrem UI erscheinen, ist diese Schrift ständig auf dem Bildschirm und meistens nur durch Zufall der Browser-Standard.

5. 5

   Die Skalierung schriftlich fixieren

   Basisgröße, Verhältnis, Zeilenhöhen, zulässige Schriftschnitte und die Regel für Ziffern. Im Repo, wo sowohl die nächste Person als auch der Agent es lesen werden.