Okay let's talk a little bit about relative font sizing. And for that we're going to take a look at font size before that HTML. And it's located in the same folder as the previous file. Now there are two units of measurements that are relative that we're going to talk about and that is percent and ems. Let's start with percent first of all let's specify that our body tag should have fun size of a 120 %. And what that means is Is that we want to take whatever the default size is, and by default I mean whatever the browser provides by default, and increase it by 120%. You can actually do a quick calculation and figure out what pixel size that would be. Most browsers have 16 pixels as default text size. So 120% of 16 would a little bit over 19 pixels. So if we refresh the page, we'll see that we increased the font size in the entire HTML document. Let's now target the very first text here that says 2em text. So lets go ahead and actually use an inline style since we're just testing and specify the font size to be 2em. And is a unit of measurement that is equivalent to the width of the letter m in this particular font that we're using. It sounds a little bit confusing at first, but the bottom line is it's a relative size. It's relative to something. And for this div where it says 2em text, what this is saying is it's relative to whatever the font size is at the moment we're applying it. Since we set the font size to 120% in the entire body, this div also received at 120% and when you combine this font size with this one, this basically says I want to increase the font two times of whatever a 120 was. So if we take a look at this text this 2em should really increase twice as large as this word regular text. So if we save the file and refresh, and you can see now everything since that div includes the other divs they got increased. That looks just about right that it's twice the size of the regular text. Now you might find this confusing. Didn't we just override the font size and say it's 2em? Why is 120% playing together with 2em instead of having 2em override the 120%, and that's kind of where the game of the relative sizing. When you specify them on subsequent elements, they don't have an overriding effect, they have a cumulative effect instead. Because what you're saying here is whatever the size of this div is, I want you to increase it. Or I want you to make 2ems out of it, meaning, make it twice as large. So I'm sure you guessed now, how do I make this 4em text actually 4em? If I specify style and say font-size, what should I put here? Should I put 4em? Well that would be a mistake. If I put 4em it will really be the 2em that it's already applying to this times 4em, which would make it 8em, right. But what we actually need to do is put 4em. In order to do that, I just specify 2em, again. So, it means that this 4em text will be twice as large as the 2em text right here. So let's save the file and refresh and you can see now it's twice as large in this 2em. This text also got caught into this because it is a child element of our div that we just styled. so how so I make it 2em again? Well, the answer is, you don't overwrite it, you just decrease it. So let's go ahead and say style=_"font-size: and in order to get back to 2em I need to half the size of my text. So in order to do that I'll just say .5em and now when I refresh my text now is back to the same size as it was before, because I halved the relative size of 4em. A couple of more quick points before we finish up. First it's a pretty common practice, that if you want to increase the font-size in the entire document, that you specify percentage and you apply it usually to the most parent tag, which is usually the body tag. And technically speaking, you could have continued to use percentages even here. So 2em really translates to 200% so if I put 200% right here and save it and refresh you could see nothing really changed. However it's more common to use ems when you're talking about relative sizes within the documents itself. But one thing you should know is that even though you could use percentages here I highly recommend you don't mix and match the percentage, ems and certainly not the absolute value units all over the place. It could get very confusing and it'll become a mess. So it's better to keep things consistent. Point number two is, even though we increase the font size here to 120, using CSS rule, a user of your website can do the same thing just by increasing the zoom. For example here, I will increase the zoom a couple of times. As you could see, I'm all the way to 200% zoom, and hopefully now, you see the value of having relative units of measurement for font size. You could see that the visual size relationship between these different divs remains the same, even though they're all now very big. This text is still half of this text, and this text is still half of this text.
Video Images
0 comments:
Post a Comment