px, rem, em and pt
px is absolute. rem is relative to the root font size, which is what makes user zoom and browser settings work. em is relative to the parent, so it compounds — powerful for components, dangerous for nesting. pt is a print unit, 1pt = 1.333px at 96dpi.
Why rem is the accessibility default
If all type is in px, a user who sets a larger default font size in their browser gets no benefit. Sizing in rem means their preference propagates. Use px only for hairlines and fixed UI chrome.
Modular scales
A modular scale multiplies a base size by a fixed ratio to produce harmonious steps. Common ratios: 1.125 (major second, subtle UI), 1.25 (major third, general purpose), 1.333 (perfect fourth, editorial), 1.618 (golden ratio, dramatic). The generator shows six steps so you can pick a heading ladder without inventing values.
Building the token set
- Round to whole pixels or to 0.125rem for clean rendering
- Cap the scale at 5–7 steps; more invites inconsistency
- Name tokens by role (body, h1, caption) not by size
- Pair each step with a matching line height
Frequently Asked Questions
What root size should I assume?
16px is the browser default. Design against it so rem values stay predictable.
Why does 1rem look different on my site?
Your CSS may set html { font-size }, which changes the rem base. Check for a root override.
Can I use clamp() for fluid type?
Yes — combine this scale with clamp(min, preferred, max) so sizes adapt between breakpoints.
Privacy & Your Data
CSSmith runs entirely in your browser. Whatever you type, paste or upload is processed on your own device and never sent to a server — there is no backend to store it.