Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:59 minutes
  • Overview
  • Transcript

2.4 Browser Settings and Font Size

We’ve already covered how inheritance from the HTML element effects em and rem units; now we’ll look at how browser settings affect the HTML element, and why that matters when choosing which units to use.

2.4 Browser Settings and Font Size

Hey welcome back to a visual guide to and rem units. In the last lesson we were looking at how inheritance from parent to child, parent to child, parent to child affects units. Now even though inheritance from elements within a document only affects units, there's another type of inheritance that affects both units and rem units. And that is inheritance of browser default properties by the HTML element. So you so in the last lesson how if you don't set a specific font size directly on an element, it will inherit a font size from the nearest parent. Well the same thing is actually true of the HTML element. If you don't set properties directly in the HTML element, it will inherit properties as well, but of course it has no parent elements. So the only place that it can inherit properties from is the browser itself. So all browsers come with a full set of default CSS properties. And these are what will style your page if you don't have any of your own CSS. And these properties are also what allows users to have certain settings and preferences set up in their own browsers. So if it's important to you not to accidentally override user preferences and user settings, then you need to know how to avoid doing that and how to build your sites in a way that works in with the user preferences. Again, if you feel that is important to allow those preferences to take effect in your sites. So in this lesson, we can have a look at the effective browser settings on IM, RIM and pixel units and that's gonna help you decide what's your instance you are in design full as if when it comes to working with these browser settings. So we've got a little bit of setup to do in Webflow to allow us to look at this point. We already have our inbox from the last lesson. We are also gonna add a box that's controlled by rem units and one that's controlled by pixel unit. So we create our inbox first. Click the inbox to select it and then just copy and paste, select the newly pasted box. Put your cursor inside this field here and just hit backspace to just get rid of the class that's already there. And now in this list here you should still see the inbox class that we created in our previous lesson. So just select that. Now double click inside the text here, change that to rem. Now we're gonna select that rem inbox again. And we're gonna add padding around the inside of this box this time in rems rather than ems. So we're gonna just add one rem on all four sides, and then to make this the same size of our inbox we're gonna replace the width of 20 rems with 10 rems. Next up we create a box size in pixels, so select the rem box and copy and paste, then double click inside the text and replace that with px. Now we're going to delete that rem box class. We're going to add a new class PX underscore box. And we'll head down, give this a background color. I'll go with a purple, just use anything you like. And once again, to match up with the initial size of the other two boxes, we're going to set this to 160 pixels in width. And we're gonna give it padding all the way around of 16 pixels. So now we've got all three boxes with the same initial size and the same initial spacing. And what we're going to be doing is, we're gonna be scaling these objects up and down. But we don't want our wrapper to scale up and down, so just click on that wrapper. And for now, we're gonna set its width to 800 pixels just to keep that at a fixed size as we mess around with these other boxes. And then, finally, just click on the buddy element and have a look at the topography section. And make sure that the font size here is set to one rem. So that means that the body size is going to be inheriting the HTML font size correctly. Okay, so now what we're going to do is start making some changes in the browser settings that they kind of affect the font size on the HTML element. So the way to do that in chrome is to hit the little three dot Icon up here. Choose settings. I'm just gonna drag this off, make it a little smaller. Get it out of the way. Scroll all the way to the bottom and click show advanced settings, and then scroll a little further until you reach this fonts size setting. From here you can press customize fonts and this is going to show you the exact font size that set as the default in the browser. You can't just choose directly from medium large very large cities which is what most people will do when they tweaking their browser font size settings, but we're going to use this so you can see in more specific detail what they said he's a changing. As you know, we've got the rem box inheriting its sizing values from the html element. We also have the box inheriting its sizing currently from the HTML element, and the pixel box, not inheriting any sizing values, because of the fact that it has its size set explicitly in pixels. So now watch what happens when we change this font size setting here in the browser. We scale it up and look at what happens to the and the rem boxes, they scale up to fit with the size of the text that's inside. So we've got all of that text set in values at the moment. And you'll notice that the box is sized in pixels ends up looking quite cramped because the text inside it has increased, but it now doesn't have enough space to accommodate the text comfortably. And of course, if the text was also set using pixel values, than nothing would scale up at all. So a user would go to change these settings to increase the font size for whatever reason they may need to do so. And if all the values are set purely in pixels, then there won't be any change. Okay, so we'll just put this back to 16 pixels for now, and let's open up our inspector tools again, and what we're going to do is have a look at the code for the HTML element. We're going to see what font size is being computed for the HTML element as we change these browser settings. So once again, we'll hit show all to give us all the properties. And if we scroll down here, here's our font size. And now when we change our browser settings you're actually going to see those browser settings being inherited directly into the HTML element. So we'll bump this up to 18 pixels, and then sure enough we look in the computer tab, and now the HTML font size is 18 pixels as well. So whether we scale this text up or we scale it down, you're going to see that reflect in the HTML element. And anything that you've sized with one of these flexible units, be it or rem units done the right way, is gonna allow your entire design to scale along with the font size. Now, even if you do use solid pixels in your layouts, it is still possible for user to scale up your design, but they can only do so using the zoom settings. So just under the font size, if we change the page zoom up to say 150, now you can see that all three elements have scaled up equally. But the consideration to make, if you do depend on that zoom, is that you are overriding this browser font size setting. So we know with the fact that rem units are named due to the fact they're affected by the root values, so root value, there can be a tendency to only think about how your rem values are going to be affected by the HTML element. But it's also important to remember that your values are still going to be affected as well if they're inheriting their font size all the way from that HTML element. So for example, if we select our wrapper element and we give it a font size of 1.5 that scaled up our inbox by 1.5 times. And now, if we change the font size that the HTML element is inheriting from the browser settings, you'll see that the box is scaling itself up one and a half times faster than the rem box. So that's just something to bear in mind with how you use your values in a design that allows that HTML value to be inherited from the browser settings. Next up, let's have a look at how using CSS directly on the HTML element can influence the way that these browser settings can affect your designs. Now, once again, we can't actually set any CSS directly on the HTML element in Webflow, so we're just going to use Chrome development tools to give us a temporary preview of the effect of the kind of CSS that we're talking about. So we'll just make sure that we've still got the HTML element selected in the developed tools. And then, over here on the right, in styles tab, just click after this line here that says, height 100% which should take you into a new line. And then, type in font size and what we going to do to set the font size to two and you can probably guess what's going to happen here based on what we covered in our last lesson. We know that the inherited font size is 16 pixels from the browser, then was heading to on the HTML element which is gonna multiply that by two times. So now if we get into the computer tab, sure enough we can see that the fun size on this element has doubled, taking it up to 32 pixels. So using values, or some type of multiplying value on the HTML element can be a really good way of allowing browser settings to still take effect, but to give you control over that root font size for your document. With this two set on this HTML font size, now, if we bump up our font size settings in the browser to 18, and we go back to our computed code, we can see that the font size is now 2 times 18 giving us a font size of 36. Okay, so now we'll just take the font size setting back down to 16 to get it back to default. You don't have to just use units on the HTML element if you wanna scale things. You can also use rem units, so if we change this to two rem, then it's gonna have the same effect. If we change that to one rem, then that's gonna take us back down to that one multiple of our base font size, so that's gonna put us back to 16 pixels. And if you prefer you can also just use percentages instead. So if I set the font size to 200%, then that's gonna double that font size that's inherited from the browser settings. So 200% is effectively the same as setting two rem or two on this element. And by the same token, setting it to 100% is the same as setting it to one rem or one or, in fact, leaving the font size setting of the HTML element all together. So that covers all of the flexible scalable units. But what happens if we set a fixed unit on the HTML font size? So let's set this now to 20 pixels. Now this is a pretty common thing that you'll see done by a lot of web designers. So what's the effect then on how these browser settings work? So we'll try scaling it up and there's no change. Scaling it down has no change. Basically, by setting a pixel based font size on the root element you shut down that browser setting. And sometimes you do have to do that, sometimes you do need to make sure that your layout has a fixed size. And we'll go into the pros and cons of allowing those settings to work or preventing those settings from working in the next lesson. But just to summarize, if you want to support this setting in browsers, but you still wanna have control over the overall layout and font sizing by default on your site, then the best way to make both of those things happen is to use a scalable unit on your HTML font size like 1.2 ram or 120%. We've now gone through all of the most important information that you need in order to understand how and rem units work, and how they differ from pixel units. But, of course, all that has to boil down to practical information. What you really need to know is what are the real world advantages of using each one of these different units. As I mentioned earlier the goal of this course is not to try to dictate the absolute correct way of doing things. However, there is a distinct set of advantages and disadvantages that come from working with each one of these units in a different way. Those pros and cons are fairly clear. It's just a matter of deciding which of the advantages are most important to you. So in the next lesson, the last lesson of this course, we're gonna go through exactly what the pros and cons are of using different units in specific circumstances in web design. So I'll see you in the next lesson.

Back to the top