Keine Werbung mögen? Gehen Werbefrei Heute 

Schriftgröße-Modulskalengenerator

EntwicklerMatheText

ANZEIGE Entfernen?

EINGANG

Automatischer Prozess

Grund

Grundgröße (px)

Die Referenzgröße von 1rem. Die meisten Browser verwenden standardmäßig 16px.

Verhältnis

Jeder Schritt in der Skala ist das vorherige Schritt multipliziert mit diesem Verhältnis.

Angepasstes Verhältnis

Jeder Wert zwischen 1,01 und 3.

Ausgabe

Einheit

Dezimalstellen

Dezimalstellen in den gerenderten Werten.

Format

Vorschau-Text

Stichprobe

AUSGABE

Client-Seite

ANZEIGE Entfernen?

Führung

Schriftgröße-Modulskalengenerator

Der Font Modular Scale Generator erstellt eine vollständige typografische Skala aus einer einzigen Grundgröße und einem gewählten mathematischen Verhältnis. Jeder Schritt in der Skala ist das vorherige Schritt multipliziert mit dem Verhältnis, sodass Überschriften, Text und Kleinschrift im Verhältnis auf jedem Bildschirm bleiben.

Nutzung

Legen Sie die Grundgröße in Pixeln (häufig 16px, was gleich 1rem ist).
Wählen Sie einen Verhältnis aus dem Dropdown-Menü oder wählen Benutzerdefiniert und geben Sie Ihren eigenen Wert ein.
Wählen Sie das Ausgabeformat Einheit (rem, em oder px) und die Anzahl Dezimalstellen.
Wählen Sie ein Exportformat — CSS-Variable, SCSS-Variable, Tailwind-Konfiguration oder JSON.
Bearbeiten Sie die Stichprobe Text zum Vorabtesten Ihres eigenen Inhalts an jedem Schritt der Skala.
Kopieren oder herunterladen des generierten Codes und einfügen Sie ihn direkt in Ihr Projekt.

Funktionen

Neun klassische Verhältnisse – Von Minor Second bis Oktave, einschließlich des Goldenen Schnitts (1,618).
Eingabe eines benutzerdefinierten Verhältnisses – Geben Sie einen Wert zwischen 1,01 und 3 ein, um eine maßgeschneiderte Skala zu erstellen.
Live-Visuelle Vorschau – Sehen Sie den Beispieltext, der an jedem Schritt von xs bis 6xl gerendert wird.
Vier Exportformate – CSS-Standardvariablen, SCSS-Variable, Tailwind-Konfiguration oder JSON. fontSize rem, em oder px
– Wählen Sie die Einheit, die mit Ihrem Designsystem übereinstimmt. – Runden Sie die generierten Werte auf 0 bis 5 Dezimalstellen.
Anpassbare Genauigkeit Client-seitige Mathematik
– Alles läuft im Browser, sodass nichts an einen Server gesendet wird. Was ist eine modulare Typenskala?

 Häufig gestellte Fragen

Eine modulare Typenskala ist eine Folge von Schriftgrößen, die aus einer einzigen Grundgröße und einem festen Multiplikator gebildet wird. Jeder Schritt ist das vorherige Schritt multipliziert mit diesem Verhältnis, wodurch die proportionale Beziehung zwischen den Größen über die gesamte Gestaltung konstant bleibt.

Warum verwenden wir mathematische Verhältnisse anstelle von beliebigen Größen?
Verhältnisse aus der Musiktheorie und der klassischen Proportion – wie der perfekte Viertelton, der perfekte Fünfton und der Goldene Schnitt – erzeugen Beziehungen, die das Auge als harmonisch wahrnimmt. Beliebige Größen fühlen sich ungleich an und erzwingen auf jedem Bildschirm mehr visuelle Entscheidungen.

Welches Verhältnis sollte ich für Inhalte mit viel Text wählen?
Kleinere Verhältnisse wie Minor Third (1,2) und Major Third (1,25) halten die Größen der Überschriften nahe an den Text, was gut für Dokumentationen, Blogs und Interfaces mit viel Inhalt funktioniert, wo der Leser meistens in Absätzen verweilt.

Welches Verhältnis sollte ich für Marketing- und Redaktionsschaltungen wählen?
Größere Verhältnisse wie Perfect Fifth (1,5) und Goldener Schnitt (1,618) erzeugen dramatische Größenunterschiede zwischen Text und Anzeigetext. Sie funktionieren gut auf Landing Pages, Magazinen und Hero-Teilen, wo die Schrift die Hauptattraktion ist.

Was ist der Unterschied zwischen rem, em und px?
px ist eine absolute Pixelgröße. rem ist relativ zur Wurzel-Schriftgröße, sodass sie bei Änderungen der Browser-Einstellungen skaliert. em ist relativ zur Schriftgröße des nächstgelegenen Eltern-Elements, was zu komponierten Elementen führt. Die meisten Designsysteme bevorzugen rem für globale Typenskalen, weil sie die Benutzerzugriffs-Einstellungen respektieren.

Der schnelle braune Fuchs springt über den faulen Hund

Möchten Sie werbefrei genießen? Werde noch heute werbefrei



 Erweiterungen installieren

IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche

恵 Die Anzeigetafel ist eingetroffen!

Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!

ANZEIGE Entfernen?