Ein Konto-Dashboard zeigt die richtigen Werte und wirkt trotzdem unruhig: Bei jeder Aktualisierung rutscht die Zahlenzeile seitlich, die Summen stehen krumm, eine Jahreszahl im Satz ragt wie ein Ausrufezeichen heraus. Die Entwicklerin Carmen Ansio führt das nicht auf das Layout zurück, sondern auf die Ziffern, die eine Schrift ohne Nachfrage ausliefert. Vier CSS-Eigenschaften holen die passenden aus derselben Font-Datei, ganz ohne JavaScript.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Das Wichtigste in Kürze
- Standardziffern sind für Überschriften gebaut: unterschiedlich breit, alle gleich hoch. In Tabellen und Live-Werten wirkt das krumm.
- tabular-nums gibt jeder Ziffer dieselbe Breite, Spalten stehen bündig und laufende Werte springen nicht mehr.
- oldstyle-nums setzt Ziffern in den Fließtext, diagonal-fractions macht aus 1/2 einen echten Bruch.
- Viele Google-Fonts-Varianten liefern diese Zeichen nicht mit. Ein selbst gehosteter Font bringt sie zurück.
Warum springen Zahlen und stehen Spalten krumm?
Standardziffern sind proportional gesetzt: Eine 1 braucht weniger Platz als eine 0, so wie ein i schmaler ist als ein m. In einem Satz stimmt das, in einer Tabelle nicht. Krumme Kanten entstehen, weil die Spalten sich an unterschiedlich breiten Ziffern ausrichten, und ein Live-Wert zuckt bei jedem Tick zur Seite, sobald neue Ziffern eine andere Breite haben.
Die Eigenschaft tabular-nums weist jeder Ziffer dieselbe feste Breite zu, ohne die Formen zu verändern. Eine Zeile CSS genügt für jede Zahl in einer Tabelle, einer Kennzahl-Kachel oder einem Zähler: Die Spalte rastet in eine saubere Kante ein, der aktualisierende Wert steht still. Denselben Effekt gleichen Typografen bei der optischen Ausrichtung von Elementen sonst von Hand aus.
Tabellenziffern kosten eine einzige Zeile CSS und entscheiden trotzdem, ob eine Zahlenkolonne seriös wirkt oder kaputt. Bei jedem Produkt, das Geld anzeigt, gehört die Ziffer gestaltet, nicht nur das Layout.
— Markus Seyfferth, Chefredakteur Dr. Web
Welche Ziffern gehören in den Fließtext?
In laufenden Text und kleine Labels gehören Mediävalziffern. Die Standardziffern stehen alle auf Versalhöhe und schreien im Satz wie eingestreute Großbuchstaben. Die Eigenschaft oldstyle-nums gibt ihnen Ober- und Unterlängen wie Kleinbuchstaben, sodass eine Jahreszahl sich in die Zeile legt, statt herauszuragen.
Zwei weitere Schalter runden das ab. Echte Brüche entstehen mit diagonal-fractions, das ein getipptes 1/2 in ein sauberes Bruchzeichen verwandelt, und small-caps setzt Einheiten und Kürzel als echte Kapitälchen. Alle vier Werte stecken laut Ansio längst in guten Schriften; als Nachschlagewerk für solche Feinheiten dient daneben eine Übersicht der CSS-Einheiten.
Alle vier Werte stecken bereits in guten Schriften und lassen sich einzeln über CSS aufrufen, ganz ohne JavaScript.
tabular-numsBündige Spalten
Jede Ziffer bekommt dieselbe feste Breite. Tabellen richten sich sauber aus, laufende Werte springen nicht mehr zur Seite.
oldstyle-numsRuhe im Fließtext
Ziffern mit Ober- und Unterlängen legen sich in die Zeile, statt wie Großbuchstaben herauszuragen.
diagonal-fractionsEchte Brüche
Aus getipptem 1/2 wird ein einzelnes Bruchzeichen statt einer Divisionsrechnung auf der Grundlinie.
small-capsSaubere Kapitälchen
Einheiten und Kürzel erscheinen als echte Kapitälchen mit passender Strichstärke statt gestauchter Versalien.
Was verschweigen Google Fonts, und was heißt das für DACH-Teams?
Der häufigste Grund, warum nichts passiert: Die Zeichen fehlen in der Datei. Variable Builds vieler Google-Fonts-Varianten sparen Mediävalziffern, Brüche und Kapitälchen weg, um Bytes zu sparen; der Schalter greift dann ins Leere, obwohl die Syntax stimmt. Ansio empfiehlt, die vollständige Schrift selbst zu hosten, so wie es ihr Beitrag mit einer Source Serif vormacht.
Für Teams in DACH trifft sich das mit einer Pflicht, die ohnehin gilt. Seit dem Münchner Google-Fonts-Urteil binden viele Betreiber ihre Schriften aus DSGVO-Gründen lokal ein, und genau dieser selbst gehostete Font bringt die Ziffern-Features zurück. Datenschutz und Typografie ziehen hier am selben Strang: Eine sauber optimierte und lokal ausgelieferte Webschrift bringt korrekte Zahlen gratis mit.
Der Einstieg kostet fast nichts: tabular-nums auf jede Tabelle, Kennzahl und jeden Zähler, oldstyle-nums auf Fließtext und kleine Labels, Brüche und Kapitälchen gezielt dort, wo sie vorkommen. Ein Blick in den Font verrät vorab, ob die Zeichen mitkommen.[1]
Quelle
[1] Carmen Ansio: „Why your numbers look wrong“
Mehr Newshunger?
- Optische statt mathematische Ausrichtung: Warum das Auge recht behält
- CSS Units: Ein Nachschlagewerk misst alle 63 CSS-Einheiten live im Browser
- Neurath X: Eine geometrische Schriftfamilie samt Monospace aus Berlin
- CUBE Type erzeugt isometrische Würfelschrift direkt im Browser
- Design-Werkzeuge am Format-Limit: Was der Farbverlauf über ihren Stillstand verrät
