6 ms·
If you want it to be even more readable you could do the following: font-size: clamp(1em, 1.3vw, 1.3em); I would also consider using `rem` instead of `em`
by eajakobsen 3y ago
If you want it to be even more readable you could do the following:
font-size: clamp(1em, 1.3vw, 1.3em);
I would also consider using `rem` instead of `em` incase you want to use it anywhere other than the root element.
- nhanb 3y agoI would only use this kind of thing on the root element, then size all other elements relative to the root element e.g. h1 { font-size: 1.5rem; }. It's more manageable that way IMHO. Thanks for the tip on clamp() by the way, TIL.
- hgsgm 3y agoThat's less reasable bwcause the order of arguments is mysterious.
- itsuka 3y agoI don't see any issues with this particular code (although for larger sizes, there may be an accessibility issue related to zooming). In general, I would recommend avoiding the use of vw-only units because the computed value may not change with zoom. I learned this from https://adrianroselli.com/2019/12/responsive-type-and-zoom.html https://adrianroselli.com/2019/12/responsive-type-and-zoom.h...
- Poppys 3y agohttps://utopia.fyi/blog/designing-with-fluid-type-scales https://utopia.fyi/blog/designing-with-fluid-type-scales This is a good write up of using clamp and fluid type