The official store for JNews, a WordPress theme for news, blog and magazine websites. Build a successful publishing website with JNews.
Design Tools
CSS Clamp & Fluid Typography Generator
Generate responsive CSS clamp() values and fluid type scales. Preview sizes across viewports and copy production-ready CSS.
Live size preview
Scroll the samples to inspect every step in your scale.
Text uses the calculated pixel size at the selected viewport. The preview panel keeps its own width; it does not simulate a full page layout.
Your CSS
Size reference
| Token | CSS clamp() |
|---|
Fluid typography, without the guesswork
Set two sizes and two screen widths. The generator calculates the straight line between them, then uses clamp() to keep the result within its bounds outside that range.
How do I use the CSS in WordPress?
Paste the generated variables into your theme stylesheet or custom CSS area. Then use font-size: var(--fluid-size) for a single value, or font-size: var(--step-2) for a type-scale token, on the selector you want to style. A spacing value can be used with padding, margin, or gap instead.
Why use rem and vw together?
vw responds to viewport width; rem responds to the root font size. Combining them allows fluid sizing with relative bounds. The endpoints match your inputs at the root size you specify. Changing the actual root size changes the result and the viewport widths where it reaches its bounds. Do not force the root size just to match the calculator.
Does this guarantee accessible typography?
No. Relative units help, but viewport-based growth can limit how much text enlarges during zoom. Test your actual layout at 200% zoom and with larger browser font settings. Check small labels, line height, wrapping, and clipping as well as headings.
Can sizes decrease on larger screens?
Yes. Enter a smaller size for the large screen. The preferred expression will have a negative vw term, and the bounds will be ordered correctly. Equal endpoint sizes generate a fixed value inside clamp(). Values are rounded to six decimal places, so tiny differences from the inputs are possible.
Learn the syntax: MDN CSS clamp().