Please, don’t use viewport units for font sizes

  Рет қаралды 14,323

Kevin Powell

Kevin Powell

Күн бұрын

Пікірлер: 77
@octothorpe12
@octothorpe12 2 күн бұрын
Utopia keeps being awesome! Good on them for calling out WCAG failures.
@DeepTitanic
@DeepTitanic 2 күн бұрын
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
@NotKyleChicago Күн бұрын
What is pow()? I'm thinking power, as in "2 to the power of 3 equals 8".
@BryceDriesenga
@BryceDriesenga Күн бұрын
​@@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.
@zero3juan
@zero3juan Күн бұрын
basically as @DeepTitanic said but without the --size var, they just use 1rem 😎
@Mecabricks
@Mecabricks 9 сағат бұрын
Please remember that there are many different use cases for browser based applications. For example, my company provides browser based live scoreboards for sport stadiums. We use these units so that the content remains identical independently from the platform, TV, projector, giant LED screens, etc. Use what is appropriate for your job.
@Cuwubiq
@Cuwubiq 2 күн бұрын
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!
@claytongraham714
@claytongraham714 2 күн бұрын
Oh man... I just got done making a thing with 'vw' units. Now I gotta go back and change stuff. Grumpy hand clap in your general direction 😏
@kristopherhaney
@kristopherhaney 2 күн бұрын
well shit... (although I use clamp with it)
@LePhenixGD
@LePhenixGD 2 күн бұрын
same !
@bazz6932
@bazz6932 2 күн бұрын
I use Calc and clamp
@carstenaltena
@carstenaltena 2 күн бұрын
Same, lots of designs I do can't be done otherwise
@t20sgrunt36
@t20sgrunt36 2 күн бұрын
Same, never had any issues with the min and max of clamp.
@nousuyadagiri96
@nousuyadagiri96 Күн бұрын
Yupp
@vanechka222
@vanechka222 11 сағат бұрын
Don’t make text size responsive at all. The layouts / containers can (and should) be flexible so the text will fill the available space on each resolution. Just go with fixed font sizes and adjust at certain breakpoints with media queries
@WebDesignerAmy
@WebDesignerAmy 20 сағат бұрын
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.
@bdeleasa
@bdeleasa Күн бұрын
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!!!!
@pokefreak2112
@pokefreak2112 2 күн бұрын
this vw trick is actually really cool for game UI's where everything must scale uniformly
@KevinPowell
@KevinPowell 2 күн бұрын
Yeah it can definitely be useful for things like that :)
@JasonJA88
@JasonJA88 2 күн бұрын
Thanks for the video. I haven't used it in production yet, but I've been liking some prototyping I've done with container-query-units and clamp.
@fredthewebguy-yt
@fredthewebguy-yt 2 күн бұрын
Great tip! Utopia's accessibility check is a huge deal.
@rossclutterbuck1060
@rossclutterbuck1060 2 күн бұрын
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.
@Azurryu
@Azurryu 2 күн бұрын
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.
@rossclutterbuck1060
@rossclutterbuck1060 Күн бұрын
@@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.
@prasanths8960
@prasanths8960 Күн бұрын
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 😅
@lpbbell
@lpbbell Күн бұрын
Thank you for highlighting accessibility as a measure of successful web design.
@teugene
@teugene Күн бұрын
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.
@Dabayare
@Dabayare 7 сағат бұрын
I am still barebacking CSS with DP for font-size :)
@SamualN
@SamualN Күн бұрын
I like `font-size: clamp(16px, 3vw, 20px);`
@virinom
@virinom Күн бұрын
Well, I'm still using good old px with different media queries for different screen sizes, works just fine.
@n_mckean
@n_mckean Күн бұрын
ox is not accessible. Static font sizing should be avoided as changing font size in the browser doesn’t work. Use rem/em as a minimum.
@tolgabeyazoglu536
@tolgabeyazoglu536 Күн бұрын
I'm using Bootstrap, are rfs functions included? Or should I use your technique?
@StefanBauer
@StefanBauer 2 күн бұрын
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.
@KevinPowell
@KevinPowell 2 күн бұрын
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 KZbin, 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.
@StefanBauer
@StefanBauer 7 сағат бұрын
​@@KevinPowell Hey, I really enjoyed your video, but just wanted to clarify a small point! Zooming (graphical zoom) is more of a fallback mechanism and doesn’t fully comply with WCAG 1.4.4, which focuses on scaling text across all websites using relative units like rem or em. When you adjust the font size in the browser, it applies globally, and that’s the ideal way to ensure accessibility for users who need larger text. You made a great point about the Wikipedia feature-it’s awesome! But for users who rely on larger text, they’ve probably already set a default font size in their browser, making that control less useful for them. Also, about your vw*rem solution, if you’re already using relative units for both the min and max font sizes, that should be enough to ensure a good balance without complicating things further. Thanks again for the great video-it was mostly spot on, just thought this might help clear things up a bit! :)
@NotKyleChicago
@NotKyleChicago Күн бұрын
What is qci? I don't remember seeing that unit type before.
@deatho0ne587
@deatho0ne587 Күн бұрын
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.
@BernardAvornyo-wl4mz
@BernardAvornyo-wl4mz Күн бұрын
hey sir, I'm a beginner and I want to know more about the pseudo elements
@samtresidder7198
@samtresidder7198 2 күн бұрын
Back to the drawing board
@Cahnisama
@Cahnisama 2 күн бұрын
Found a height with vw today on the codebase. And not it didn't make any sense.
@robwhitaker8534
@robwhitaker8534 Күн бұрын
Bootstraps Sass RFS system uses calc with em and vw
@CCXLINKS
@CCXLINKS 7 сағат бұрын
Can you make a tutorial on how to make Drake’s 100 GIGS Site?
@orionh5535
@orionh5535 2 күн бұрын
What if the client is reallllly uptight of about never ever having text that line breaks how they don't want it to line break, on any screensize?
@pinnaclewd
@pinnaclewd 2 күн бұрын
Not sure that's even possible with responsive design! You would potentially fall down the hole of overflow 😮
@DAAN_MUSIC
@DAAN_MUSIC 2 күн бұрын
I mean use Clamp and text-wrap:nowrap; Then test it on the 5 common breakpoints and you should be fine. Mostly for company names and or slogans.
@KevinPowell
@KevinPowell 2 күн бұрын
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.
@rmo4762
@rmo4762 2 күн бұрын
Hi, what so you Thing about Finsweet Fluid responsive generator‍?
@KevinPowell
@KevinPowell 2 күн бұрын
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 👍
@NedumEze
@NedumEze 2 күн бұрын
Why isn't the Variable part of Clamp function not wrapped in a calc() function? Is something wrong in doing so?
@KevinPowell
@KevinPowell 2 күн бұрын
you could put the calc() in there if you want, but you don't need to. clamp(), like min(), max() and others don't require a calc() to do calculations.
@NedumEze
@NedumEze 2 күн бұрын
@@KevinPowell Oh! Okay. Thanks. I've been adding the calc() believing that it's necessary.
@bazz6932
@bazz6932 2 күн бұрын
I have a sass function for this
@jenstornell
@jenstornell 2 күн бұрын
That seems like a good approach. I hope we can do similar with CSS soon.
@JustBCWi
@JustBCWi Күн бұрын
Real Front-end Friends use "1in" for H1, "2in" for H2, etc.
@mickdavies5647
@mickdavies5647 Күн бұрын
It doesn't technically say you can't make users resize the window to change text size 😂
@randycreasi
@randycreasi Күн бұрын
One criterion, two criteria. "Criterions" is not a thing :)
@simpingsyndrome
@simpingsyndrome Күн бұрын
Some backend nerds says: Frontend is easy! Watch this, mf!
@alvaroprietovideos
@alvaroprietovideos 2 күн бұрын
Ummm... I don't like rules written in stone. I think many things can be done if you know when and why you're doing them.
@ZeeZeeGaming
@ZeeZeeGaming 2 күн бұрын
If you're working on government websites, certain private business sites, healthcare or education websites, you HAVE to follow accessibility guidelines by law.
@KevinPowell
@KevinPowell 2 күн бұрын
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 :)
@cemondel
@cemondel 6 сағат бұрын
Setting font-size to the p element is common bad practice... please don't do that.
@RmNrIHRoZSBDQ1AK
@RmNrIHRoZSBDQ1AK Күн бұрын
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.
@n_mckean
@n_mckean Күн бұрын
What is the legit reason that would have you disregard accessibility?
@Mecabricks
@Mecabricks 10 сағат бұрын
@@n_mckeanbrowser based scoreboards displayed on big LED screens in stadiums. These units work perfectly for this use case.
@n_mckean
@n_mckean 9 сағат бұрын
@@Mecabricks Aha, interesting use case and I see your point now. Definitely the 00.01% of uses though and whilst you're right that accessibility isn't harmed in that case and nor is the design very fluid, sometimes people just need simple rules to follow and saying "never" is probably more helpful than harmful even if not quite correct. You can still deliver on a scoreboard use case without straight viewport units.
@jfreeg
@jfreeg 2 күн бұрын
I learnt not to do that the hard way 😂
@HerbieBancock
@HerbieBancock Күн бұрын
Please use whatever works in the context of the design being implemented and don't pay any attention to the has-been hipsters on KZbin.
@n_mckean
@n_mckean Күн бұрын
Inaccessible design is lazy and immoral.
@divside
@divside 2 күн бұрын
Just use clamp with VW and problem solved.....
@n_mckean
@n_mckean Күн бұрын
Still not accessible.
@divside
@divside Күн бұрын
@@n_mckean why are u gay?
@franepoljak9605
@franepoljak9605 Күн бұрын
People really do this?
@rossclutterbuck1060
@rossclutterbuck1060 Күн бұрын
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.
@kundanvaghela6532
@kundanvaghela6532 2 күн бұрын
First❤🎉
@PascalHorn
@PascalHorn 2 күн бұрын
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. 🥲
@KevinPowell
@KevinPowell 2 күн бұрын
Huh, that's strange. I haven't run into issues yet, but I haven't played with it too much yet either.
Using CSS custom properties like this is a waste
16:12
Kevin Powell
Рет қаралды 174 М.
Please stop using px for font-size.
15:18
Coder Coder
Рет қаралды 189 М.
Миллионер | 1 - серия
34:31
Million Show
Рет қаралды 2,7 МЛН
Which One Is The Best - From Small To Giant #katebrush #shorts
00:17
REAL 3D brush can draw grass Life Hack #shorts #lifehacks
00:42
MrMaximus
Рет қаралды 4,8 МЛН
5 useful tips to help you improve your CSS TODAY!!
9:02
CSS {de}Coder
Рет қаралды 1,1 М.
I redesigned YOUR websites
20:44
DesignSpo
Рет қаралды 41 М.
Flexbox or grid - How to decide?
18:51
Kevin Powell
Рет қаралды 732 М.
18 Weird and Wonderful ways I use Docker
26:18
NetworkChuck
Рет қаралды 282 М.
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Coding2GO
Рет қаралды 398 М.
Microservices are Technical Debt
31:59
NeetCodeIO
Рет қаралды 498 М.
Map Men vs. Geoguessr
28:07
Jay Foreman
Рет қаралды 155 М.
Миллионер | 1 - серия
34:31
Million Show
Рет қаралды 2,7 МЛН