Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Root size — 1rem = 16px by default */ :root { font-size: 100%; /* respect user browser setting */ } /* Body text in rem — scales with user preference */ body { font-size: 1rem; /* 16px default */ line-height: 1.6; } /* Headings relative to root */ h1 { font-size: 2.5rem; } /* 40px */ h2 { font-size: 2rem; } /* 32px */ h3 { font-size: 1.5rem; } /* 24px */ /* em — useful for component-internal sizing */ .btn { font-size: 1rem; padding: 0.6em 1.2em; /* scales with button font-size */ } /* Fluid headline with clamp() */ .hero-title { font-size: clamp(1.8rem, 5vw, 4rem); }
Result
Open