codeadrian / modern-fluid-typography-editor Goto Github PK

In would be cool if I can write right into style something like

h1 {
  font-size: clamp(1rem, 2.5vw, 2rem);  /* Explainer: modern-fluid-typography.vercel.app/#/1/2.5/2 */
}

Hi Adrian,

Thank you for this exciting tool.
It would be awesome to have a live preview when "playing" with the values, what do you think?

Thanks

@iGitScor

It would be better if the font size was calculated using a linear function in my opinion.
For example:
If the width of the container is 14rem then the font size should be 1rem. If the container is 60rem wide, then the font size should be 1.25rem.
Then you could calculate a linear function using the two points (14/1) and (60/1.25) and the font size should then change depending on the width of the container and the font size set by the user in the browser.
What do you say to this?

p {
font-size: calc((100cqi/280) + 17px) / 16 * 1rem;
}

Visitors may want to check the Browser support of clamp() with CanIUse or an alternative, let's add a link somewhere?

Awesome project BTW, thanks!

It may be useful to cache a user's parameters in localStorage and load them the next time they return to the app. A reset button could also be added somewhere in the UI to reset to the defaults. What are your thoughts on this? And if you think it's worth adding to the app, would you be open to me putting in a PR?

Hi,

What would be the best way of using this to generate a set of font-sizes for H1 => H6 but using one type scale such as 1.125 for the minimum value and 1.250 for the maximum value.

I've had a go using Sass but the output doesn't appear to be correct.

Any suggestions?

Well done, it’s a very nice tool!
But I think it might be better if the user only entered the min/max font-size and min/max screen sizes and then the tool returned the clamp();

My first impression was that I would be able to move the handles and lines in the graph and that all the fields would automatically update.

If I have time I will try to make a fork.

I am writing to propose a couple of enhancements that I believe would significantly improve the user experience and functionality of this already impressive product.

1. Support for REM Font Units: Currently, the left panel offers font size adjustments in px units. It would be highly beneficial if there was an option to change these font units to REM.

2. Expanded Fluid Size Range: The existing fluid size range of up to 5vw has been quite useful. However, extending this range to 10vw would offer greater versatility in responsive design, allowing for more dynamic scaling across different screen sizes.