Type tools
Relative unit converter
Turn pixel and percentage type values into font-relative units that scale with the text.
Size at the largest viewport.
Size at the smallest viewport.
Ratio at the largest viewport.
Ratio at the smallest viewport.
The values above convert when you switch, so the output stays the same.
Use {min} and {max} as placeholders for the font sizes — the default names desktop-first (largest size leading). Line-height gets a -line-height suffix.
--28px-to-18px: ...;
font-size uses clamp(min, preferred, max) with sizes in rem and the slope in vw, so it stays zoom-friendly. Line-height can be entered as a unitless ratio, px, or % — whichever you pick, it resolves to a rem length at each end, because unitless line-height can’t live inside clamp(). Both share the viewport range and root size set above.
The value you’re converting from.
The size where this spacing is used.
em = px ÷ font-size. Prefer em over rem for tracking so it scales with the element’s own size. letter-spacing has no truly unitless value, so em is the relative unit.
The value you’re converting from.
% divides by 100; px divides by the font size.
Only needed when converting from px.
unitless = % ÷ 100, or px ÷ font-size. A unitless line-height is the multiplier of each element’s own font size, the recommended default, since child elements inherit the ratio rather than a fixed value.