Zum Inhalt springen
skrabi.comProjekt starten ↗

Webentwicklung / Fachratgeber

Ratgeber: Wechselnde Zahlen mit geeigneten Ziffernformen ruhig anzeigen

In einem Zähler wechselt die Anzeige von 111 auf 888.

Startende Rakete als Symbol für die Kontrolle von Bewegung

Gleiche Stellenzahl kann unterschiedlich breit sein

In einem Zähler wechselt die Anzeige von 111 auf 888. Bei einer proportionalen Schrift können beide Werte unterschiedlich viel Platz beanspruchen. Die CSS-Eigenschaft font-variant-numeric bietet je nach Schrift verschiedene Ziffernformen, darunter tabellarische Ziffern. MDN beschreibt ihre Verwendung. Eine passende Darstellung kann das Lesen erleichtern; sie verändert weder den Zahlenwert noch seine fachliche Bedeutung.

Einen tatsächlichen Problemfall auswählen

Prüfe eine kleine Tabelle oder einen regelmäßig wechselnden Zähler auf deiner eigenen Seite. Vergleiche Werte mit unterschiedlicher Ziffernbreite sowie einen größeren Wert mit mehr Stellen. Tabellarische Ziffern helfen bei gleicher Stellenzahl, reservieren aber nicht automatisch Platz für beliebig lange Inhalte. Ein Betrag mit Einheit und eine reine Kennung sind außerdem unterschiedliche Angaben. Verwende nicht denselben Formatierungsweg, wenn führende Nullen einer Kennung erhalten bleiben müssen.

Die gewählte Schrift tatsächlich testen

Nicht jede Schrift stellt alle Varianten bereit. Kontrolliere deshalb die reale Darstellung mit der vorgesehenen Schrift und einer möglichen Ersatzschrift. Prüfe auf dem schmalen Bildschirm auch Dezimaltrennzeichen, Vorzeichen und Einheit. Eine feste Breite darf wichtige Werte nicht abschneiden. Falls ein langes Ergebnis nicht passt, braucht das Layout eine eigene Lösung. Eine schön ausgerichtete Zahl ohne verständliche Beschriftung bleibt inhaltlich unklar. Ergänze deshalb einen zugänglichen Namen beziehungsweise einen passenden Tabellenkopf.

Lesbarkeit und Datenrichtigkeit getrennt abnehmen

Vergleiche die sichtbaren Werte mit den tatsächlichen Daten. Eine CSS-Änderung darf keine Rundung oder Umrechnung vortäuschen. Teste zusätzlich einen unbekannten Wert, damit daraus nicht automatisch null wird. Dokumentiere Schrift, Varianten und Bildschirmbreite der Prüfung. Das Ziel ist eine ruhige, gut lesbare Darstellung der vorhandenen Werte. Die technische Eigenschaft garantiert weder eine universell bessere Schrift noch einen mathematisch richtigen Datenbestand. Erst der getrennte Vergleich von Darstellung und Inhalt belegt, dass beides für den geprüften Fall zusammenpasst.

Wähle für die Sichtprobe bewusst mehrere Ziffernfolgen mit unterschiedlicher Zeichenbreite. Erst im direkten Wechsel zeigt sich, ob die gewählte Schrift und Einstellung den gewünschten ruhigen Eindruck unterstützen. Der Inhalt muss unabhängig davon korrekt berechnet und ausreichend als Zahl oder Messwert beschriftet sein.

Quellen & Aktualität

Quellen geprüft am 2026-10-22. Herstellerangaben sind als solche eingeordnet. Produktdetails können sich nach diesem Stand ändern.