0:00:00
All right, I feel like this lesson in particular and probably the next lesson as well both need a disclaimer. I am well aware that what I’m about to introduce you to and what I’m about to teach you could invoke a specific reaction. Kind of like the reaction of that meme where the kid runs around the corner, sees something, immediately gets startled and runs the other direction. It could absolutely invoke that reaction in you. to get startled and runs the other direction. It could absolutely invoke that reaction in you, but I’m afraid we have to introduce it. And I know a lot of content creators, course creators, whatever would probably hide this content to later in the course because it might be considered overwhelming, but I don’t want to teach you the wrong way to do things and then come back later and say, Oh, actually, all that stuff you already learned needs to be relearned a different way So I don’t want to play that game with you The unit that you’re gonna see many many people use is the pixels unit and what I will tell you right off the bat is If you see people using pixels in their web design and they’re a course creator content Well, it’s just a red flag. It’s a red flag because pixels are a thing of the past We’re not using pixels in modern web design anymore.
0:01:15
I’m going to show you exactly why we don’t use pixels anymore. But unfortunately, because we don’t use pixels anymore, we can’t go any further into page building land and web design land until you understand what all of the units mean and what units are available to you. If we’re not using pixels, what will we be using? Well, that’s exactly what we’re going to cover in this lesson. So let’s go ahead and jump into it. I also want to give the disclaimer that we are not covering every available unit. If you think this is intimidating or a little bit confusing or whatever, number one, I empathize with you, but number two, this isn’t even all of it.
0:01:55
Like there, there is much more where this came from. What we are going to cover in this lesson though is the most practical units, the things that you will be using over and over and over again. I also want to say that, and trust me, we need these disclaimers. I don’t want you to run for the hills. I do not want you to just exit the course, throw up your hands and say, I’m not going any further in this. I want you to continue going. I want you to trust me. I want you to trust that as we get further into this course, this stuff will make more and more sense to you.
0:02:31
It will become easier and easier. It’s not as hard as it seems. It’s not as complicated as it seems. I need you to trust me. I’m not babying you, okay? I’m showing you this up front, and we’re gonna work through it together, and I promise it’s going to be easy at some point for you. Let’s start with this concept of pixels because all of these units that we’re going to cover are relative units except for pixels.
0:02:59
Pixels are a static or absolute unit and this is exactly why we don’t use them anymore. They should no longer be used as the primary unit as you can see right here. They are not accessible. This is one of the biggest issues with pixel units. They are not accessible. If you don’t know what accessible means or what accessibility is, it basically means that the pixel unit does not respond to user preference. And there are many users, let’s say users with poor eyesight, right?
0:03:33
So users with poor eyesight, like older users, users need to be able to scale up the font size of web pages in order to have a good experience. Now, accessibility covers a whole entire range of disabilities. It goes into colors. It goes into a lot of different things. But in terms of pixel units, the main accessibility factor that we are concerned with is, does the text on our website respond to the preference of the user. And so the example I’m giving you is, we have a user who has poor eyesight, and therefore they want all web pages that they view to have larger text.
0:04:13
And so browsers give the user this ability. And accessibility is a very important topic. I’m not going to dive deep into accessibility in this particular lesson, but we are going to talk about accessibility throughout this course. Every time we run into an area where accessibility is a concern, I am going to point it out to you because accessibility is very important. And this is no exception. This is one of those areas. And this happens to be an area that affects your entire website. If you use pixels throughout your website, your website is not accessible. So this is the settings panel for Chrome right here and you can see that a user can come in and they can set or effectively change the font size of all of the text across the website unless the website uses pixels at which point the user cannot override it. The website does not respect their preferences and is therefore not accessible. So let’s say a user comes in, I want you to watch this text right here versus all of the other text on this page. The user has poor eyesight and so they come in and they say I want all of my text to be 28 pixels instead of 16. 16 is the default across almost all modern browsers but again that’s too small for a lot of users. So users, and it doesn’t really matter what they choose what maybe they choose 18 maybe they choose 28 but as you can see all of this content respects the user’s preference But this content up here does not respect the user’s preference. What exactly is going on here?
0:05:54
Well, if I inspect this text right here, we can see that it was set to 20 pixels, which is a static absolute unit. It is not a relative unit. It’s not relative to anything. We are saying you are going to be 20 pixels no matter what. That is a problem because now we see it is stuck at 20, even though the user needs it to be bigger. And maybe sometimes the user needs it to be smaller. It doesn’t matter what direction it goes in. The basic fact here is that this is not accessible to the user and therefore is undesirable. So what I’m going to do is I’m going to go back to my preferences. I’m going to bring that, well it didn’t bring the preferences window back up for me. So what I’m going to do is go down to appearance and then I’m going to go to custom fonts and I’m going to set that back to 16. So if you want to play with your own website, that’s exactly how to do it.
0:06:51
You just go to your browser preferences. It’s going to be somewhere under like appearance or accessibility or something like that. And then find the custom font size and then you can change your settings and see if your website responds and on and on and on. Okay, so we talked about accessibility. Now when should pixels still be used? There is one really important case where pixels should still be used, and that is in media queries. So when you’re writing media queries and you may not even know what a media query is, we haven’t talked about media queries yet, but when we get to the section on media queries and responsive design, you still want to use pixels for defining the media query width, okay?
0:07:33
So that is one area where pixels are still being used because we don’t want those values to be relative to anything. We want them to be static and absolute. And the last thing we need to talk about when we talk about pixels, because I know what the objection is gonna be. I know what people are going to say. They’re gonna say, Kevin, my designer in Figma, because if you open Figma or Adobe XD or any design tool, Illustrator, the standard in these tools is still static absolute values and they use pixels very, very commonly.
0:08:07
And so someone will say, Kevin, my designer gave me this design and it has everything in pixels and I need to make it perfect. I need to make it match perfectly. That is a thing of the past. That pixel perfect design is 100% dead. Nobody in modern web design cares or attempts to achieve pixel-perfect design. This is somebody working in the old-school mindset of web design. There is no such thing as pixel-perfect design. I’m not even going to go into the science of pixels and resolution from monitor to monitor and device to device.
0:08:46
Pixel-perfect design in the modern world where there are multiple different device sizes, like dozens of them, multiple resolutions, multiple renderings of a pixel. Pixel perfect design is not even technically, scientifically achievable. So the fact that people are still trying to advocate for pixel perfect design in any capacity is, quite frankly, it’s silly. And second, when we’re thinking about responsive design, and you’re gonna see more of this in the next lesson, I’m often not even using units at all.
0:09:22
I’m using math functions to make things automatically responsive and fluidly scale between different devices. And there’s no setting for that in these design tools. You can’t mimic that in many of these design tools. So, pixel perfect design is out the window. What we’re wanting to achieve in our web designs is still rhythm and balance and scale and all of these other things that are very important to design. But like matching pixel for pixel is not something that we’re concerned with achieving anymore. Okay. So that is all you need to know about pixels.
0:09:56
We are trying desperately to avoid using pixels. We don’t want to be using those anymore. So now let’s talk about what we should be using. What if we’re not going to use pixels Kevin? What should we be using instead? Well there is a relative value that is still somewhat static and absolute and that is the rim. Now it’s not fully static and absolute but it’s much more static and absolute than something like an M which we’re going to talk about in just a second. But let’s stick with REM for now. So REM, and this is gonna be complicated enough. I’m scared for you.
0:10:35
I really hope you trust me. I really hope that you are gonna stick with me because some of this stuff can feel very technical and I don’t want you, like I said earlier, running for the hills. I just really hope that you trust that I am going to continue making this easier and easier as we go and that you’re gonna get more and more confident as we go. I totally empathize with you as we get into this discussion of RIM, where you’re like, wow, this is starting to feel a little overwhelming.
0:11:02
It is all going to get easier, I promise you. And at some point when you’re building websites, all of this stuff is second nature, you don’t even have to think about it anymore. And honestly, some of it is set it and forget it. So you just have to learn it once. And then when you set it the way you want it, you don’t have to think about it ever again. And that’s kind of the case with some of what we’re about to talk about. Okay. I digress. So what is a REM unit? A REM unit is relative to the root font size of a website.
0:11:32
Now what is the root font size of a website and where is the root font size declared? Okay, so the basic root font size of a website is 100%. That’s a relative unit, which defers to the browser. So like I said, most browsers set a default font size of 16 pixels. So one rem, rem is relative to the root font size. So one rem is equal to 16 pixels. The browser says our root font size is 16. And so one rim says, cool, we’re going to be 100% of that. So one rim is 16 pixels.
0:12:12
OK, perfect. So the problem is you can change the root font size, right? Now, before we get into this discussion, let’s go back to user preference. The reason you saw this font size scale is because it is defined in rims. So if we take a look at this it is set to 2 rim. So what is 2 times 16? It is 32. Now this is not 32 pixels font size. That’s why this gets confusing because on this particular website and in Bricks Builder in particular the root font size is actually set to something different than a hundred percent. And we’re going to talk about that in just a second. But normally, if I was in CodePen and I was writing CSS and I didn’t change my root font size, one rem would be equal to 16 pixels.
0:13:02
And so at two rem, you’re basically saying two times the root font size and as that root font size changed with that little accessibility slider where the person with poor vision was like, I want my fonts to be bigger, they were changing the root font size. That’s what that was doing. And so my two rim was recalculating what the new font size should be based on their preference, okay?
0:13:25
So one rim is equal 16 pixels at 100%. Let’s talk about this line right here and why you’re looking at two rim of text that’s definitely not 32 pixels. So I’m gonna go over here into Bricks and I’m going to go to theme styles and I’m going to come down to typography and you’re going to see right here it says HTML font size, which is effectively the root font size. And you’re going to see that this is set to 62.5% by default. Even when, even though Bricks does this by default, I actually did this to all of my websites by default.
0:14:01
And we’re going to talk about why you would want to do this. It’s actually a trick, okay? And it is a trick to change the value of one rim, the default value of one rim. And this is because when you’re doing web design and page building, and you’re like, what should I use? Should it be 3.2 rim? Should it be 2.4 rim, 2.8 rim? The math, when one rim equals 16 pixels is a bit more complicated than the math when one rim equals 10 pixels.
0:14:32
Let’s say in my head or in Figma, I see, oh, there’s 30 pixels of spacing. Well, I know that’s three rim. Three times 10 is 30. That’s a very easy calculation for me to do in my head. So if I’m roughly gauging things based on pixels, because pixels are the reference unit. So if I’m trying to use a relative unit, but I’m basing it on pixels, which are my reference unit, I need to do a little calculation in my head.
0:15:00
Again, 30 pixels I know is three rem, because 30 divided by 10 is three. And so that’s very easy to do in my head. But the minute you’re like, no, one rem is 16 pixels, now things get a little bit tougher, right? So I say it needs to be roughly 60 pixels, six rim. But if it’s equal to 16, how hard is that math to do in your head? Now, some of you may be mathematicians, right? You’re like, no, no problem.
0:15:25
I can do 60 divided by 16 in my head, like in a split second, but I can’t. I’m a dummy when it comes to math. So it helps me and it helps a lot of people if one rim just equals 10 pixels. And the way we make that happen is with a trick of setting the root font size to 62.5% instead of a hundred percent. This, this is just kind of like a quality of life issue when it comes to using rims throughout a web design, throughout an entire website. So every builder that you use will have this in a different area, right?
0:15:58
In Bricsys and theme styles, under typography, some page builders may not let you change the root font size. And if that’s the case, you can always change it with an external style sheet if you want to. But you really need to inspect how the builder is handling this and what some potential ramifications might be of doing this. If you have full control over your website and all of your values and all of that, there should be zero negative ramifications of doing this. Okay. All right. So that’s kind of an explanation. Again, I know you want to run for the hills. Just you need to trust me that this is kind of a set it and forget it thing and you never have to worry about it ever again.
0:16:40
But we do need to know what rims are. And in order to know what rims are, we have to know what a root font size is. So when do we use rims? Now, it’s best used, like I said, to kind of mimic fixed or absolute values because 3Rim will always equal 30 pixels at normal font scaling and using the 62.5% root font size trick, which I, again, I use on all of my websites. So if I need a roughly 30 pixels of padding or I need a font to be roughly 30 pixels high. RIM is a really good static, like it’s a relative unit, but it maps fairly statically to pixels where IMS does not do this at all whatsoever. Now there are times where RIM may not be the best option.
0:17:34
And here’s something that’s very, very unfortunate about this training. And I didn’t say this in the beginning, but I need to say it now. There are no there’s no fixed list of situations where it’s like always use REM here, always use M here, always use this other unit here, always use this other unit here. It’s going to be a dynamic situation. So it’s going to be where you’re building a site, you’re working on a specific element, you need to know what units are available to you and what units should be used in this situation to most likely achieve the outcome that you’re hoping for. And that’s gonna be based on various pros and cons. And it’s just, I know, it’s not the answer that you wanted.
0:18:15
It’s not a nice, neat little thing. It adds more complication, it adds more confusion, it adds more feeling of overwhelm. Again, experience is your best friend. The more you do this, the more experience you are going to get and the more comfortable you are going to be with all of this stuff. But what you don’t want to do is say, oh, I’m gonna keep marching forward in web design and not pay attention to any of this stuff.
0:18:39
You are never going to be a professional. You are never going to really know what you are doing. You’re gonna build sites that are inaccessible and have a bunch of other issues. This is just unfortunately stuff you have to learn. Okay. All right. So let’s talk about this button right here. Let’s give a little bit of an example. Here’s a, here’s a situation where I would not recommend using rims. I am going to add padding to this button. I’m going to add three rim of padding here. Let’s do two rim, two rim of padding on the top, two rim of padding on the bottom.
0:19:09
I’m going to use three rim of padding on the sides, and then I’m going to save. So this padding looks good on this button, right? Because this font size is this size. But if this font size gets bigger, this padding is going to look a little awkward. It’s going to look like we don’t have enough padding. Okay. So I’m going to show you that right now. So I’m going to go to typography. I’m going to change the font size of this button and I’m going to use rims to set the font size. This doesn’t matter, but I’m going to use rims because that’s the topic we’re on. I’m going to use rims to set the font size here. And I’m going to do something like six rim. And you see the button got much, much, much larger. Well, the font size in the button got much, much, much larger. The padding did not change. The padding did not adjust when I adjusted the font size. Why? Because like I said, rim is relative to the root font size, not the font size of an element that you happen to be working on.
0:20:09
Sometimes that’s good, but in this case, it’s not so good because this is not enough padding for a container with this size of a font in it. So that’s a problem. So it’s an area where we learn through experience, rim’s probably not the best unit for that particular situation. So now what we need to do is we need to move on to Ms. And Ms have their own set of complications, a whole new entire list of cons, but also has some pros. So where rim was relative to the root font size, M is relative to the elements calculated font size, the element that you happen to be working on right now.
0:20:52
And you could think of M as a ratio. So 1.5 M is 1.5 times the effective or calculated font size of the current element. You’ll see what I mean in just a second, okay? This is best used in situations where things need to respond to changes in the calculated font size, e.g. buttons. That’s why I did this button example here, and we’re gonna repeat the button example right here so that you can see the difference clearly between rims and ms.
0:21:25
But I do need to caution you, and this is where things get a little bit more complicated. They get a little bit more murky and dark. M units compound, and they are influenced by the font size of parent containers. And this is actually why the rim unit was introduced because M’s are often undesirable as a relative unit. There are certain situations where they work really well, certain situations where they should be avoided at all costs. For example, do not use M’s for font sizes. It is what nightmares are made out of. And if anybody tells you that you should be using M’s for font sizes, I would run for the hills.
0:22:07
That is a multiple red flag situation right there. Okay, so let’s go back to our button example. How exactly does this work? So I’m going to go to layout and padding and I’m going to say this is going to be 2M and 2M and then this is going to be 3M and 3M. And automatically right off the bat. Remember when these were rems, right? Two, two, three, three rems? They didn’t look like this, right? So what is it calculating based on?
0:22:33
Well, it’s clearly not calculating based off of the root. So let’s do something now where we change the font size of the button. And I’m gonna use rems for the font size, okay? So I think I made the other one six rems. I’m gonna make this six rim as well. And now you see, wow, we have a clear difference in how this is behaving. Over here, this is six rim of text size right here, a font size, but the padding was set in rims.
0:23:04
Two, let’s see what it was again. Layout, two rim up top, which is roughly 20 pixels. Two rim down below, that’s roughly 20 pixels. Three and three, that’s roughly 30 pixels on each side. Rims are saying we don’t really care what happens with the text in this button. We are relative to the root font size. This text can do whatever it wants, but we’re going to say more or less static relative to the root font size. Whereas what do Ms do? Ms say, oh, we actually do care about the font size of the text that makes up this button.
0:23:38
So when you set that text to be bigger, we, the padding units right here, are going to get bigger as well because we are set in Ms. And so this is a desirable situation. The text got bigger, so the padding got bigger, so everything looks proportional. Whereas this text got bigger, the padding did not get bigger, and it looks out of proportion. So things do not look nearly as balanced as they do down here.
0:24:03
This is an area where again you need to decide what am I trying to achieve? What do I want the behavior to be? Now, why should you not use IMS for font sizes and and let’s cover this caution statement right here of what do you need to really be concerned about when you’re using IMS. So I’m going to grab this text right here, and we are going to go to typography. And I am going to set this to 1M. So this text size is equal to 1M. Now what I’m gonna do is go to this container, okay, that is containing the text right here, and I’m going to set a font size on this container. And my font size on the container is going to be 6Rim.
0:24:48
And oh my gosh, this is set to 1M, but that looks quite big for just like 1M, what’s going on here? It’s actually taking the 1M and saying, oh, I need to account for what my parent is setting the font size to as well. So if I go to my parent and see that it’s set to 6RM, well, this is gonna be, remember I said M’s are a ratio, one times the calculated root font size, and now we’re taking into account the parent.
0:25:16
It’s gonna be one times six rem, which is 60 pixels, and that’s exactly what we’re seeing here. But things get even more convoluted, okay? So let’s set this container instead to three rem, like that. So now it’s three rem. Oh, actually, I’m gonna use ems. So we’re gonna say, and we’ll do two. So I’m gonna set two ems on this container. Then the text is set to one M and now watch what’s going to happen. I’m going to wrap this in a block, just another box, basically more or less. And on that box, that’s wrapping these other boxes.
0:25:52
I am going to set another root font size, and this is going to be, let’s do the six rem again. And Whoa, what is going on? This is like, it’s getting insane, right? We’ve got a little bit of an inception issue going on. So I’m going to break this down for you. This block is saying be 60 pixels more or less. That’s six rems, right? Six times 10 is 60. So this container is saying be 60 pixels, but that text is clearly not being 60 pixels. So what’s going on? So we go into the next element down, which is the container. The container is saying, ooh, everything in this container should be two times the calculated font size of what we’re in.
0:26:32
Well, what we’re in is 60. So now immediately it got amplified to 120. So 2M took us from 60 pixels to 120 pixels. And then what we did is we came in here and said, this font size should actually be 1M. We’re already at 120. What’s 120 times one? It is 120. And so that’s our final thing. But imagine that this was set to 1.5.
0:26:55
Oh gosh, it’s amplifying even more. Now it’s saying we were 120, we need to be 1.5 times 120. And you see how this, it just gets out of control. And you have no idea why a text is the size that it is. And this can happen with heights, like whatever you use an M unit on, this can happen to. So you always have to be wary of the fact that it is going to calculate based on every parent element that it has.
0:27:26
Every parent element is going to influence, especially if you’re using Ms within all of those parent elements. So this can get out of control very, very, very fast. You need to be very careful when you use M units because they do compound. And a lot of people just, it gets them all out of whack. They don’t know why things are happening the way that they are. And it’s because M units are known to be problematic in certain situations.
0:27:53
Okay, let’s move on and talk about percentages. Percentages, man, let’s just take a breather. Let’s take a break because this is an area where things are just going to make sense. Okay, like if that stuff we just talked about was a little overwhelming, here’s where we’re going to get back on track. All right, we’re going to get our confidence back talking about percentages. So we see here that there is a button that is 60% wide and this is a button that’s 60% wide. I lied to you, didn’t I? I lied to you because you’re like, Kevin, that doesn’t make any damn sense whatsoever right there.
0:28:27
It does actually though. It does calm down, don’t worry. It actually does make a lot of sense. There’s just something happening that you can’t actually see until I point it out to you and then you go, oh, that makes perfect sense. Okay, so this button is 60% wide and this button is 60% wide. What you need to know is that this is relative to the dimensions of the parent element and this makes perfect sense.
0:28:50
If I put a box inside of a box, that box doesn’t naturally want to break out of that box. So if I say be 50% it’s like 50% of what? Like well 50% of the box you’re in, right? So the element is in a box. If that box is a certain width and I say hey be 50% it’s gonna be 50% of its parents box, okay? So 50% of the parent container. So what do we see? Here’s the part you couldn’t see. Here’s the container width right here, in that blue outline. The button is 60% of its parent. So 60% is equivalent to this. Now I will reveal why this button is 60% wide, but obviously not the same width as the other button.
0:29:31
It’s because its parent container is smaller. So it is in a parent container that is as wide as this button right here. And so it’s like, oh, I need to calculate based on my actual parent. Right. And it has a different width parent. Thus, it is a different width button. And so it will maintain this all the way down across various breakpoints. And this is one reason why you have to be careful with percentages. This container goes all the way across from gutter to gutter. This container does not.
0:30:01
This container was based on a percentage. Its child was based on a percentage. And you can see that now we’re getting things to be very, very, very squish. So this is an area where you have to be very careful when using percentages, because as it scales down, your device gets very narrow. And those percentages that you set on desktop, they made a lot of sense on desktop. They make absolutely no sense on a mobile device. And so I do want to caution you, be careful with the way that you use percentages. Now, again, just because it’s 60% on desktop, doesn’t mean it has to stay that way. You can give it a new instruction at any break point you want, but you do need to know that percentage values can become problematic on various devices.
0:30:48
So that’s how percentage works. It’s relative to the parent element. It’s very, very straightforward. There’s not too much to talk about there. So let’s move on to this unit called CH. CH stands for character, and it is relative to the width of the zero character of the current font that you are using. And this is a very, very helpful unit. It’s a unit that I use all the time. And I’m just going to read this paragraph to you because it’s very important for you to understand, but then we’re gonna play with this paragraph. So let me get my reading hat on, kids, okay? There have been plenty of studies on the readability of text on the internet.
0:31:27
Did you know that based on these studies, normal paragraph text should have a width of between 50 and 75 characters? The paragraph you’re reading now is too wide and needs to be fixed. Sometimes our layouts fix this for us by placing text next to other elements, which creates a natural containment. But this is not always the case. Sometimes we need to identify text that’s too wide and set a maximum width. In these cases, the CH unit is really, really handy. And what you are looking at on our screen right now is one of the biggest beginner mistakes in web design.
0:31:58
And that is creating text that goes all the way across the freaking screen and On large screens like I have the person’s got neck problems because they’re reading text on your poorly designed Website and what we need to do is we need to make sure that we avoid those issues And if we have text like this, we need to change its effective width so what I’m going to do is I’m going to come in here to Layouts and I’m going to go down to Width. And really what we should be using is Max Width in these cases. That’s going to be a whole other lesson on how builders handle width versus max width. But remember, max width says you’re not allowed to get bigger, but you are allowed to get smaller. And we are talking about responsive design.
0:32:43
So as the device gets smaller, we want the elements to be able to get smaller as well. When you set a fixed width and the device gets smaller, they’re like, I don’t care that the device is smaller. I was told to be this width, so I’m going to be this width. And then you end up with overflow issues and you break your design on mobile devices. So max width prevents that. Max width is automatically responsive. You set a width, but it’s allowed to get smaller as the device gets smaller.
0:33:10
It can just never get bigger than the width you set. That’s what max width means. I mean, it makes sense, right? It’s called maximum width. Okay, instead of saying, like, here’s what the amateurs, the beginners would do. They’d say 640 pixels or something like that. Well, we already know, and that’s actually too small. Let’s do 740 or 940 or something like that. It doesn’t really matter what the number is.
0:33:34
Anybody using pixels, like I said before, that’s a major red flag. Anybody using pixels in this scenario Definitely a red flag because pixels have nothing to do Really with the text that we’re looking at and they have nothing to do with this UX of text line length What does is the number of characters and therefore we should be using CH units in this Scenario, so watch what I can do. It said in the paragraph right here between 50 and 75 characters. So I’m gonna say 75 characters, 75 CH. And now this is on the top end of the readable width of text on the internet.
0:34:13
Now we come down here, and actually it’s not even the internet, it’s in books, magazines, whatever, but books and magazines naturally have smaller dimensions where it’s not a problem, right? Now I’m gonna go down to the low end and we’re gonna do 50 CH. So this is what 50 CH looks like. But the point here is I’m setting a width based on character count and this is insanely useful. And there are other areas where we may actually have to do math and it’s important to do math based on a character count and not on just some arbitrary random values. So you need to know the CH unit, you need to know what it does, and the thing you need to know about it is it’s an approximation.
0:34:51
If I count the number of characters here it’s not always going to be exactly 50. Number one some words are longer and thus they get broken to the next line because we don’t want to break them in half right so that is always going to come into play but again we need to know how it’s calculated it’s calculated based on the zero character. Not all of these characters are exactly the same width. So it’s the CH is based on averages and so it’s not going to be an exact science. But you want to use characters because it’s much more exact than just a pixel width. It’s much more exact than rims or M’s or VH’s or VW’s or anything else that you might want to use because we’re dealing with text. When you’re dealing with text, use a text based value like CH. That is a really, really good way to go. Okay, let’s move on to viewport units.
0:35:43
So viewport units, what are they relative to? Remember I said all these things are relative. Relative to the size of the viewport. What is the viewport? The viewport is the device that is viewing the website. That could be a tablet, a phone, a laptop, a desktop, a big desktop like mine, got a lot of different options here. VW units, VH units, Vmin and Vmax are the most common viewport units that you are going to see and you need to know how to use them they’re very very important. So here’s a button that is 60 VW wide. So it is 60 now this is a basically think about it as a percent but remember percent the actual percent was relative to its parent container, whereas this percent is relative to the viewport.
0:36:30
It doesn’t care what its parent container is trying to do. It’s like you instructed me to be 60% of the viewport, therefore I’m gonna be 60% of the viewport. And in this case, it’s the viewport width. That’s the VW, right? The W in VW stands for width. The H in VH stands for height. So we can calculate based off the viewport height or calculate based off of the viewport width. I think that’s fairly easy to understand, not a big deal here, right?
0:37:02
So you see that this one is 20 VH tall, which means it’s 20% of my viewport height. So I want you to see here on the front end, let’s scroll down. I’m actually going to change the effective height of this page and I want you to see the height of this button change. So I’m gonna scroll this up. Look how that button is getting less tall. Why?
0:37:25
Because the height of the viewport is changing. Look how this button is getting less wide because the height of the viewport is, oh my God, that is really confusing. What, why is the width changing when you’re changing the height of the viewport? That’s really weird Well, we’re gonna talk about that in just a second. Okay, but I want you to see how these respond to the viewport Let’s look at these. Oh look how they’re all Responding dynamically to the changes of the viewport. This is really interesting and it’s really really really powerful So now let’s talk about V min and V max because I know you’re like, whoa, what’s going on here with these?
0:38:04
So Vmin is the smallest viewport dimension, okay? So here’s my monitor right here. Most monitors are wider than they are tall. So the tall, the X, I’m sorry, the Y, I’m dyslexic, have I said that before? So the Y-axis is the smallest of the two, right? The x-axis is longer because screens are wider than they are tall. So the y-axis is smaller. So when you say Vmin, you’re saying be 60% of the smaller side. The min is smaller, right?
0:38:38
So 60% of the smaller side. So in this, here you go, this obviously is wider than it is tall. So it’s going to be, which one? Which one is it based on? It’s based on the height. The height is the smaller of the two. And this is set, I know, it’s inception, right? I set the width to be based on the smallest side. The smallest side is actually the height. So as the height changes, the width of that button is gonna change, okay?
0:39:08
Now what is Vmax? Vmax says be 60%, that’s the value, 60% of the biggest side. So now the biggest side is obviously the x-axis, the width. So as the width changes, this Vmax button is going to change. See that? Now, if you got into a mobile, here’s where this is crazy, right? At some point, the axes are going to flip-flop, right? Because a phone, guess what, is taller than it is wide. It’s the opposite of a normal monitor. And so that’s where these things really, really come in handy. So now this V-Men was like, ooh, I was once calculating myself based on the height because the height was the smallest side, but now I’m gonna calculate myself based on the width because the width is the smallest side.
0:40:02
So these kind of respond dynamically again, to the size of the viewport. Now I do want to point out, and this is an area where you are going to want to have some practice, have some just experience using these units. But they are very, very powerful units. Now I want to talk about two units that are not available right now. So don’t use them. DVH and DVW, these are coming and they’re coming to solve a very specific problem. And the problem is very easily shown when we have something that is a 100 VH high, and this is typically seen more on mobile devices, okay? So because I can’t show you my mobile device right here, I mean I could, but man that’s a lot of extra work, and this is a free course, I mean, you’re just going to have to visualize with me.
0:40:47
All right, so, you make something 100 VH, what does that mean a hundred percent of the device height? Okay. Well, the problem is on these phones when you’re scrolling up and down the device height actually changes You’re like what what the hell does that mean Kevin might my phone stays the same size Well, you know, there’s a browser bar, right? You know There’s a little bar at the bottom with other little controls on it and when you’re scrolling down a lot of times those controls go away and when you’re scrolling up those controls reappear And so what happens when you’re telling a an element hey be a hundred percent of the viewport It doesn’t actually know what the heck you’re asking it to do because the viewport keeps changing when the controls are present The viewport height is only this amount and when those controls go away the viewport height is actually bigger and it has a lot of trouble responding dynamically to those changes.
0:41:43
And so in order to fix this, they’re coming out with dynamic viewport height and dynamic viewport width. And what these units are able to do, the browser with these units are able to say, oh, there’s a scroll bar over there, so the width is actually different. Oh, there’s a panel up here or a panel down here, so the height is actually different and it gives the element the ability to respond dynamically to what is happening with the actual device.
0:42:11
And that is very, very powerful. I cannot wait for DVH and DVW because it solves a ton of problems that we were running into with normal VH and normal VW units. Got it, who is here? Do we have like two viewers left? I mean, seriously, you have some thick skin if you are gonna continue on with this course after this lesson and next lesson.
0:42:35
If you’re still here, like more power to you, my friend. You are a real one. You are prepared for professionalism, okay? All right, so let’s talk about math functions and then we’re gonna play with a box. All right, so math functions, I’ll explain it like this. A lot of times, because we are building responsive websites, and building responsive websites is quite important in 2023 and beyond, it’s not appropriate to use a single unit. So I’ve shown you we can use rems, we can use ems, we can use this, we can use that, and a lot of times I’m not even using any of those.
0:43:10
I am using them, but I’m using them within a math function. And so in the next lesson, we’re gonna talk about the min function, the max function, the calc function, and the clamp function. But I’m going to prep you, because again, I will say this, no other course creator, I believe, I feel, no other course creator would introduce these concepts this early in a course, precisely because they would think you’re gonna be a little, right, and you’re gonna tap out.
0:43:39
And I know that’s not you. I know that is not you. Cause I know all those, all them, they left, they left, they left on section two of this lesson. You’re still here, which means you’re a real one, right? You’re going to continue on with this. And I knew this, I knew this about you, uh, that you were going to stick with this, but here’s the thing. I’ll say it again. Everything that we’re going to do in web design and page building from this point forward is going to require that you know these things and, and, and here’s the really, really key part. This stuff gives you superpowers.
0:44:11
What all of these other chumps are doing with their page building and their web design is they’re building it on desktop, then they’re going to the next break point, making all these little adjustments. Then they’re going to the next break point, making all these little adjustments. Then they’re going to the next break point, making all these little adjustments. They’re designing parts of their website four separate times for all of these breakpoints.
0:44:32
Why? Because they don’t understand math functions. What math functions allow you to do is more or less create a page that is automatically responsive. So you design it on desktop, but because of the practices that you followed, because you understand math functions, because you understand relative units, you click the next breakpoint down, it already looks fine. You click the next breakpoint down, hey look at that, it already looks fine.
0:45:00
You click the next breakpoint down, hey it already looks fine. And so all these other chumps going breakpoint to breakpoint to breakpoint to breakpoint, you’re just going to design something that is automatically responsive and then you’re going to love your life. You’re absolutely going to love your life. And you’re going to thank me and you’re going to say, I am so glad, Kevin, that you did not teach me how to do all of this stuff with pixels and just typical units and non-responsiveness. I’m not treating you like a chump.
0:45:28
I’m treating you like you are already a professional, okay? So that’s why I’m teaching you this stuff very, very early on in this course, and you’re going to thank me for it later and it’s all going to work out. It’s why I said you need to trust me that I am leading you to the promised land. I am not trying to overwhelm you or confuse you for no good reason. I am leading you my friends to the promised land. Let’s play with this box down here. Okay, so I’m going to scroll down. How do we want to style this box up? Well, we’re going to add some padding to it.
0:45:58
What units do we need to use for padding? Let’s just experiment. Let’s just play around. I’m going to start out with Ms. I’m going to say 2m, and we’ll just do that on all sides. Hey, that looks pretty good. Now, let’s save and let’s talk about this. If I change the font size, pop quiz. Pop quiz. If I change the font size of this box, what is going to happen to the padding?
0:46:23
You should have answered by now. Let’s see if you were right. So I’m gonna say Six rim you if you said Kevin that padding is going to grow according to the font size Scaling up you were absolutely correct. Now, let’s go back and let’s change this to rims So let’s do two rim and two rim Now this is gonna be I’ll just put that on on all sides. So I’ll click this little button right here. It’s going to apply it to all sides. Look at that. That looks a little bit out of whack, doesn’t it? Very large font and we don’t have padding that scales with that font size. So it looks a little bit off because rims are not relative to what’s going on in this container. Rims are relative to the root font size of our website. Now let’s play around with something else. Let’s get rid of that font size on the box. Okay, so now let’s play around with maybe, can we use VW units here? Can we use VH units here? Can we use Vmin, Vmax?
0:47:25
Why yes, we absolutely can. All of these values that we’ve talked about can be used practically anywhere. You can use them in lots of different, you can use them in coordinate boxes when you’re positioning elements. So many different areas where these units can be used. So let’s come down here and say, hey, you know, I want my padding to be 5VW and I want that to be on all sides. Okay, save. That’s what our box looks like. Let’s see this, look, oh gosh, our box is responding to the size of the viewport. Now, why isn’t it responding to the height, my friends? Look, I’m moving the height, we’re using a viewport unit, why isn’t it not responding to the height? Well, let’s go back to our box and take a look.
0:48:17
Oh, I didn’t tell it to. I told every side of this box to respond to the width of the viewport, not to the height of the viewport. So do I want to, can I change that? Sure, I can make the height of the box or the like the block padding, the top and bottom padding, respond to the height of the viewport. But you’re gonna see that maybe this isn’t always such a great idea, because my box can shrink, right?
0:48:40
Height wise, and then on width, it’s gonna shrink width wise, and maybe, you know, the dimensions don’t end up looking so great on certain devices. You just have to know what’s going to happen and just be cognizant of any potential ramifications. But there’s nothing stopping you from using VH here or VW or anything else. In fact, you could say, hey, be 5V min, right? What is 5V min? Pop quiz, guys. 5V min is what? It is 5% of the smallest angle of the viewport or the smallest axis of the viewport, okay?
0:49:17
So what we’re gonna do is we’re gonna refresh here. And as my width changes, look, my button is doing nothing. Why is the button doing nothing? Because the width is the largest side. The height is actually the smallest side. So it’s only going to respond to changes in height. See that? However, when the axes cross, oh, now suddenly, look at what we have here, the width is the smallest side, the height is the largest side.
0:49:46
It is no longer going to respond to changes in height, it is going to respond to changes in width. I wish that I would keep it on the screen. There we go, like that. So it’s responding now to changes in width. And so you’re kind of creating a little bit of automatic responsiveness there, but it’s unpredictable, right? Because it’s all based on a device size. It’s not based on anything static or absolute that you know of. It’s just, Hey, whatever device is viewing this, that’s what it’s going to respond to. But I wanted to show you that you can in fact use those values there.
0:50:17
Now we come in here for typography and instead of setting this in rims, let’s try setting this font in ems. Well, that’s what 3em looks like, right? But now I’m gonna choose the div, and I’m gonna say, you know what? And that’s a parent element. I’m gonna set this font size to six rem. Ooh boy, we got some big text inside of this box. Why is that? The parent is saying be six rem.
0:50:47
Six times 10 is what my friends? 60. That’s much bigger than 60 though so let’s go and see what our text is set to 3m remember m’s are a multiplier so we were at 60 and now we multiply that times 3 in my brain that’s 180 right and so we’re looking at a hundred and eighty pixel text you’re effectively sticking a multiplier in here into the font size field and that is quite dangerous as we discussed. So what I’m gonna do is change this to three REM now. Okay, wow, look at that big change. Why?
0:51:20
Because REMS doesn’t care what the parent is telling anything to do. REMS cares what you’re telling it to do, okay? So this actual text element that I’ve selected here, I’ve instructed it to be three REM. Even though its parent is telling children to be six REM, this individual child was told to be three REM, thus it’s going to be three REM. I’m just kind of running through some of these scenarios and kind of explaining things to you as you go.
0:51:51
If you’re in a situation where you’re like, your eyes are glazing over, right? Your brain is starting to melt inside your skull, just keep one thing in mind. This is a YouTube video, and there’s nothing stopping you from hitting rewind and watching and rewind and watching and rewind and watch however long it needs to take. Put your own box on the screen. Start playing with your own little box. We can all be playing with our little boxes. Okay. And this is how you’re going to learn. You got to experiment a little bit. In fact, Seth Godin wrote a great book called Poke the Box.
0:52:26
Let’s see, Amazon Poke the Box. Yeah, there it is, Amazon, Poke the Box. Okay, yeah, I thought, I’m not going crazy. Go read it, it’s a great book. Talks about experimentation. It talks about this is what kids do and how kids learn things. You give them a box, they’re gonna poke it. They’re gonna poke the buttons. They’re gonna see what it does.
0:52:45
They’re gonna experiment. They’re gonna play around until they understand it. And that’s kind of the approach that we need to take sometimes in web design. So guys this was a whole tutorial on units. I apologize. Like I said in the disclaimer, you know, it’s very, I understand, it could be overwhelming but you made it this far and that means you’re a real one and that means you are here for the long haul and that you trust me and that this all is going to work out and you’re going to be way way way better for it. That’s it. I don’t know. I feel like I should say more but really we just need to move on. The faster we move on the better off we’re all going to be. So that’s what I’m going to do.
0:53:25
Peace. See you in the next lesson.
