CSS clamp() · WCAG 2.2 · 1.4.4 Resize Text
Fluid type scale
Pick a font size for phones and one for desktops. You get CSS that grows smoothly in between, for body text and every heading, and a check that it still zooms to 200%.
This tool needs JavaScript. The formula is explained below the tool.
| Step | Phone | Desktop | Now | Reaches 200% |
|---|
Your CSS
What fluid type is
Text that is comfortable on a phone often looks small on a big screen, and a heading that fits a desktop can break a phone layout. Fluid type solves both: the size grows gradually with the width of the screen, between a minimum and a maximum. In CSS that is one line:
font-size: clamp(minimum, preferred, maximum);
The preferred value is a straight line through your two points. With 16px at 360px wide and 19px at 1440px wide, the size grows 3px over 1080px, which is 0.28% of the screen width. The tool turns that into rem + vw so it can be pasted straight into your stylesheet.
Why WCAG cares: zoom
Success criterion 1.4.4 Resize Text (level AA) says people must be able to zoom text to 200% without losing content. Many people with low vision rely on this every day.
Fluid type can quietly break it. Font sizes in vw follow the window, not the zoom level, so zooming in barely makes them bigger. Browsers zoom up to 500%, so the text has to reach twice its size somewhere in that range. Text in pure vw never does. That is why the tool always mixes rem into the formula, and why the table shows at which zoom level every step reaches 200%. A safe rule: keep the desktop size at most 2.5 times the phone size.
Why a scale
A type scale multiplies each step by the same ratio, the same way musical intervals work. That gives headings a clear, calm rhythm instead of random sizes. Phones have little room, so a small ratio such as 1.2 works best there. Desktops can take a bigger contrast, such as 1.333. The tool blends between the two, so headings grow faster than body text.