[{"data":1,"prerenderedAt":26},["ShallowReactive",2],{"content-clamp-generator-en":3},{"about":4,"steps":8,"faq":13},[5,6,7],"With the CSS function clamp(min, preferred, max) a font size or spacing grows smoothly with the width of the browser window while staying between a minimum and a maximum. You no longer need media queries for every screen size: headings are smaller on phones and larger on desktops, with a fluid transition in between.","The generator does the math for you: enter the size you want at the smallest and the largest viewport, and the tool calculates the slope (vw) and the intercept (rem or px). In “Type scale” mode it creates a whole series of font sizes from a modular scale, e.g. a minor third on phones and a major third on desktops, as ready-to-use CSS variables.","The preview slider shows how large the text actually gets at a given window width.",[9,10,11,12],"Choose “Single value” for one size or “Type scale” for a whole set of font sizes.","Enter the sizes in px for the smallest and largest viewport and set the two viewport widths.","Pick the unit (rem recommended) and check the result with the preview slider.","Copy the CSS code, e.g. as font-size: clamp(…) or use the variables as var(--step-1).",[14,17,20,23],{"q":15,"a":16},"Why rem instead of px?","rem values follow the font size set in the browser. People who choose larger text there also get larger text with clamp(). With px that setting would be ignored.",{"q":18,"a":19},"Is fluid typography accessible?","Yes, as long as the text still grows enough when zooming. The vw part does not react to browser zoom. If the maximum is at most 2.5 times the minimum and the rest is in rem, zooming to 200% per WCAG 1.4.4 keeps working. The tool warns you when your ratio is larger.",{"q":21,"a":22},"What is a modular type scale?","Each font size is the previous one times a fixed ratio, e.g. 1.25. That gives harmonious steps for body text, subheadings and headings. In a fluid scale the ratio can be smaller on small screens so that large headings do not overwhelm a phone.",{"q":24,"a":25},"Can I use clamp() for spacing too?","Yes, clamp() works with any length, e.g. for padding, margin, gap or width. Simply enter the spacing you want instead of font sizes.",1792518996269]