If you want to maintain a constant relationship between text elements and still have it responsive use pow(). font-size: calc(---size * pow(1.5, 4)); then put the clamp on --size
@@NotKyleChicago In the CSS code snippet you provided, pow is used as a function within the calc() expression to calculate the font size. Here's a breakdown of how it works: * calc() function: This function allows you to perform mathematical calculations directly within CSS values. * pow(1.5, 4): This expression represents the pow function being used with two arguments: * 1.5: The base number. * 4: The exponent. * pow() function: This function calculates the power of the base number raised to the exponent. In this case, it calculates 1.5 raised to the power of 4, which equals 5.0625. * Final calculation: The calc() function then substitutes the result of the pow() function into the expression, resulting in: font-size: calc(--size * 5.0625); This means the font size will be calculated by multiplying the value of the custom property --size by 5.0625. Therefore, pow in this context is used to calculate the exponent of a number within the calc() function, allowing for more dynamic and flexible font size calculations based on other CSS values.
i'm not generally sure about this one.. that's directly too much of definitions, 1 fluid type annotation on root set as a font-size, then rem-ing everywhere else is probably my decision.. maybe id create a utility for myself that will generate these "steps" for me, but i feel like this is way too boilerplaty and in so many cases is an absolute overkill.. thanks for the interesting tip anyways!
Nice! I think I will have to revisit a website I did and adjust using the clamp property! With I had known, thank you for this tip!! Using view-port width was my go to for awhile and not I have a better understanding.
Thank you for walking through clamp() like you did here. It never truly made sense to me before but this example and your explanation REALLY helped!!!!
When i start to build my first web page during my college days. I often use vmin & vmax for font size. After sometimes only i came to know that these font units won't bring responsiveness 😅
Jesus wept, are people just overcomplicating things for no reason? The entire point of REM is that it's relative to the root of the document, not its ancestors. Put the clamp() font-size stuff in the html element and then specify multiples of REM however you see fit for your actual text content. No need to magic number things or use an insane number of arbitrary custom properties, just 1 item that does the fluidity and every size thereafter derived from it. Fudging the vw unit in the clamp is still horrible though, but done once could be an acceptable trade-off. Or, and here's a WILD idea, don't have completely responsive text. Even with different pixel densities, all device categories are generally in the same ballpark as each other, so just set up a few media queries with common width ranges and set a fixed unit size for font-size. Hell, put these fixed sizes on the html element and stick with rems for actual text and not only do you preserve the proportionality of size across your different text elements, but you automatically adjust everything based on your device. And browser zooming works are expected as well. However, the difference between zooming the browser and a user's font size preference for the browser are two different things, and px for font sizes regardless of where you use them is going to break the latter.
Scaling font sizes for me only make sense when you have design elements with a fixed width and height. 1rem (usually 16px by default) looks perfectly fine on ANY device. Increase regular text a little but on mobile if necessary, but that's it. I actually worked at a company where they scaled everything by setting a calculated font-size via javascript on the html element and scaled EVERYTHING with rem. They considered it perfectly fine, even though everything would jump until all scripts were loaded, everything was too large on phones and tablets in landscape and font sizes were down below 10px on mobile, basically treating the entire page as if it was an image with a width of 100% and height of auto.
@@Azurryu well, that sounds...competent. Honestly I'll never understand how supposedly professional developers can think insane shit like you describe, or what I see in my own place of work, is a good idea. Hell, how the idea even formed in the first place.
I immediately got triggered when I saw the thumbnail "font-size: 5vw", thinking "who on earth does this way?!" LOL. Font clamping with a scaling factor generator is what I usually use all the time and I've been trying to get my designers to do the same because, not only it is so much more easier to implement and it's not based on some arbitrary sizing, it is consistent and it's visually pleasing to look at.
How much did I do font: #vw back before clamp? all the time on some major sites and still see it when I go to them. Should I have, nope but what could we do instead. @media 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 and that was a pain.
If it's very large text, you can get away with it, which I'm going to hope is the case if they're being particular with line breaks... I'd probably try pretty hard to educate them on how the web works though, in a very polite way with examples of why not being anal with line-breaks is important.
There’s just one issue: zooming. In most browsers, zooming doesn’t change the font size or affect REM units. Even with a 200% zoom, 1rem will still render as 16px instead of 32px. REM only adjusts if someone manually increases the font size in their browser settings to 200%. The regular zoom is in most browser the default zoom. Text zoom is mostly hidden in settings, because it also is effected by OS settings.
You're current that it doesn't change the font-size or `rem` in the strictess of definitions, but it does zoom in/out because it's changing the size of the pixel unit. Even if you set your font sizes in pixels, it will increase decrease the font size. If you zoom to 200%, you've effectively made your CSS pixels 2x bigger than they used to be (because a CSS pixel is not a screen pixel). You can see it in my demo, and you can try it right now on RU-vid, or any other site. You can also see in the video when I have the font-size in viewport units and zoom in and out, the margin on the sides of the pages is increasing/decreasing because of it (because the pixels are getting bigger/smaller), but the font-size isn't changing. As long as you use em, rem, pixels, or whatever else, you can allow the site to zoom in and out. There are ways to allow for font scaling without zooming. Wikipedia has a control for this right now, and I think offering that is awesome, but as long as you can zoom in/out and have larger/smaller text without any issues, it's perfectly fine.
Seems like they've addressed the main points I made about issues with viewport units. I've never used it myself, and generally I'm not a fan of overly-fluid designs, but without having used it, I can't say for sure... but they seem to have taken accessibility in mind 👍
If you're working on government websites, certain private business sites, healthcare or education websites, you HAVE to follow accessibility guidelines by law.
As ZeeZeeGaming said, accessibility rules are generally written in stone. A lot of companies have already faced lawsuits around inaccessible websites, in the US and EU, and the EU is making their accessibility rules even stricter very soon... That said, there are times when it's less likely to be an issue, like a very large font-size where it probably doesn't matter if it can't be zoomed in on. But as I showed in the video, most of the time if you only use viewport units for font-sizes without a clamp, you're going to get either too big at one point, or too small. Someone out there on their 54" widescreen display is going to full-screen your site and end up with some *very* big type 😆 I'd also say I'm giving some recommendations and best practices here, and in knowing those, it means that you can usually find the times when it's okay to break the rules as well :)
Just because 99.99% of cases should not use vp units for fs, there are legit reasons to do so. Saying don't use them is disingenuous. Always use the right tool for the job.
yes, because "cutting edge" CSS techniques are pushed by grifters and elitists trying to make CSS - and web development as a whole - significantly more complex than it needs to be in order to shill their unnecessary tools and products, and lock out the self-taught from emerging markets. If somebody with "industry experience" says X is a good approach, it'll instantly be copied by everybody who doesn't know better.
I’m experimenting using clamp in combination with container query units like font-size: clamp(1.125em, .625em + 7.25qci, 2.25em) And I can say, it‘s kind of neat, but also buggy. As long as I don’t resize the Chrome window, everything is fine. But the Chrome tab dies so often if I do. Don‘t have a clue why. 🥲
