Responsive CSS clamp generator
Generates dynamic font size CSS based on the text width of two screens.
Input
The example value has been entered. Check it immediately or change the value.
Input is processed in the browser. Refreshing returns a sample value.
Result
Check or change the value using the example value result.
Linear padding based on px. Verify in the actual page considering the user’s zoom and font settings.
Share result
Share the tool link and result text together. No URL is included in the result. Check the below content and then share it.
Calculation·conversion criteria
Create CSS that adjusts font size based on screen width.
Input example
360px to 16px, 1280px to 24px.
For width 360–1200px and font size 16–24px, linear interpolation is applied between two points. Below this range, it is 16px; above, it is 24px.
How to use
- Use the provided example value or change the minimum screen width px, maximum screen width px, minimum font size px, and maximum font size px items.
- Click Verify result and check the following result.
- Result can be copied if needed.
Frequently Asked Questions
Does using clamp automatically ensure expanded accessibility?
No. Output combines px and vw, so you must check the user font settings and zoom behavior on the actual page. If the minimum and maximum fonts are the same, it acts like a fixed size.
Calculation criteria and reference materials
- W3C — CSS Values and Units
rem·px·vw units and clamp() function
Verification of calculation criteria: · Calculation·verification principles · Report errors