CSS Tutorial — EM & REM, Relative Sizes (8/13)

CSS Tutorial — EM & REM, Relative Sizes (8/13)

We covered absolute units like pixel values, and we covered relative units like percentage. Now let’s talk about another super important relative unit. EM. This is mostly used to size text. Sizing your fonts is absolutely crucial in having a good looking page. It’s one of the most important aspects of UI design. Typography.
I mentioned default browser styles a couple of videos ago. Let’s look at H1 in Chrome.
H1 has this weird font-size value of 2em. That line is the reason why H1 so big without you writing any CSS. But what is that? EM?
EM is another relative unit of measurement, similar to percentage. EM always has a number in front of it. 2em, 3em, .5em.
Font-size: 2em means, hey what is my expected font-size if I didn’t have any other CSS? I want my size to be 2 times that. Twice as big. So what is my expected Font-size? Font size is usually inherited from the parent, so say I have a font-size: 12px on the body tag. And I have a direct H1 child inside it with font size: 2em. That will make the H1 size automatically 24px, double its parent. Because it’s 2EM. So it’s almost like the H1 is listening directly to its parent.
3em, 3 times that or 1em, the same size as my parent. You can even do decimal points like .5, half, 50%, .2, 20%. This is useful because you can set font-size of the body to be whatever, and all its children that have their sizing in em will listen to that and resize immediately. This way you don’t have to specify how many pixels for every single child. You define it once on the body, and everybody will resize themselves.
Except there’s one problem. EM inherits from the direct parent, not from the body. So in our example we’re lucky the H1 is directly on the body but...
if you have children inside children, they’re going to affect each other’s size. Say you have a P tag with A tags inside it. Say body font size is 20px. If my P tag is 2em, that makes it 40px, and my A tag is 3em, that makes the A 3 times as big as the P, so 40x3, 120px. This can get really confusing really fast. I don’t like it. I know a bunch of you are gonna get mad at me cuz you disagree with me, and that’s ok. You can start your own ColorCode on youTube and call it ColorChode and make your own videos and disagree.
Anyway, back to EM.
In real world applications you have several layers of elements inside one another, so it becomes really difficult trying to find out how big something is if you use relative values and have to keep going up the chain of parents and calculate. What is .7em of 2em of .5em of 14 pixels? That’s cray cray. Lucky for us, there is a solution. And it’s a solution that I personally like a lot, it’s not perfect but it covers 99% of what I want. And that is REM. Root EM, whatever EM stands for. I probably should have googled that. HAHA Actually I did, And I didn’t find a satisfactory answer. Anyway, REM is the exact same thing as EM except it’s not relative to the inherited font size from the parent, it’s relative to the root element, your beloved HTML tag. Remember that guy? This means you can give your HTML element a size. Say 14px. And any element inside your page, anywhere, regardless of who their parent is, given an REM font size, will then resize relative to 14px. This is in my opinion the cleanest way to specify font size, have it be easy to read, and still flexible like EM.
So,... I think it’s time for a demo. I just gave you aloooot of information. Let’s go back to our profile page and clean up them sizes using both absolute and relative units. I’ll see you there.

[vishavjeetsharma]

The term "em" comes from the printing industry, where it was used to refer to the width of the capital letter M in a particular font. In the early days of typesetting, the width of the M was used as a standard unit of measure because it was typically the widest letter in a font and therefore a good reference point.

[macccabes]

This guy is so underrated. Just subscribed! the information you give is so digestible and your personality 🔥 Your videos are always enjoyable to watch

[nostresscoding]

Bro you are fantastic, you are an amazing teacher, I like the way you explain your points. I have subscribed, I hope your channel gets bigger.

[retroman]

You are so good at explaining. you get to the point directly thank you so much!!!

[gianluca_ruggieri]

I sincerely believe you did cram so hard learning that now you became a very good instructor..
Thanks

[namrathak]

I found your tutorials on Udemy, and eventually got here. Excellent videos for beginners. The world needs more teachers like you who can make learning fun. Thank you!
Also, found out that em
means “emphemeral unit” which means relative to it's current font.

[adnansafaraz]

This is so useful! and i hope your channel get bigger and bigger! keep up the good work, and explaining stuff like this in the way beginner like me can easily understand of what you're saying.

[mojtabahbb]

از جنوب استان کرمان با فیلتر شکن و کیفیت 240 تمام ویدیوهات رو دیدم
ممنون خیلی به دردم خورد

[prakashraj]

Wow criminally underrated... such a great teacher you're

[DjCppsNews]

How about we make EM stand for expected measurement and REM to stand for relative to the expected measurement (based on the set HTML font size parent element)? What do you guys think?

[adesh]

Thanks for the tutorial this is something i didnt care about.. till now :D

[thestarinthesky_]

Another solution is to use "pixel" instead of "em". Is this statement OK?

[thestarinthesky_]

Wow! Such an amazing video. Thank you so much. You also made me laugh a lot 😂

[bobolino]

So why don't we just use REM everywhere?