Font size clamp generators/calculators not working as intended
Hi there.
I'm in the process of learning responsive CSS and I was trying to understand responsive font sizes first.
I saw someone link to one of these "font-size clamp generators" which, from what I understand, allows you to choose a minimum and maximum font size, either in pixels or rem, and the size in pixels of the viewport width when the font size will start/stop shrinking/growing - they call this "minimum" and "maximum" viewport width. Then the tool will essentially spit out the "perfect" equation for the "preferred" value of clamp (the second variable clamp asks for). This equation is always the sum of a font size and a viewport width.
This tool seemed perfect for the job, but I've encountered problems with it. It seems that when I enter very similar min and max viewport width values (999 and 1000), the min and max font sizes appear to be correct. But if I choose, for example, 500 and 1000, numbers you'd actually want to use to see a smooth transition between font sizes, I see incorrect minimum font sizes.
Let's say I enter 500 and 1000px for the min and max viewport widths, and 2 and 2.5rem for the min and max font sizes. This is the generated clamp function:
Any ideas?
Thanks in advance.
EDIT: Pretty sure the problem is I'm using a fairly long text with wrapping and this tools were designed for headers.
EDIT 2: I didn't have
I'm in the process of learning responsive CSS and I was trying to understand responsive font sizes first.
I saw someone link to one of these "font-size clamp generators" which, from what I understand, allows you to choose a minimum and maximum font size, either in pixels or rem, and the size in pixels of the viewport width when the font size will start/stop shrinking/growing - they call this "minimum" and "maximum" viewport width. Then the tool will essentially spit out the "perfect" equation for the "preferred" value of clamp (the second variable clamp asks for). This equation is always the sum of a font size and a viewport width.
This tool seemed perfect for the job, but I've encountered problems with it. It seems that when I enter very similar min and max viewport width values (999 and 1000), the min and max font sizes appear to be correct. But if I choose, for example, 500 and 1000, numbers you'd actually want to use to see a smooth transition between font sizes, I see incorrect minimum font sizes.
Let's say I enter 500 and 1000px for the min and max viewport widths, and 2 and 2.5rem for the min and max font sizes. This is the generated clamp function:
font-size: clamp(2rem, 1.5rem + 1.6vw, 2.5rem);Any ideas?
Thanks in advance.
EDIT: Pretty sure the problem is I'm using a fairly long text with wrapping and this tools were designed for headers.
EDIT 2: I didn't have
<meta name="viewport" content="width=device-width, initial-scale=1" />Generate linearly scale font-size with clamp()
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
