7.8 Pleasing fonts - Video Tutorials & Practice Problems

<v Michael>Because so much of the web</v> involves putting text on webpages, one of the most important considerations is picking pleasing font sizes and other aspects of fonts for text and headings and that sort of thing, both from legibility and design perspective. So, Lee, what are some of the considerations when choosing pleasing fonts? <v Lee>Sure, you want to make sure that things</v> are readable and that's really the key factor to keep in mind, and somewhere between 14 pixels and 18 pixels, equivalent, you know, depending on what sort of relative sizing you're using. <v ->Yeah.</v> <v ->It's kind of right in</v> that sweet spot of readability, and don't worry too much about being exact, so that's why I'm saying 14 to 18 because, you know, when you're using relative font sizes, sometimes it's a fraction of one of those things. <v Michael>So if you're using ems, for example?</v> <v Lee>Right, exactly.</v> So if you're using ems and you decide that you want to make something 1.35 or 1.33em, if it looks good on the page and it makes your fonts more readable then just use it, don't worry that everything isn't a round number, and one thing we mentioned in the text is that there is a trick that you can use when- <v ->Is it the 62.5% trick?</v> <v ->Exactly, yeah.</v> So there is a trick you can use where you set the body to 62.5%. 62.5% of 16 pixels is 10 pixels. And what that means is that every time that you use an em, one em would then be 10 pixels in height, and 1.2em would be 12 pixels in height, and sure, you get nice round numbers for it, and you can make it exactly some equivalent number of pixels but really, who cares? <v Lee>Right. (chuckles)</v> <v Michael>The ultimate goal is, is your site readable?</v> Is the content readable? Does it look good? <v ->Yeah.</v> <v ->Doing something like this</v> is a little crazy because you're also making the default font size for unstyled elements, really small, <v ->Yeah.</v> <v ->10 pixels is not a</v> big font size. <v ->So-</v> <v ->It's 62.5% in order</v> to get it to be 10 pixels, is that right? <v ->Right, exactly.</v> <v ->Basically that's what</v> people said, how do we make the base of this thing, 10 pixels? And then there's this trick by setting the body to be 62.5. <v Lee>Right?</v> So it's just a very persnickety way to get to round numbers. And that seems silly to me. <v Michael>Okay, so it seems like trying</v> to achieve pixel precision on the web is just a pointless goal. Is that right? <v ->Exactly, it really is.</v> And for a long time, the design world didn't work that way. And pixel precision was the ideal. And over time, people have just realized that with the difference between screen sizes and screen resolutions and everything else that can go wrong, trying to aim for pixel precision is just, it'll drive you crazy. <v ->Okay.</v> <v ->So you should just</v> really aim for what looks good and what works and doesn't break the site and you know, doesn't make your content look bad and that's it. That's good enough. <v Michael>All right, before moving on,</v> let's make a git commit and push it up to GitHub. Let's take a look. Looks slightly different, what's the difference here? See the hero? <v ->Why is that?</v> <v ->It's the tab I think, no?</v> <v Michael>What's that?</v> <v Lee>Go back.</v> That's bizarre. <v Michael>The hero is slightly a different height.</v> <v Lee>I do not know.</v> Oh wait, you know what? Refresh, on the other one, the local. <v Michael>There we go.</v> Now they're the same. <v ->It's because the tab bar</v> popped on there. So that changed the height of the browser window. <v Michael>Oh, wow.</v> So it's because it's a VH, right? <v Lee>Right.</v> So, because the tab bar popped up there we lost, you know, 50 pixels of space, <v ->Oh, wow.</v> <v ->So it resized the hero.</v> <v Michael>Oh, it's because I added the new tab here.</v> <v ->Yeah.</v> <v ->Okay that's cool, all right.</v> That's such an interesting little subtlety, I would never have thought about that but it makes total sense 'cause, so what happened there is we added this tab, it changed the view port height and so that changed the hero, I guess, this hero was a little bit smaller, but once we refreshed this one, then it took into account that we'd lost that extra space due to the tab. Cool, all right. Well, so now they're the same and we've got a successfully deployed page. Great. <v Lee>Great.</v>