Video starts at 2:30 Takeaway: For font-sizes, always use "rem" to avoid compounding problem Use "em" for properties other than fontSize like margin, padding, width etc... rem are useful when we are trying to use media queries
Thank you, Kevin. I didn't know prior to watching this that using ems outside of font-size is relative to that element and not it's parent element. I always learn something new with every one of your awesome videos and that is why I love your channel. You're awesome and thank you.
It's worth mentioning that em's are not only great for 'typographic padding' like you've shown, but for keeping line-height consistent with the font-size. And em's are the default for the unit and you can leave it off: line-height: 1.2;
No, that’s not how line-height works. line-height without a unit and line-height with em behave differently. The latter are not the default. If you leave out the unit line-height will be calculated for each element based on that element’s font size. If you specify line-height in em, it’ll be calculated once on the element the rule applies to and then all descendants will inherit that value regardless of their font-size.
I did learn something important. I had not viewed the videos when you posted them in the course but having watched them now makes it easy to decide what to use when. Cool.
I don't know how many times I've looked up the definitions for rem vs em and still felt confused as to when to use one over the other. Guess I'm more of a visual learner, thanks so much for this!
OMG... mind blown. FINALLY I understand the difference, and why! As a noob responsive designer, this clears up a ton of problems for me already. THANK YOU!!!!
Thanks Kevin! Longtime viewer first time commenter. The context in this video really solidified the inheritance concept of REMs for font size. I haven’t nested text the way you did in this video so the concept seemed too abstract before, I’ll definitely use REMs for font size moving forward.
Wow this is the first instance I have ever heard that em's for everything besides font-size are referencing that particular element and not the parent. Solid information thanks!
Maaan, this is excellent! Thank you for bringing so much clarity into my CSS World of understanding! :) i'm pretty sure these videos are highly valuable for others! :) Have a nice day, Fritz
Hi, Kevin. using rem and em was known to me what you did explain about font size is the key learning for me. Thank you! I will share it with more people!
This is so helpful!! Thank you. I've been using EMs for fonts and was completely running into the HUGE example and getting really frustrated :) going to try rems
I watch your videos randomly. lol Great tips man, very useful material. I didn't know the differences between one use and the other. Thank you very much! =D
Great video. I think "em"s can be useful for font size occasionally. It can be very useful if you have an element that you want to be a little bit smaller than the surrounding text, but the surrounding text could be different sizes in different contexts. As long as the parent element is set in "rem" (or another more predictable unit), it can be safe.
Very useful information!!!! I actually made it a policy to ALWAYS set font sizes using "em" so they would scale better than using pixels. I now understand the problem with this and will start using "rem" for font sizes. Question: when specifying a font size, using rem, must I sing or hum the song "Losing my Religion"? :) Thanks for posting!
I read article over article and didn't understand anything about this topic and felt kinda dumb. Thanks to you I finally understand it. Just like I finally understood Flexbox thanks to you.
6:13 if we assume a class .cta_button { background: red; text-decoration: none; padding: 1em 4em; } . If we don't define font-size inside .cta_button class then, what value does em in padding reference to?
awesome video, Kevin! Thank you. Would love to learn how one would go about setting margins in ems for the purposes of creating "vertical rhythm". Have you done this in a web project?
I have, and coming from a print background where baseline grids are common, I thought I'd love it. I ended up hating it, haha. I have it setup on my own site now (where the code is a complete mess, lol). So many times I found myself getting more frustrated with it than it helping me out, so I'm probably not the right person to take a deeper look into it, lol.
@@KevinPowell I totally hear you- there seems to be a lot of frontloading with typescales and line-height calculations. I'm doing a lot of reading on the subject- maybe I can share notes on what I've learned. BTW- purchased your course on Scrimba- loving it so far! Thanks for all that you do, Kevin!
To solve the em compounding without using either pixels or rems, you could use the > selector between the list parent and list item tags. However, good old IE6 did not support parent > child selectors. Font-size is an inherited property so using ems for heading and paragraph elements ensures they always have relative sizes, while you can adjust base size for the element. Rems are only relative to the root em of the html element, while using a mix of pixels and ems lets you vary text size in different regions.
If you know how to approach it, and you're really careful, it can even be useful at times, but I think for the majority of situations using rem makes life a lot easier. If it's well set-up, you can def. work with ems, but what if you end up with a component inside another component that you didn't plan on at the start, and suddenly it's hitting a double compounding effect?
Agreed. Luckily IE6 is dead, IE8 is on life support and IE11 will go the way of the dodo once Windows 7 is end-of-life. Although my main focus is on Javascript , I've worked alongside designers and frontend devs who manage to produce gargantuan pixel-perfect stylesheets with a zillion overrides and endless media queries because they don't understand that font-size is an inherited property and everyone in the UI/UX team refers to pixels.
i have been following various tutorials on html , css and js for the past couple of months, currently I feel as I have hit a wall and progress has reduced significantly as most of the tutorials target beginners ,... please suggest as to how to further Improve my skill in this field
Deaf dog You should try and look at awwwwards.com, there are always a lot of fantastic projects shown on there, you can recreate them or even make something new yourself while you improvise using the stuff people made on there! Think about real life problems, someone already fixed a problem by making something, recreate that and make it as your own. For example, forums, blogs, your own cms etc.
I've got some idea brewing here, but as Liam said, it might not be that the tutorials are too basic, and it might be that you're ready to start doing things without tutorials. Now, you still might get stuck, but it'll be on a part of what you are trying to do and then you'll be able to find an article or short video for that one specific thing.
I was watching the video and at the end of the day, I think it's about how can you justify what you pick and defend it. I can see em's being useful if say you really need and can justify elements being relative to another. Like you absolutely know that this font must be 1.5x times another font and you want it to scale as the other font scales. There are always exceptions to hard and fast rules and at the end of the day, it depends on how well you can reason about and explain and justify your code to others.
What do you think about something like "font-size: calc(1.5rem + 0.5vw); " I've seen people using this for scaling the font as the screen size changes. Thanks for this video, I did not know that em's compounded like that.
I've done that for titles, and think it can be useful. I don't like it for body text, things can get too small. But I do like the idea. I've heard of issues with accessibility, but I *think* it's all good as long as the "base" size (the rem part) is big enough... but I'm far from an accessibilty pro
@@marshchawki1912 it does a calculation on page render I believe that will take into account the viewport width and add that to the value that rem calculates...so if your rem is say 24px and your viewport width is 600px then you will wind up setting your font-size to 27px (1.5*16px + 600px*.005) = 27 px
@kevinpowell, or anyone on the channel who knows and adapted this approach, Is there any type of conversion, maybe some chart exists online where you can understand what 10px is in rem? I am trying to understand if the designer sends me the figma file all set in px how should I transfer in rem but still meet the spec requirements. How you normally start with building the page using this metric system
Hey , Kevin!! I’m really your big fan. I’m learning so much from your you tube channel, specially CSS. Do you have any video that can help me to learn How to create Web Component in vanilla Js or Angular?
Hello. I am developing a website with Bootstrap. Here all the measures are set in rem. If i change the font size, i get other problems since all sizes are in rem. I find the 16px font size too big for my laptop screen, also for my phone. Is using a default smaller size such a bad ideea ?
I'm having this problem where the font size, margin and padding are perfectly fine when I'm doing the mobile design on my laptop (Chrome Dev Tools) but when I view the same website on an actual mobile device with high resolution, the font size, Margin and padding are different especially the font size, it gets too small. I'm struggling with it for the past few days, haven't found a solution yet. Please help me out or link me to a video where I can learn what I'm doing wrong. P.S:- The screen on which I design has less resolution than my mobile device.
There is no like one more case when one of the font is small but good enough to read on desktop. And on lower screen sizes, when we reduce the root font size, the text is going to be unreadable. So we will be using more rem value than the desktop which is kind of confusing.
Hmm. It sounds like defining values for text stroke width and text shadow distance in ems will keep those effects proportional to one's text. Thanks for the tip!
I have a question em is measuring unit whats the difference between em and rem or vh or even px and should I now what's em and am I have to use it or I can use what ever I want
Hi! It's there any benefit using ems if I already set font sizes, margins and paddings with rems and everything scales or downscales accordingly by only changing the font size (using %) of the html using media queries?
My dear old Typographer lecturer, from way-back in the 1980's art college, would be rolling in his ash-tray at this one. This isn't a failure of the "em!" This is an issue of how local and global variables are handled. In the good old days; type used to be carved on the front of a block of metal. The "em" was the height of the block of metal; not the typeface carved in the front of it. Obviously you can't carve the font beyond the extent of the metal block. And all your twiddly bits have to fit in that block of metal. Hence the "em" is the height of the letter; PLUS the little bit of daylight above and below it. But notice the "em" is related to the size of the font. (Or more correctly the font is related to the size of the "em".) A 14pt "em" is different to an 18pt "em". It is "relative". "Proportional" . . . it is not a size . . . it's a "variable." A Chihuaha, and a Great Dane, are both dogs; but they are very different sizes. Bandying "em"s around as a size for something; is like the time my sister was convinced a box would fit into the back of her car because she had measured it with the strap of her handbag. Personally I'd stick to the raw data; points (1/72 of an inch); pixels; millimetres; inches - whatever . . even Picas and Ciceros . . . but this not a problem with "em" - this is about declaring variables . . and what the heck are you doing multiplying the "em" anyway? Uuurgh; made me giddy!
So if I understand you right for font size we use rem for padding and margin use em? What about using percentages for font sizes to make them more responsive? I've noticed that when I use rem or em's for font sizes they really don't grow or shrink when the site gets smaller. Especially on h1, h2 , and h3.
That can be dangerous for accessiblity reasons, as things can shrink too small. It tends to be pretty extreme when we do that. We coudl throw it inside a calc() to limit the effect as Gene mentioned in another comment though. I like sticking with media queries to handle changing font-sizes though, with maybe something at the largest sizes which includes a calc(4rem + .5vw) or something similar.
I've finally started using viewport units in special cases for display text, especially for responsive design on mobile devices. Any special cautions about that as opposed to, say, percentages, rems, etc?
I'm going to do a video on this specifically at one point... but it's that the text has the potential to get VERY small. Now, you did mention display text, so I'm guessing you're keeping it big anyway, but the safe way to do it is use calc... so font-size: calc(3vw + 2rem); - that was, we sort of have a minimum size set on it.
I have found that by using vw or vh (whichever one has the lowest impact depending on viewport) works very well for font scaling. For example, I use vh when it is a desktop viewport. If I used vw for desktop, it was scale far too much and become too large. So vh works best. For tablet and mobile I use vw.
So in a manner of BEM it would be ok to say that parents should be addressed with rem's and children and grandchildren with em's to keep the flow? Just thinking here out loud...
Personally, I use a base pixel value (usually around 20px) on the HTML element, and then scale all font sizes (and some instances of margin and padding) using rem's. I rarely every use em's except for things like "small" or "large" classes. And those I use sparingly.
However the cool thing thou when setting up root font size is that it makes easier to when scaling down to responsive With simply reducing the font size on the root all the elem that are set with rems would automatically adjust
Kevin please, are there any potential dangers of using percentage in all your font sizes...if so...pls let me know. I need reply please
5 ปีที่แล้ว +1
I use rem exclusively, with the exception of pt, which I sometimes use with printing in mind. But the worst thing you can do is using viewport units for font size, it completely destroys the accessibility of a webpage. Browsers really ought to prevent developers from doing this.
If you use just vw for a font-size, things will go to hell quickly. If you add it in a calc with a decent rem as the "base", it stops things from getting crazy in terms of size, but I don't know the overall accessibilty impact. I'd never do it on the body though, only a really big h1, say something like calc(5rem + 1vw). I think from an accessibility perspective it would be safe, but I'd want to talk with someone who knows more before saying that.
I had a div with a height in vh and i wanted the content (one word) to fit exactly in that div so I used vh as my font size. Wat would've been a better way to do this?
Actually, like @Hanneke, I have used viewport width units as a font size, exactly FOR responsiveness reasons. It's a great way to get large or very large text to fill a screen or area. For example, you could set a font-size of 10vw or 11vw to display elapsed time of hours, minutes, and seconds with colons between and it would fill the width of the viewport no matter how big it is. I would agree with you that it is a terrible way to specify the size of 'normal' text.
If you're going to use it for a font-size, use it within a calc, so something like calc(1rem + 2vw). Basing it only on viewport width is bad for accessiblity, and it also tends to make for *really* big fonts on large screens, or *really* small ones on small screens. clamp() can help with that though :)
Video starts at 2:30
Takeaway:
For font-sizes, always use "rem" to avoid compounding problem
Use "em" for properties other than fontSize like margin, padding, width etc...
rem are useful when we are trying to use media queries
vg job at takeaway!
I mostly only use REM, %, vw and vh units. No em
Bruhs Doing Gods Work
Life saver
but what if i use the rem for parent element and em for children element ?
Thank you, Kevin. I didn't know prior to watching this that using ems outside of font-size is relative to that element and not it's parent element. I always learn something new with every one of your awesome videos and that is why I love your channel. You're awesome and thank you.
Glad you learned something Jeff :D - The joy (and sometimes frustrating thing) about CSS is there is always something new to learn!
finally get the point of em and rem. Confused me since I knew them. Thank you so much!
Best channel out there for CSS. Thanks for your clarity, your pacing and your rigor.
Many thanks Kevin! So much clarity you gave and with simple to understand language. Always nice to watch your video. 👍👍
It's worth mentioning that em's are not only great for 'typographic padding' like you've shown, but for keeping line-height consistent with the font-size. And em's are the default for the unit and you can leave it off:
line-height: 1.2;
No, that’s not how line-height works. line-height without a unit and line-height with em behave differently. The latter are not the default. If you leave out the unit line-height will be calculated for each element based on that element’s font size. If you specify line-height in em, it’ll be calculated once on the element the rule applies to and then all descendants will inherit that value regardless of their font-size.
@@mina86 *descendants* will inherit
@@GregPerham, fixed, thanks.
I did learn something important. I had not viewed the videos when you posted them in the course but having watched them now makes it easy to decide what to use when. Cool.
I don't know how many times I've looked up the definitions for rem vs em and still felt confused as to when to use one over the other. Guess I'm more of a visual learner, thanks so much for this!
OMG... mind blown. FINALLY I understand the difference, and why! As a noob responsive designer, this clears up a ton of problems for me already. THANK YOU!!!!
MR KEVIN!!! Your channel is a freakin gold mine when it comes to web stuff.
I gotta tell ya, this was the most perfect explanation of em's and rem's. Thank you so much, Kevin!
Thanks Kevin! Longtime viewer first time commenter. The context in this video really solidified the inheritance concept of REMs for font size. I haven’t nested text the way you did in this video so the concept seemed too abstract before, I’ll definitely use REMs for font size moving forward.
Awesome :D and glad that you took the time to comment!
3:39 em compunds each other
4:29 show that em has multiple !
6:38 use rem instead
9:02 when to use em
Wow this is the first instance I have ever heard that em's for everything besides font-size are referencing that particular element and not the parent. Solid information thanks!
Maaan, this is excellent! Thank you for bringing so much clarity into my CSS World of understanding! :) i'm pretty sure these videos are highly valuable for others! :)
Have a nice day,
Fritz
Hi, Kevin. using rem and em was known to me what you did explain about font size is the key learning for me. Thank you! I will share it with more people!
This is so helpful!! Thank you. I've been using EMs for fonts and was completely running into the HUGE example and getting really frustrated :) going to try rems
This video's title should be "Difficult Concept Made Easy in Less Than 15 Minutes." As always, an excellent explanation.
I thought I never gonna use em, but now there is a perfect case to use so along with a perfect explanation when not to use them. Thanks!!
Wow, I just updated my project and now it perfectly adapts to the browser text size :)
THANK YOU!
Thanks Kevin for this video finally I got the concept of em and rem and which one to use when cheers and stay safe
I watch your videos randomly. lol Great tips man, very useful material. I didn't know the differences between one use and the other. Thank you very much! =D
Great video. I think "em"s can be useful for font size occasionally. It can be very useful if you have an element that you want to be a little bit smaller than the surrounding text, but the surrounding text could be different sizes in different contexts. As long as the parent element is set in "rem" (or another more predictable unit), it can be safe.
Kevin, thank you. Now I finally understand em and rem. Your content is excellent.
Thanks Kevin. Your explanations are so straightforward and easy to understand!
I definitely learned something new with this video, you're always doing a great job in making css a little bit less frustrating 🤣
Thankyou! I was so confused 😬 but this cleared all my doubts 🙇🏾♂️
Like always, awesome! Keep uploading such useful content like this. Thanks!
Nice tutorial, came here via conquering responsive layouts. Thanks Kevin!
I thought I had the em vs. rem figured out, but you just gave me the last pieces of the puzzle. Thank you!
wow thank you so much kevin that was really awesome all the love from Egypt :D
cleared up a lot of confusion between the two, thank you very much!
Solid like dropped on this video. I learned about em applying to font size.
CRL - Day 2! TY KEVIN! Filling in a lot of gaps in my css journey.
Finally. Got the difference between em and rem. I m just starting out and it helped a lot
Thank you. I will be using REMs for basic text and EMs for the pagination buttons I create for query results.
This video is very helpful, as a starting web designer your vids are so helpful in my job!
Thanks for putting out this one. Clearly understood
It opened my eyes, I was struggling with ems and rems
Thanks so much for the amazing css tutorials.
Wow! I thought I knew enought about EM's, but using for paddings is cool, thank you again!
Another wonderful video. 👏👏 Thanks Kevin!
Very useful information!!!! I actually made it a policy to ALWAYS set font sizes using "em" so they would scale better than using pixels. I now understand the problem with this and will start using "rem" for font sizes. Question: when specifying a font size, using rem, must I sing or hum the song "Losing my Religion"? :) Thanks for posting!
Thank you! I've read tons of articles to clarify these differences but they were too boring to actually fix something in my mind eheh
You’re my favourite youtuber👏🏻🤩
What a legend! Thanks for the great explanation!
I read article over article and didn't understand anything about this topic and felt kinda dumb. Thanks to you I finally understand it. Just like I finally understood Flexbox thanks to you.
6:13
if we assume a class
.cta_button {
background: red;
text-decoration: none;
padding: 1em 4em;
}
. If we don't define font-size inside .cta_button class then, what value does em in padding reference to?
only font-size em reference to parent element, rest of properties with em value reference to that element. MIND BLOWN
Thx, that really helped a lot. Keep it up, Cheers
Awesome! Thanks Kevin!
Thank you for this. It cleared it up and lifted the fog
Really great video. I'll grab this knowledge for my life
Damn this vide entirely my confusion with rems and ems. Thanks Kevin !
awesome video, Kevin! Thank you. Would love to learn how one would go about setting margins in ems for the purposes of creating "vertical rhythm". Have you done this in a web project?
I have, and coming from a print background where baseline grids are common, I thought I'd love it. I ended up hating it, haha. I have it setup on my own site now (where the code is a complete mess, lol). So many times I found myself getting more frustrated with it than it helping me out, so I'm probably not the right person to take a deeper look into it, lol.
@@KevinPowell I totally hear you- there seems to be a lot of frontloading with typescales and line-height calculations. I'm doing a lot of reading on the subject- maybe I can share notes on what I've learned.
BTW- purchased your course on Scrimba- loving it so far! Thanks for all that you do, Kevin!
I don't know what to say. You're awesome. Thanks 🚀
Great video Kevin as always. You say don't use the 62.5% trick but I learned that trick from one of your other videos lol
Love this! Just finished day 2 stuff
To solve the em compounding without using either pixels or rems, you could use the > selector between the list parent and list item tags. However, good old IE6 did not support parent > child selectors. Font-size is an inherited property so using ems for heading and paragraph elements ensures they always have relative sizes, while you can adjust base size for the element. Rems are only relative to the root em of the html element, while using a mix of pixels and ems lets you vary text size in different regions.
If you know how to approach it, and you're really careful, it can even be useful at times, but I think for the majority of situations using rem makes life a lot easier. If it's well set-up, you can def. work with ems, but what if you end up with a component inside another component that you didn't plan on at the start, and suddenly it's hitting a double compounding effect?
If IE6 is your target, rems will be an issue too - they're not supported until IE9. And don't use them in the font shortcut if your target is IE 9-10.
Agreed. Luckily IE6 is dead, IE8 is on life support and IE11 will go the way of the dodo once Windows 7 is end-of-life. Although my main focus is on Javascript , I've worked alongside designers and frontend devs who manage to produce gargantuan pixel-perfect stylesheets with a zillion overrides and endless media queries because they don't understand that font-size is an inherited property and everyone in the UI/UX team refers to pixels.
Great! Thank you Kev!
Following Conquering Responsive Layout cours, thanks! Solid informations.
Awesome and makes me think twice about px for these things.
i have been following various tutorials on html , css and js for the past couple of months, currently I feel as I have hit a wall and progress has reduced significantly as most of the tutorials target beginners ,... please suggest as to how to further Improve my skill in this field
Deaf dog You should try and look at awwwwards.com, there are always a lot of fantastic projects shown on there, you can recreate them or even make something new yourself while you improvise using the stuff people made on there! Think about real life problems, someone already fixed a problem by making something, recreate that and make it as your own. For example, forums, blogs, your own cms etc.
I've got some idea brewing here, but as Liam said, it might not be that the tutorials are too basic, and it might be that you're ready to start doing things without tutorials. Now, you still might get stuck, but it'll be on a part of what you are trying to do and then you'll be able to find an article or short video for that one specific thing.
@@KevinPowell thank u .. il start workng towards that direction
I was watching the video and at the end of the day, I think it's about how can you justify what you pick and defend it. I can see em's being useful if say you really need and can justify elements being relative to another. Like you absolutely know that this font must be 1.5x times another font and you want it to scale as the other font scales. There are always exceptions to hard and fast rules and at the end of the day, it depends on how well you can reason about and explain and justify your code to others.
Just wanna say .. Thanks a lot, Kevin… this cleared a lot of my confusions using em and rem 👍…
thank you Kevin！！🙏🙏🙏
What do you think about something like "font-size: calc(1.5rem + 0.5vw); " I've seen people using this for scaling the font as the screen size changes. Thanks for this video, I did not know that em's compounded like that.
I've done that for titles, and think it can be useful. I don't like it for body text, things can get too small. But I do like the idea. I've heard of issues with accessibility, but I *think* it's all good as long as the "base" size (the rem part) is big enough... but I'm far from an accessibilty pro
how this works?
@@marshchawki1912 it does a calculation on page render I believe that will take into account the viewport width and add that to the value that rem calculates...so if your rem is say 24px and your viewport width is 600px then you will wind up setting your font-size to 27px (1.5*16px + 600px*.005) = 27 px
@kevinpowell, or anyone on the channel who knows and adapted this approach, Is there any type of conversion, maybe some chart exists online where you can understand what 10px is in rem? I am trying to understand if the designer sends me the figma file all set in px how should I transfer in rem but still meet the spec requirements. How you normally start with building the page using this metric system
Hey , Kevin!! I’m really your big fan. I’m learning so much from your you tube channel, specially CSS.
Do you have any video that can help me to learn How to create Web Component in vanilla Js or Angular?
Not really 😕
I have a few JS things, but nothing much.
Oh, well I do have a carousel with vanilla JS
Years ago before REM became a standard this caused so much pain for me. Messed up sizes in need for redeclaring and don't forget line-height issues...
Hello. I am developing a website with Bootstrap. Here all the measures are set in rem.
If i change the font size, i get other problems since all sizes are in rem.
I find the 16px font size too big for my laptop screen, also for my phone. Is using a default smaller size such a bad ideea ?
I'm having this problem where the font size, margin and padding are perfectly fine when I'm doing the mobile design on my laptop (Chrome Dev Tools) but when I view the same website on an actual mobile device with high resolution, the font size, Margin and padding are different especially the font size, it gets too small. I'm struggling with it for the past few days, haven't found a solution yet. Please help me out or link me to a video where I can learn what I'm doing wrong.
P.S:- The screen on which I design has less resolution than my mobile device.
Amazing video! Thanks
Thanks, glad you enjoyed it :D
There is no like one more case when one of the font is small but good enough to read on desktop. And on lower screen sizes, when we reduce the root font size, the text is going to be unreadable. So we will be using more rem value than the desktop which is kind of confusing.
😮
So that is how it works! Thanks!
Hmm. It sounds like defining values for text stroke width and text shadow distance in ems will keep those effects proportional to one's text.
Thanks for the tip!
Great video as always =)
I have a question em is measuring unit whats the difference between em and rem or vh or even px and should I now what's em and am I have to use it or I can use what ever I want
Hi! It's there any benefit using ems if I already set font sizes, margins and paddings with rems and everything scales or downscales accordingly by only changing the font size (using %) of the html using media queries?
My dear old Typographer lecturer, from way-back in the 1980's art college, would be rolling in his ash-tray at this one. This isn't a failure of the "em!" This is an issue of how local and global variables are handled. In the good old days; type used to be carved on the front of a block of metal. The "em" was the height of the block of metal; not the typeface carved in the front of it. Obviously you can't carve the font beyond the extent of the metal block. And all your twiddly bits have to fit in that block of metal. Hence the "em" is the height of the letter; PLUS the little bit of daylight above and below it. But notice the "em" is related to the size of the font. (Or more correctly the font is related to the size of the "em".) A 14pt "em" is different to an 18pt "em". It is "relative". "Proportional" . . . it is not a size . . . it's a "variable." A Chihuaha, and a Great Dane, are both dogs; but they are very different sizes. Bandying "em"s around as a size for something; is like the time my sister was convinced a box would fit into the back of her car because she had measured it with the strap of her handbag. Personally I'd stick to the raw data; points (1/72 of an inch); pixels; millimetres; inches - whatever . . even Picas and Ciceros . . . but this not a problem with "em" - this is about declaring variables . . and what the heck are you doing multiplying the "em" anyway? Uuurgh; made me giddy!
So if I understand you right for font size we use rem for padding and margin use em? What about using percentages for font sizes to make them more responsive? I've noticed that when I use rem or em's for font sizes they really don't grow or shrink when the site gets smaller. Especially on h1, h2 , and h3.
That can be dangerous for accessiblity reasons, as things can shrink too small. It tends to be pretty extreme when we do that. We coudl throw it inside a calc() to limit the effect as Gene mentioned in another comment though. I like sticking with media queries to handle changing font-sizes though, with maybe something at the largest sizes which includes a calc(4rem + .5vw) or something similar.
I've finally started using viewport units in special cases for display text, especially for responsive design on mobile devices. Any special cautions about that as opposed to, say, percentages, rems, etc?
I'm going to do a video on this specifically at one point... but it's that the text has the potential to get VERY small. Now, you did mention display text, so I'm guessing you're keeping it big anyway, but the safe way to do it is use calc... so font-size: calc(3vw + 2rem); - that was, we sort of have a minimum size set on it.
@@KevinPowell Right; I loved the concept of using calc to set limits.
This is great! Using em paddings. Should I use em on margin? Thank you so much!
There are times to use em for margin (I do most of the time), but if you want to ensure it's always a fixed size, then use rem :)
When you changed the font-size of the call to action to 5rem, why didn't the font-size change?
very clear, thanks :)
I have found that by using vw or vh (whichever one has the lowest impact depending on viewport) works very well for font scaling. For example, I use vh when it is a desktop viewport. If I used vw for desktop, it was scale far too much and become too large. So vh works best. For tablet and mobile I use vw.
So in a manner of BEM it would be ok to say that parents should be addressed with rem's and children and grandchildren with em's to keep the flow? Just thinking here out loud...
I think I'd still keep the children as rem as a "just in case", but if you set things up properly it could work
Personally, I use a base pixel value (usually around 20px) on the HTML element, and then scale all font sizes (and some instances of margin and padding) using rem's. I rarely every use em's except for things like "small" or "large" classes. And those I use sparingly.
I think the possible issue with this might be accessibility for those who need a larger base font size; I think Kevin made another video about this.
Once again, clearing up a small yet massive issue. em's for padding and margin, rems for fonts! :D
Thanks ! Just thanks a lot !
Thank you CSS KING 👑
However the cool thing thou when setting up root font size is that it makes easier to when scaling down to responsive
With simply reducing the font size on the root all the elem that are set with rems would automatically adjust
Kevin, thanks A LOT.
Kevin please, are there any potential dangers of using percentage in all your font sizes...if so...pls let me know. I need reply please
I use rem exclusively, with the exception of pt, which I sometimes use with printing in mind.
But the worst thing you can do is using viewport units for font size, it completely destroys the accessibility of a webpage. Browsers really ought to prevent developers from doing this.
If you use just vw for a font-size, things will go to hell quickly. If you add it in a calc with a decent rem as the "base", it stops things from getting crazy in terms of size, but I don't know the overall accessibilty impact. I'd never do it on the body though, only a really big h1, say something like calc(5rem + 1vw). I think from an accessibility perspective it would be safe, but I'd want to talk with someone who knows more before saying that.
I had a div with a height in vh and i wanted the content (one word) to fit exactly in that div so I used vh as my font size. Wat would've been a better way to do this?
Actually, like @Hanneke, I have used viewport width units as a font size, exactly FOR responsiveness reasons.
It's a great way to get large or very large text to fill a screen or area. For example, you could set a font-size of 10vw or 11vw to display elapsed time of hours, minutes, and seconds with colons between and it would fill the width of the viewport no matter how big it is.
I would agree with you that it is a terrible way to specify the size of 'normal' text.
As my experience
VW (view with) is best option to use for font size because font size will be adjusted on small and big screen. 1vw = 1%
If you're going to use it for a font-size, use it within a calc, so something like calc(1rem + 2vw). Basing it only on viewport width is bad for accessiblity, and it also tends to make for *really* big fonts on large screens, or *really* small ones on small screens. clamp() can help with that though :)
Is there something wrong with using vmax instead of rem?
Thank You Very Much!!! ~ Peace :) Have a Great Day!!! :)
Hii Kevin which vscode theme are you using
Atom Dark One
This is awesome.