modularscale

Was ist modularscale?

Modularscale berechnet proportionale Zahlenreihen aus einem Basiswert und einem mathematischen Verhältnis. Das Ergebnis ist eine Skala, aus der sich konsistente Schriftgrößen, Abstände und Layout-Proportionen ableiten lassen. Als Verhältnis stehen klassische Optionen wie der goldene Schnitt zur Verfügung, aber auch andere musikalische und geometrische Intervalle. Der Web-Calculator visualisiert die entstehenden Werte sofort, sodass sich verschiedene Verhältnisse schnell vergleichen lassen.

Kernfunktionen

• Web-Calculator: Gibt den Basiswert und das Verhältnis ein, die Skala erscheint direkt im Browser mit allen abgeleiteten Stufen.
• Sass-Plugin: Bindet die Skala direkt in den Build-Prozess ein. Schriftgrößen und Spacing-Werte lassen sich als Sass-Funktionen referenzieren, ohne Zahlen manuell zu verwalten.
• JavaScript-Plugin: Ermöglicht den Zugriff auf Skalenwerte im Frontend-Code oder in Build-Tools außerhalb von Sass-Workflows.
• Multi-stranded Scales: Mehrere Basiswerte oder Verhältnisse lassen sich kombinieren, um dichtere oder differenziertere Skalen zu erzeugen.

Für wen eignet sich modularscale?

Frontend-Entwickler und Web-Designer, die ein Typografie-System aufbauen und dabei auf willkürliche Einzelentscheidungen verzichten wollen. Wer ein Design-System von Grund auf aufbaut, profitiert davon, alle Schriftgrößen und Abstände aus einer einzigen Quelle abzuleiten. Das Sass-Plugin passt gut in bestehende CSS-Preprocessor-Setups, das JavaScript-Plugin in JS-first-Workflows.

Wer dagegen keine Vorkenntnisse in Typografie-Theorie mitbringt, braucht Zeit zum Einarbeiten. Das Tool gibt keine Empfehlung, welches Verhältnis für welchen Anwendungsfall passt. Das muss man selbst beurteilen. Auch das Plugin-Setup setzt voraus, dass Sass oder ein entsprechender JS-Build-Prozess bereits konfiguriert ist.

Einordnung & Alternativen

Modularscale gehört in die Kategorie der CSS- und Design-Utilities, die beim Aufbau von Token-basierten Systemen helfen. Es löst ein spezifisches Problem: Zahlen in Typografie und Spacing mathematisch zu begründen statt zu raten. Vergleichbare Ansätze finden sich in größeren Design-System-Frameworks wie Tailwind CSS, das eigene Spacing- und Schriftgrößen-Skalen mitbringt. Dort ist die Skala aber fix vorgegeben. Modularscale gibt das Verhältnis in die eigene Hand. Wer ein bestehendes Framework nutzt und dessen Skala akzeptiert, braucht es nicht. Wer eine eigene Skala definieren will, findet hier das direkteste Werkzeug dafür.