Musikalische Intervalle in der Typografie: Was Noten in einer Skala tun

Noten unterteilen jedes Intervall einer Schriftgrößenskala in gleich große proportionale Schritte: Die Formel wird zu size = base × ratio^(i/notes), und jede Note multipliziert die vorherige Größe mit der notes-ten Wurzel des Verhältnisses. Auf einer Skala der reinen Quarte (Basis 16px, Verhältnis 1,333) fügen zwei Noten pro Intervall einen 18px-Schritt zwischen 16 und 21 ein — und weil die neue Größe eine Potenz derselben Konstante ist, liegt sie auf der Skala statt daneben.

Sowohl der Mechanismus als auch der Name sind aus der Musik entlehnt, und die Entlehnung ist ungewöhnlich ehrlich: Die Mathematik ist wirklich dieselbe. Dieser Artikel taucht tief in diesen Mechanismus ein — woher die Parallele kommt, was die Formel tut und wann es hilft, einer funktionierenden Skala Noten hinzuzufügen. Wenn du zuerst die Grundlagen brauchst, beginne mit unserem Leitfaden zur Schriftgrößenskala.

Woher kommt die musikalische Parallele?

Eine Oktave in der Musik ist ein Frequenzverhältnis von 2:1 — das A über dem Kammerton A schwingt doppelt so schnell. Die gleichstufige Stimmung, das Stimmungssystem, das die meisten westlichen Instrumente heute verwenden, teilt diese 2:1-Spanne in zwölf gleiche Schritte. Gleich in einem bestimmten Sinn: nicht gleich in Hertz, sondern gleich im Verhältnis. Jeder Halbton multipliziert die Frequenz mit der zwölften Wurzel aus 2 (etwa 1,0595), sodass zwölf Halbtöne zusammen genau 2 ergeben, und jedes Intervall im System — eine Quinte, eine Quarte, eine große Terz — ist eine ganze Zahl von Halbtönen: 2^(k/12).

Eine Schriftgrößenskala mit Noten führt dieselbe Operation an einer anderen Größe aus. Das Verhältnis der Skala spielt die Rolle der Oktave; die Noten spielen die der Halbtöne. Bei Verhältnis 1,333 und zwei Noten pro Intervall multipliziert jeder Schritt die Größe mit 1.333^(1/2) ≈ 1,155, und zwei Schritte ergeben zusammen genau 1,333. Das bedeutet eine musikalische Schriftgrößenskala im wörtlichen Sinn: Größen, die so verteilt sind, wie die gleichstufige Stimmung Tonhöhen verteilt.

Es lohnt sich, das Verhältnis genau zu benennen. Das ist eine echte mathematische Parallele — beide Systeme unterteilen ein Verhältnis geometrisch, und die Rechnung ist identisch — aber die Typografie hat die Idee entlehnt; sie hat kein Gesetz geerbt. Das Vokabular kam mit der Struktur mit (die „reine Quarte“ mit Verhältnis 1,333 ist nach dem 4:3-Intervall der Musik benannt), doch nichts an der Funktionsweise von Klang verpflichtet eine Webseite. Die Struktur verdient ihren Platz auf der Seite aus eigenen Gründen, die der Rest dieses Artikels durchgeht.

Was tut size = base × ratio^(i/notes) eigentlich?

Setze notes = 1, und die Formel fällt in die klassische modulare Skala zusammen, size = base × ratio^i: Jeder Schritt multipliziert mit dem vollen Verhältnis. Erhöhst du notes, wird jedes einzelne Intervall der modularen Skala in ebenso viele gleiche Teilschritte zerlegt. Die Konstante zwischen benachbarten Größen — der Schritt-Multiplikator — ist ratio^(1/notes):

Der Index i zählt Noten, nicht Intervalle. Bei zwei Noten reproduzieren die geraden Indizes exakt die Ein-Noten-Skala, und die ungeraden Indizes sind die Ergänzungen — Halbschritte zwischen den Größen, die du bereits hattest.

Wie sieht eine reine Quarte bei einer vs. zwei Noten aus?

Basis 16px, Verhältnis 1,333, Größen so gerundet, wie Scale Composer sie für die Anzeige rundet:

Bei einer Note ist das Problem sofort sichtbar: Es gibt nichts auf der Skala zwischen 16px und 21px — genau das Band, in dem Interfaces die meiste Präzision brauchen, denn Einleitungsabsätze, große Button-Labels und prominenter UI-Text wollen alle etwas um die 18px. Auch oben werden die Lücken größer (38 auf 51 ist ein Sprung von 13px), aber die fallen weniger ins Gewicht: Display-Größen erscheinen ein paar Mal pro Seite, fließtextnahe Größen Hunderte Male.

