Typografische Skala und fließende Schrift (clamp)
Wähle die Basisgröße und das Verhältnis für Handy und für Computer. Das Tool erzeugt die Größen von h1 bis zum kleinen Text, mit clamp(), damit die Schrift sanft zwischen den beiden Bildschirmen wächst.
So geht’sSchriftgrößen in Harmonie
Verfügbar auf: 
Typografische Skala und fließende Schrift (clamp): wofür es gut ist
Wähle die Basisgröße und das Verhältnis (von kleiner Sekunde bis Goldener Schnitt) für das Handy und für den Computer und die Bildschirmbreiten jedes einzelnen. Das Tool berechnet die Größen von h1, h2, h3, h4, h5, Text und klein auf beiden Bildschirmen und baut das clamp() jeder einzelnen, in rem.
Die Vorschau zeigt deinen Text in jeder Größe, am Handy oder am Computer, und das CSS kommt mit fertigen Variablen.
So geht’s
- Wähle Basis und Verhältnis für Handy und Computer.
- Prüfe die Vorschau jeder Ebene.
- Kopiere die CSS-Variablen.
Wann nutzen
- Die Schriftgrößen einer neuen Website festlegen.
- Überschriften, die sich ohne Media Queries ans Handy anpassen.
- Die Typografie eines Designsystems erstellen.
Häufige Fragen
Was ist eine typografische Skala?
Es ist eine Folge von Größen, in der jede die vorherige multipliziert mit demselben Verhältnis ist, wie 1,25 (große Terz). Die Überschriften stehen im Verhältnis zueinander, und die Website wirkt geordneter als mit zufällig gewählten Größen.
Wie funktioniert clamp()?
clamp(Minimum, bevorzugt, Maximum) lässt die Schrift mit der Bildschirmbreite wachsen (der bevorzugte Wert nutzt vw), ohne die Grenzen zu überschreiten. So hat ein Titel eine Größe am Handy und eine andere am Computer, ohne Media Queries.
Warum rem nutzen?
In rem respektieren die Größen die Schriftgrößeneinstellung des Browsers der Person, was wichtig ist für alle, die die Schrift vergrößern, um besser zu lesen. Das Tool nutzt 1rem = 16px.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.