Typografieskala ausprobieren
Vorschau einer modularen Typografieskala mit einstellbarer Grundgröße, Verhältnis, Schriftart und Linienhöhe. Ausfuhren CSS Größen für Körpertext und sechs Überschriften.
Typografie CSS
:root {
--type-font: "Inter", sans-serif;
--type-line-height: 1.5;
--type-small: 12.8px;
--type-body: 16px;
--type-h6: 20px;
--type-h5: 25px;
--type-h4: 31.25px;
--type-h3: 39.06px;
--type-h2: 48.83px;
--type-h1: 61.04px;
}
body { font-family: var(--type-font); font-size: var(--type-body); line-height: var(--type-line-height); }
h1 { font-size: var(--type-h1); line-height: 1.15; }
h2 { font-size: var(--type-h2); line-height: 1.15; }
h3 { font-size: var(--type-h3); line-height: 1.15; }
h4 { font-size: var(--type-h4); line-height: 1.15; }
h5 { font-size: var(--type-h5); line-height: 1.15; }
h6 { font-size: var(--type-h6); line-height: 1.15; }Exporttexte bleiben auf Englisch; deine Eingaben werden unverändert übernommen.
Keine Anmeldung. Keine AI Credits. Dieses Tool stellt Ihre Ausgabe in Ihrem Browser zusammen.
Von einer Idee zu etwas Nützlichem.
- 01
Wählen Sie eine Schriftart, Basisgröße und ein modulares Verhältnis.
- 02
Prüfen Sie die Überschriftsgrößen und den Absatzabstand.
- 03
Download CSS Variablen für die aktuelle Skala.
Ein kleiner Kontext.
Eine modulare Skala multipliziert eine Basisschriftgröße mit einem wiederholten Verhältnis. Dieser Spielplatz berechnet eine sechsstufige Überschriftshierarchie plus Körper und kleinen Text. Größen sind explizite Pixelwerte für einen Ausgangspunkt; Überprüfen Sie das Reaktionsverhalten und den Zoom, bevor Sie sie in der Produktion verwenden.
Gute Fragen.
Bezieht sich CSS Laden Sie die ausgewählte Schriftart?
Nein. Es benennt die Schriftart und liefert Fallback-Familien. Laden oder selbst hosten Sie die gewählte Schriftart in Ihrer Anwendung.
Responsive diese Größen?
Der Export enthält feste Größen. Passen Sie sie an Ihre Haltepunkte oder Ihr flüssiges System an, nachdem Sie den tatsächlichen Inhalt getestet haben.