Understand EM & REM Font Size for Elementor and what is the Parent and the Root HTML?

hey welcome back a question was asked about one of our recent videos where we looked into global font global colours and typography it was could we go into a bit more detail between the difference between em and rem now em and rem are very good when you wanna create some responsive text for your website because it's quite common for us to use pixels and i'm just gonna show you what pixels are em and rem and how we can try and control them a little bit because there's one big aspect a lot of videos out there a lot of tutorials and a lot of guides they touch on the subject they repeat or regurgitate a lot of information that everyone else has but they kind of forget this is really spell out what is the parent and the root html and if anyone has looked into em or rem you'll know exactly what i'm talking about so stick around hey i'm imran web squadron i hope you like subscribe and follow i hope you share this video if you found it of interest and it helps you understand typography a little bit better but hey we're here to help you with elementor wordpress and get the best out of it for you your clients and of course your businesses so we have at the moment a section with three columns we have a well we have some buttons at the top ignore the buttons that's just me telling you what we've got here we have header one we have another header and we have some text header one header text header on header text okay you will notice that there are different values column one has 32 pixels meaning if i click into this header over here and i go to don't worry about the typography don't worry about the font or anything like that if i go over to let me just click it there into that header and i go to style and i go to typography it is 32 pixels you can see it there okay that is 32 pixels this is 64 pixels and this is a text editor and this is now 16 pixels now what have i gone for 60 32 64 and 16 it is not uncommon for a lot of themes and a lot of templates that you will use within elementor or just wordpress generally where the basic um value for your text is 16. so the basic text any text you drop in it's basically 16 pixels okay um and there's a reason for that as well in the moment so basically 16 so this is your basic text this is double the basic text and this is four times the basic text of 16 pixels just stay with me on this case it's all going to make sense we then have another column and this time rather than using pixel if we go to the style for this header over here instead of 16 pixels we have used two em right so what i'm trying to get across here is if it the basic um sizing for everything is 16 pixels as the basic you know this is where we start off with this is the basic by me saying 2em it is 2 times 16 equals 32 which is what we have i think about that which is what we have over here we have 4 em here because 4 times 16 is 64 which is what we have here on this text over here if i click it and go to style i've got a typography the em is one can we see that there we go we have one if i had done two it would now be 2em which is 32. by having one it is now 16 1 times 16 equals 16. i could even do 0.5 right that is now a pixel size of 8 because the standard is 16 pixels 0.5 em is going to be half of 16 which is eight let's put it back to uh one for now okay just stay with me on this then we have rem now you'll notice the rem two four and one is exactly the same size as the em because at the moment there is no differentiation between them okay so so because the standard is 16 if i pick four or if i pick uh well four em or four rem they're all gonna be four times 16 which is 64 pixels okay and if you stare at it you're gonna try and find a difference don't bother they are exactly the same size okay that is the standard now pixels won't change depending on your screen size or whatever you do so if i say header one is 64 pixels over here it will always be 64 pixels no matter what screen size you do well actually it doesn't matter because obviously when you start to go into responsive mode you can start to just so if i just click over here if i go to style if i go to typography if i click here you can have a different size for your tablet and your mobile okay so when you start doing responsive i might say right on the desktop this is 64 pixel on the mobile i want it to be 50 pixel right so you can if modify it on the fly or however you want the thing about em and rem though is that they will become responsive depending on screen size sometimes it won't change much i want to just let you know though sometimes it doesn't change much sometimes depending on the screen size and the amount of content you got you know it might suddenly start to shrink or adjust and in terms of accessibility in this day and age that can be quite important right the key question that everyone has both is that your em right even though the basic value is 16 your em is controlled or determined by the parent html the rem is determined by the root html and this is the thing that gets very overlooked and a lot of guidelines and tutorials out there where the hell is the pair in html and what is the root html okay what is the difference and where am i going to find them let me try and answer that right now if we click over well i'm not gonna click anywhere here i'm gonna go over to the hamburger and i'm gonna go it's actually over there and i'm gonna click on the site settings now i don't need to worry about the global colors and the global fonts the global colors is defines the color we're not touching that the global font is going to define this standard font but again we're not touching that okay because your global font i'm sure you've realized now from my previous video does not affect the size it affects the font family so you might pick roboto or ariel or helvetica or whatever you want to go for at you know it affects that we're worried about the sizing if i go to typography right you know that you've got body link header one header two header free header four if you want to set a default size for header 1 header 2 header 3 whatever you can do that here or what you really want to be doing is just touching one parent html and if we go over to typography and we go to body and i go as it's over here i don't know why i keep pointing there if it's over there if we go to typography right i'm not going to touch the family because it's not going to make any difference because that's controlled by the global font if i go to the size okay and i type in here watch this okay watch this nothing happened why because i've just put the same value as the default value for the theme okay nearly all of them are going to be 16. so i'm saying the size the pixel size is 16 right so now it's no different from here however header 1 over here 2em is 2 times 16 this is 4 times 16 and this is 1 times 16 so i'm looking at the middle column by the way okay so we haven't changed anything but watch what happens when i now change this to be 10. ah what do we have here this now is actually 20 pixels right because it's two times ten over there two times ten the line underneath is actually 40 pixels because now four times 10 and over here we have 1 x 10 so if i was to go over here and change this to be 10 pixels it is going to match that let me prove it to you let us go update let us now close this down like this just like this go over here and let's just change this to be a 10. right just to make my point look that is not the same size as the text in column two let me put it back to 16. right are we clear now so the em the parent html that is actually touched and messed around with by site settings typography body right body so if i go into here and i change this now to be uh five look at that the two the four and the one are all in relation to five so the two is now ten the four will be four times five which is twenty and the one times five is five but i could also do this right so now the two em is two times fifty which is a hundred let's just put this back to ten okay that is how you set your baseline so you're now saying the baseline is 10 pixels and everything else all of the ems are in relation to that remember when you're doing this you can use decimals so i've put 2 em it could be 2.1 em which would be 2.1 times 10 which would be 21 pixel okay so you can be a bit dynamic and creative with what you're doing it so that is how we touched a pair in html but the rem has not changed the rem is still static even though i changed the body typography now if you want to change the rem you've actually got to add in a bit of html code if you've got elementor pro you can drop this arm anywhere you want if you haven't got elementor pro and you're using elementor free what you need to do is go back to your theme go back to the customized css and drop in a bit of code we're gonna do that right now appearance in your wordpress dashboard and customize okay you go to additional css every theme will have this right and you drop this bit of code in and i hope you can see this and again it will be in the description html curly bracket font size colon 16 pixel or px semicolon close bracket okay so there's the code right that's all it is and at the moment i've dropped that in and it's made zero difference to the content on the left hand side look watch what happens when i take it away no difference add it back in again no difference no difference whatsoever but what happens if i go over here and i now type in 10 look at that it now matches column two so typography was ten i should point the pick typography was ten and now the html value that we've entered there now controls the rem up here but if i change this to be 20 right now header 1 which is 2 rem is 2 x 20 header 1 the next one is 4 rem 4 x 20 which is 80 and the text we have over here that's going to be 1 times 20 it is 20 pixel so by me modifying putting this code in here that is the root html and by doing that okay and here's the other key thing okay now when you start to use rem anywhere on the website so if you say one rem for the padding it will now do 20 pixel because you've now said this the the size is 20 pixel okay but in terms of text typography which is what we focus on here and i'm just going to change this now to be um let's just go for 12. just so we have a slight different sizing there okay let me publish that pixel stays as pixel until you mess around with it em is controlled by typography as your parent html and the customized css where we put a html of font size 12 is the root html now i have found that i am now leaning more towards rem i used to use em quite a bit but rem seems to be more favored by a lot of people there are there's gonna be arguments for using em rem you know back and forth some will say no i'm gonna stick to pixel you kind of have to find what works for you if you care about responsiveness and websites you gotta go for em or rem i'm leaning more towards rem i hope this helps you understand a little bit better how you actually control the em and the rem where's the pair in html and where's the root html and if not i've probably confused you ten times more than i really wanted to but i hope that helps and it answers some of your questions hey like subscribe and follow please please share this video share it everywhere you can let everyone know about this because this stuff you need to know because if you don't know but i don't know but at least you know now take care and i'll see you soon

Channel: Web Squadron

Views: 518

Keywords: Imran, Siddiq, Imran Siddiq, WebSquadron, Website, Squadron, Elementor, Elementor Pro, Tips, Hints, Wordpress, Elementor 101, Elementor Course, Web, Web Design, How to build a website, REM, EM, Font Size, Repsonsive Text, Understand EM & REM Font Size for Elementor and what is the Parent and the Root HTML?, Parent HTML, Root HTML, PX, PX EM REM

Id: LVtL2qDty4s

Length: 13min 39sec (819 seconds)

Published: Tue Sep 21 2021