Typografie-Skala nach dem Goldenen Schnitt erstellen

Geben Sie eine Basisgröße ein, wählen Sie die Anzahl größerer und kleinerer Stufen und erhalten Sie eine deterministische Liste gerundeter Werte für Design-Tokens, Gestaltungsrichtlinien oder CSS. Anders als eine feste Überschriftenvorgabe lässt dieser Generator Sie die Tiefe der Skala bestimmen und verwendet zwischen benachbarten Einträgen den vollständigen Goldenen Schnitt. Sie können die vorgegebene Pixeleinheit beibehalten oder eine andere Einheit angeben, ohne die zugrunde liegende Berechnung zu verändern.

Bauen Sie die Skala auf einer sinnvollen Basis auf

Beginnen Sie mit der Größe, die das Leseerlebnis trägt, statt zuerst die größte Überschrift festzulegen. Auf einer Website ist die Basis meist die Größe des Fließtexts, in einer Präsentation der normale Folientext und in einem Drucksystem eventuell die Standardgröße für Absätze in Punkt. Der Generator behandelt diesen Wert als Stufe null. Jede positive Stufe multipliziert ihn mit Phi, ungefähr 1.61803399, jede negative Stufe dividiert ihn durch dasselbe Verhältnis. So entsteht in beiden Richtungen eine konsistente Folge, bei der jeder Eintrag mathematisch mit dem Ausgangspunkt verbunden bleibt. Mit steps_up bestimmen Sie die Anzahl größerer Werte; steps_down ergänzt Bildunterschriften, Hinweise oder untergeordnete Beschriftungen unterhalb der Basis. Beide Einstellungen sind begrenzt, damit das Ergebnis praktisch und übersichtlich bleibt. Eine Basis von sechzehn mit drei Stufen darüber erzeugt beispielsweise zunehmend kräftige Schaugrößen und behält sechzehn als exakte konzeptionelle Mitte. Das Einheitenfeld ist eine Beschriftung und kein Umrechner: Sechzehn Pixel und sechzehn Punkt ergeben dieselbe numerische Skala, bezeichnen jedoch unterschiedliche Einsatzbereiche. Dadurch wird nicht vorgetäuscht, dass physische und bildschirmbezogene Einheiten ohne Kontext ineinander umgerechnet werden können. Wählen Sie zunächst eine Größe, deren Lesbarkeit sich für Ihr Publikum bewährt hat, und erkunden Sie anschließend die Hierarchie rund um diesen Anker.

Lesen, runden und übernehmen Sie die erzeugten Werte

Die Antwort ordnet die Einträge von der größten angeforderten bis zur kleinsten Stufe, sodass Sie sie unmittelbar als typografische Hierarchie prüfen können. Jede Zeile enthält die vorzeichenbehaftete Stufe, den Zahlenwert, die formatierte Größe mit der gewählten Einheit und eine einfache Rolle: größer als die Basis, Basis oder kleiner als die Basis. Stufe null wird immer als Basis gekennzeichnet. Das Formelfeld dokumentiert die genaue Rechenregel und hilft dabei, die Herkunft von Design-Tokens festzuhalten oder ein erzeugtes Theme später zu überprüfen. Die Genauigkeit bestimmt die Zahl der Dezimalstellen. Drei Stellen eignen sich gut für CSS und die meisten digitalen Gestaltungswerkzeuge; ganze Zahlen können für eingeschränkte Oberflächen oder Druckvorgaben sinnvoll sein, die bewusst auf Bruchteile verzichten. Gerundet wird erst nach der Potenzberechnung, sodass sich in Zwischenstufen keine Rundungsfehler aufsummieren. Fallen zwei nahe kleine Werte bei geringer Genauigkeit zusammen, erhöhen Sie die Genauigkeit, statt einen Wert manuell zu ändern und damit das Verhältnis zu brechen. Verstehen Sie die Ausgabe als mathematisch konsistentes Ausgangssystem, nicht als Verpflichtung, jeden Wert zuzuweisen. Ein kompaktes Produkt nutzt vielleicht nur die Basis und zwei größere Einträge, während eine redaktionelle Website fast die gesamte Leiter verwenden kann. Übertragen Sie Zahlen in Tokens wie font_size_base oder font_size_display und bewahren Sie die Stufennummern in Kommentaren auf. So können spätere Verantwortliche das System zuverlässig neu erzeugen, statt die Herkunft einzelner Werte erraten zu müssen.

Verbinden Sie klassische Proportion mit typografischer Praxis

Der vollständige Goldene Schnitt erzeugt starke Kontraste und eignet sich deshalb besonders für expressive redaktionelle Layouts, Markensysteme, Plakate und Landingpages. In einer dichten Anwendung kann er jedoch zu viel Raum beanspruchen, wenn zahlreiche aufeinanderfolgende Ebenen Platz finden müssen. Verwenden Sie weniger Stufen, wenn das Verhältnis mehr Hierarchie erzeugt als die Oberfläche benötigt, und prüfen Sie die Größen mit der tatsächlichen Schrift. x-Höhe, Gewicht, Breite und optische Größen beeinflussen die wahrgenommene Skala. Responsive Layouts können an verschiedenen Breakpoints unterschiedliche Basisgrößen nutzen und dieselben Stufenzuordnungen beibehalten. Dadurch bleiben Ansichten verwandt, ohne einem Smartphone eine für den Desktop gedachte Schaugröße aufzuzwingen. Barrierefreiheit beginnt weiterhin mit gut lesbarem Fließtext, angenehmer Zeilenlänge, passendem Zeilenabstand und ausreichendem Kontrast; ein schönes Verhältnis gleicht weder eine zu kleine Basis noch eine ungeeignete Schrift aus. Das Werkzeug berechnet ausschließlich Schriftgrößen und erfindet keine Zeilenhöhe, Laufweite, Gewichte oder semantisches HTML. Diese Entscheidungen hängen von Sprache, Medium, Schrift und Inhaltsdichte ab. Für die Automatisierung senden Sie dieselben Eingaben für $0.002 je Anfrage an die API und speichern die zurückgegebene Skala zusammen mit Ihren Design-Tokens. Da die Berechnung weder Netzwerk noch Zufall oder aktuelle Uhrzeit verwendet, liefern identische Anfragen stets identische Werte. Damit eignet sich die Ausgabe für Build-Skripte, Snapshot-Tests, Dokumentationsgeneratoren und Designsystem-Audits, bei denen Reproduzierbarkeit ebenso wichtig ist wie visuelle Harmonie.