Farbformate umwandeln
HEX-, RGB- und HSL-Farben mit Transparenz umrechnen, als Farbfeld ansehen und als CSS-Wert kopieren.
Fließende Schriftgröße mit CSS clamp()
Aus Schriftgrößen- und Viewport-Grenzen eine responsive clamp()-Deklaration in px oder rem berechnen.
rem wird mit der angegebenen Basisschriftgröße berechnet. Prüfen Sie im fertigen Layout auch Browserzoom und vergrößerte Texte.
Gut gesetzte Schrift macht jeden Text leichter lesbar.
CSS
Über dieses Tool
Legen Sie Überschriftengrößen für kleine und große Bildschirme fest und prüfen Sie den Übergang.
Anwendung
Tragen Sie minimale und maximale Schriftgröße sowie die dazugehörigen Viewport-Breiten ein. Wählen Sie px oder rem, ändern Sie die simulierte Breite und kopieren oder speichern Sie font-size: clamp(...). Die Breiten müssen aufsteigend sein; die minimale Schriftgröße darf die maximale nicht überschreiten.
Zwischen den gewählten Breiten wächst die Schrift linear, außerhalb bleiben die Größengrenzen bestehen. Bei rem muss die eingestellte Root-Schriftgröße zu Ihrer Seite passen. Die Formel bezieht sich auf den Viewport, nicht auf einen Container, und verändert keine weiteren Typografie-Regeln.
Häufige Fragen
Wozu dient die Root-Schriftgröße bei rem?
Die Vorschau rechnet damit rem in Pixel um. Stimmen Sie den Wert mit Ihrer Seite ab. Die Formel reagiert auf Viewportbreite; eine andere Root-Größe verändert ihr Verhalten.
Welche Werte ergeben 16px auf dem Handy und 32px am Desktop?
Wählen Sie px und geben Sie 16px bei 400px Viewportbreite sowie 32px bei 1200px ein. Daraus ergibt sich clamp(16px, 8px + 2vw, 32px): bei 800px sind es 24px, außerhalb des Bereichs bleiben die Grenzwerte erhalten. Maßgeblich ist die Breite des Viewports, nicht die des Containers.
Verwandte Werkzeuge
Wird in einem neuen Tab geöffnet
Kommentare
0