FREELessons: 17Length: 2.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 Allowing Base Font Size Control

Both browser vendors and individual users have the ability to control the base font size according to what generally works best on a given setup. However, many web designers inadvertently block this functionality from operating. Learn how to ensure your sites allow base font size controls to be adjusted on a per setup basis.

3.4 Allowing Base Font Size Control

Hi, in this lesson of Bomb-Proof Web Design, you're going to learn why it's really important never to set an explicit base font size in a website. And you're also gonna learn the advantages of leaving that base font size alone. Here we have another really simple page layout. In this first example, there's no base font size set. In the second example, there's a base font size of 16 pixels set. The base font size has been applied to the HTML element. Now this is a really common practice in web design. You'll see this a lot. Designers will apply a pixel-based font size value to the HTML element or the body element. But you don't want to do that ever and here's why. Using Chrome as an example, open up the settings. Scroll down to Show advanced settings. And here you'll find the controls for how large the font size is for all websites. And you can choose very small, small, medium, large or very large. So let's choose large. And you can see that instantly made all of these fonts larger. Now let's have a look at those same two sites again. Here, this is our first site, where we haven't set a base font size. And as you can see, everything has increased in font size. But looking at our other site, this is still stuck, the whole thing has stayed small. Now there's a couple of reasons that you don't want to have this behavior, you don't want to have that base font size. One is, you're overriding user preferences. Your users may have a very good reason that they want to change the font size. One of those could be accessibility. If somebody is vision impaired, it might make their life a lot easier if they're able to increase the font size. Another reason that you wanna leave that font size alone is on a lot of different devices, browser vendors have determined the best base font size on that browser for that device, depending on its size. So you might see a different base font size on a small smartphone as compared to a desktop browser. But if you're overwriting that base font size with our own CSS you're not going to allow that default optimum size to take precedent. And a third area that you could be causing problems for your users if you explicitly set a base font size is on very large devices like televisions. When a visitor is viewing a web site from their television, typically they are a fair amount of distance away from the television. And it's very common for UIs that are designed or optimized for television screens to have everything blown up much larger. So if you have a user that's sitting on their couch, browsing the web, and they have the default size of their font set to very large. When they reach your website your text will be tiny for them on their screen. Then the next level of layout control that can be built on top of leaving this concept of leaving the base font size alone is enabling the whole layout to scale. Along with whatever base font size has been set by the vendor or by the user. Now, right now in this example, I have deliberately set the padding, the margin, the border width and the border radius with pixel-based values. Which means that they are set in stone and they're not going to change along with the base font size. So you can see here, we've got the same curve. We've got the same amount of space above the layout. We've got the same amount of padding inside. However, what we can do, through leveraging CSS pre-processes, is make sure that these layout values are all completely dynamic. So that when a user changes their base font size preferences, the whole layout will scale along with it. Here is our stylus code for this particular layout, and you can see here the pixel base values for the margin and the padding. The easiest way to make your margin and padding values scaleable is just to set them using em values rather than pixel values. So let's replace this 25 pixel value with lets say 1.5 em's and we'll replace this pixel value with 3 em's. So what that means, what an em is, an em is however big the font is in a particular region. So, let's say your base font size of your whole site is 10 pixels. You're never gonna have a ten pixel value, but just so that the maths will be a little bit easier to follow. If the base font size is 10 pixels then 1.5 em's will be 15 pixels. If the base size is 10 pixels then 3 em's will be 30 pixels so em is basically a way of saying times whatever the font size is. That means that if the base font size is increased from the default of around 16 pixels up to 30 pixels, now this em is gonna be multiplying a larger value to create the margin and padding spacing. But save that so it will re-compile. And now let's have a look at the difference in the layout. Okay, so here's our original spacing. Pay attention to how much margin there is here, and how much padding there is here. Now in our layout that's been allowed to increase in size. Now you can see how the margin has increased in size and the pattern has increased in size. So if we go back and forth, we can see that difference is quite significant. Everything has scaled uniformly, as opposed to things remaining static. So you can see how much more comfortable that is for the eye to look at. Now we're going to make the border radius and the border thickness do the same thing. Our original CSS had a border of three pixels and a border radius of ten pixels. Now we want to convert these pixel values into relative values. But we still want those values to remain at this size by default. Now it's a little bit harder to figure out how to convert three pixels into an em value. There's a little bit of maths involved, but that's where we can take advantage of our CSS pre-processors. We can have them perform the mathematics for us every time it needs to be done. Here we have a little calculation that we're going to use anywhere we would normally incorporate a pixel value to create a layout that will look the same but will actually be working off rem units. Now I won't go in to the exact calculations here, but you'll get this code and you'll be able to have the chance to look over it. Suffice to say that when you use this little variable in the way that I'm about to show you, you'll have a fully flexible and scalable design. But you'll be able to still think in the way that you would if you were creating your design based purely off pixel units. Now to use this little variable, here's all you have to do. Down here, instead of typing out 3px all we have to do is say three times the variable that we created. So the variable is $px. And wherever you want to have a pixel unit placed, instead you can just put times $px. And we'll do the same thing with this ten pixel border radius. We'll delete that pixel unit, we'll say times $px. Let's save that and have a look at the result. Okay, so now here's our base design. Even though these corners and this border width is now expressed in rem units rather than pixels it looks just like it did before. However, when we look at the version that has the base font size scaled up, you can see now that the width of the border and the radius of the corner has also increased. Compared to how the layout looked before we put these relative units in. So here again you can see that the radius and the border width is exactly the same as when the font is quite a bit smaller. So by using these relative units, the entire layout will scale up and down according to the settings. So the same thing applies if we are to reduce the font size. So there you go you can see the whole layout has shrunk proportionally. This has the fixed font size but this has the flexible font size and the relative layout units. Now you might be wondering what you would have to do if you really did need to control the base font size of the design. And still you wanted to allow users to control and vendors to control the overall size of the text. Well you can still, increase or decrease the default size of your text. But you just have to use relative units. Now sometimes this is going to be necessary because you might be using a font family that by default is smaller than the average font, or larger than the average font. And you might need to make adjustments. So here's how you do that. This is our site with the orignal 16 pixel explicit base font size entered. This is entered in the way that we don't want to use. However, as long as you don't use a pixel value, it's perfectly fine. So you're going to make small adjustments against the html or body element the provider on that is that you shouldn't use this value to dramatically change the base size on the overall website. You still need to leave that up to users for all the reasons that we talked about at the start of this video. So what you can do, instead, is just replace this value with em units. Now we know that 16 pixels would typically be equivalent to 1 em. Therefore, if you need your text to be just a little bit bigger, or just a little bit smaller, just increase this em value. So let's say 1.1 ems. Now you can see that the size has increased. The base font size of the page is a little bit larger. So you can utilize that approach if you really need to for a particularly small font-face or a particularly large font-face, just to create a degree of standardization. And yet if you change the default font size, you're still going to be able to apply that to the website. Just by allowing that base font size to be control by users or vendors, you're instantly creating a much more flexible design that will will be usable on a wide array of devices right from the get go. The next thing you'll be learning in the following video is how to handle all the different types of displays you might find your site visitors using.

Back to the top