Do you have a list of different root font sizes?
I'm looking to find a list of font sizes that I can use in my roots, to copy and paste in my projects. Do you guys know where to find this, and do you use this?
4 Replies
If I understood your question correctly, you might be looking for this: https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
This is a list of responsive font sizes using the clamp function.
You can use them accordingly in your CSS
This gets me about 90% there. The base font size will never be smaller than
1em or larger than 2em, with a gradual curve in between. You're free to change the values, but two things to note:
1. The middle number MUST include em in the calculation, else you're telling everyone who changes the default font size to fuck off and you don't care about them and they shouldn't visit your site
1. Because it's setting the font size on the body element, that cascades down to things like headers and whatnot that are bigger/smaller than the base font size, so no need to manually adjust the headersIm using plugin in figma caaled typescales. I design font-sizes using this for desktop and then mobile version. After this im using clamp calculator and generate clamp functions. Btw im now building an clamp calculator. https://clamp-calculator.netlify.app
Clamp Calculator
CSS Clamp function calculator