Bei zwei Noten gewinnt die Skala 18, 25, 33 und 44 — die Zwischengrößen, nach denen echte UIs immer wieder greifen — ohne einen einzigen willkürlichen Wert.

Öffne diesen Vergleich in Scale Composer, um dieselbe reine Quarte bei einer und zwei Noten nebeneinander zu sehen. Zieh am Verhältnis, und jede Größe in beiden Spalten berechnet sich aus denselben zwei Entscheidungen neu.

Warum bleiben Halbschritte im Verhältnis?

Weil jede Größe — ursprünglich oder ergänzt — eine Potenz derselben Konstante ist, stehen je zwei Größen auf der Skala im Verhältnis ratio^(k/notes) für irgendeine ganze Zahl von Noten k. Der 18px-Halbschritt liegt einen Halbschritt vom Fließtext entfernt und drei von 28px; hebst du ein Label um einen Schritt an, ist sein Verhältnis zu allem anderen immer noch ein Skalenintervall. (Die Größen sind für die Anzeige gerundet; die Verhältnisse gelten in den ungerundeten Werten, die die Skala berechnet.) Die Musik hat dieselbe Eigenschaft unter einem anderen Namen: Transposition. Verschiebe eine Melodie um eine beliebige Anzahl von Halbtönen, und ihre inneren Verhältnisse überleben, weil jedes Intervall der gleichstufigen Stimmung eine ganze Zahl derselben Einheit ist.

Es gibt auch einen wahrnehmungsbezogenen Grund, warum die Unterteilung geometrisch statt arithmetisch ist. Die Tonhöhenwahrnehmung ist nahezu logarithmisch — wir hören gleiche Frequenz-Verhältnisse als gleiche musikalische Abstände, weshalb die gleichstufige Stimmung die Oktave nach Verhältnis und nicht nach Hertz teilt. Das Beurteilen relativer Größe scheint ähnlich zu funktionieren: Ein Sprung von 16px auf 18px und ein Sprung von 33px auf 38px lesen sich als vergleichbare Schritte, weil beide ein Halbschritt sind — derselbe proportionale Sprung. Nach Verhältnis zu unterteilen fühlt sich deshalb über die ganze Leiter gleichmäßig an, während das Hinzufügen einer festen Pixelmenge (16, 18, 20, 22 …) sich zunehmend gedrängt anfühlt, je größer die Größen werden.

Wann helfen mehr Noten — und was kosten sie?

Der Wert zusätzlicher Noten konzentriert sich in dichten Produkten: Dashboards, Datentabellen, Einstellungsbildschirme — überall dort, wo viel Text innerhalb eines schmalen Größenbands unterschieden werden muss. Zwischen 12px und 24px bietet eine reine Quarte mit einer Note drei Größen; zwei Noten bieten fünf; vier Noten bieten etwa zehn. Textlastige Marketing- und Redaktionsseiten brauchen diese Dichte selten — ihre Hierarchie lebt in den großen Intervallen, nicht dazwischen.

Der Preis ist subtiler als der Nutzen: Jeder zusätzliche Schritt ist eine Größe, die jemand jetzt wählen kann, und mehr Auswahl lädt zu mehr Verwendung ein. Die Skala definiert, was verfügbar ist; deine Typo-Rollen entscheiden, was verwendet wird. Eine Vier-Noten-Skala, aus der sechs Rollen zugewiesen werden, ist ein Präzisionsinstrument; dieselbe Skala vollständig genutzt ist Handverlesen mit zusätzlicher Rechnerei. Und weil Scale Composer die Abstandsschritte aus derselben Skala ableitet, verdichten zusätzliche Noten auch die Abstandsoptionen — dort gilt dieselbe Disziplin.

Erlebe, wie sich vier Noten anfühlen

Der Kompromiss lässt sich leichter fühlen als nachlesen. Bei vier Noten pro Intervall sinkt der Schritt-Multiplikator auf etwa 1,075, und die Leiter vom Fließtext bis h1 wächst auf siebzehn Größen, viele davon kaum von ihren Nachbarn zu unterscheiden. Stell an jeden Schritt die einzige Frage, die zählt — welche Aufgabe würde diese Größe erledigen? — und lass die Schritte mit einer Antwort zu Rollen werden, während der Rest Reserve bleibt. Öffne dieselbe reine Quarte, supergesampelt mit vier Noten pro Intervall, und sieh, wie schnell du die Arbeiter von der Reserve unterscheiden kannst.