Font-Sizing: Px, Em, and Rem

Over the next few stages, I'll be working off the basic knowledge that 0:00 Treehouse teacher, Gil Hernandez, covers in his CSS lessons. 0:03 If you haven't already, 0:08 make sure to catch yourself up to speed through the link in the teacher's notes. 0:09 Getting proper sizes for 0:13 your web fonts is crucial to good typography and readability. 0:15 All the hard work of choosing a good typeface can go down the drain if 0:18 the body size is illegibly small. 0:22 Or, if it's out of proportion to your headings. 0:24 In this video, we'll discuss best practices on setting this up in CSS. 0:27 I've set up a new workspace here, with some stripped-back, basic CSS. 0:32 I've also left all the font sizes as blank. 0:36 So, we can change those throughout this video. 0:38 In the index.html, I'm utilizing copy from The War of the Worlds, 0:40 a book by H.G. Wells. 0:46 I've also improvised some headings and lists for this example. 0:48 In our head section, we can see I'm calling Alegreya from Google Fonts API. 0:52 In the style, I've assigned our body font family to be Alegreya, 0:57 then Georgia, then Serif. 1:01 If you want to check out Alegreya, you can go to Google Fonts, and 1:02 you can see the different styles available. 1:06 And, we're calling the normal, bold and bold italic. 1:08 I chose this typeface because its roots in literature, 1:11 due to the content at hand being a book. 1:14 It also has diverse weights and italics, and it includes small caps and 1:17 other features. 1:21 Our text size is set through our CSS font size property. 1:23 This value can be set with pixels, ems, rems, percent and more. 1:26 We'll first focus on pixels and then discuss font sizing with em and rem. 1:32 A pixel is a fixed unit of measure. 1:37 It pertains to media with display screens, such as a computer. 1:39 For example, if we wanted to set our body copy's font size in pixels, 1:43 we would simply write font size 20 pixels under our body. 1:47 Then, we could set our h1 to be at 50 pixels through its font size. 1:51 If we refresh the page, we see that our body font size has increased, and 1:58 our h1 font size has increased. 2:02 That's because our default size there was 16 pixels, and is now at 20 pixels. 2:04 And, our h1 is now at 50 pixels. 2:08 Setting sizes with pixels is pretty straightforward, and you can do that for 2:12 any of the elements. 2:15 A good rule of thumb is to set your body text anywhere between 16 pixels, 2:18 which is the default, to 24 pixels. 2:23 Readers' eyes are usually a few feet from screens, so 2:25 these larger sizes are necessary for 2:28 comfortable reading, whereas smaller text can strain and tire their eyes. 2:30 This ranges the verse too as every type face is different. 2:35 As we've seen before, 2:39 the x height of a typeface can greatly effect its perceived size. 2:40 So, use what you've learned, and make a judgement call on what looks best. 2:43 When in doubt, lead toward the larger size. 2:47 Many web designers gravitated towards setting the font size in 2:50 CSS as pixels because of its simplicity, consistency, and 2:53 ability to create exact designs with a fixed unit. 2:58 But, because this is a fixed unit, 3:01 it can create more work with responsive typography. 3:03 And, an accessibility problem can arise with older versions of browsers, 3:06 such as Internet Explorer. 3:09 When font sizes are set in pixels, users cannot increase or 3:11 decrease the text size on a page through the browser preferences. 3:14 This can create problems with accessibility. 3:19 This issue can somewhat be skirted through zooming in on those browsers. 3:21 But, let's look at a commonly practiced alternative. 3:24 Whereas pixels are a fixed unit, ems and rems are relative units for font sizing. 3:28 Ems are relevent to its parent space size. 3:33 For example, most browsers default to a font size of 16 pixels, 3:36 which is equal to one em. 3:40 If we set our body at one em, and our h1 at two em, let's see what happens. 3:41 All right, our body has now gone back to 16 pixels, which is the default. 3:51 And our h1 is two times that, 3:56 which would make it 32 pixels, because it's relative to the body font size of 1m. 3:58 Lastly, if we change the containers class to a font size of ten pixels [SOUND], 4:04 we can see that everything on the page has changed. 4:11 That's because the m is now relative to those ten pixels. 4:16 So, one m is equal to ten pixels, and two m is equal to 20 pixels. 4:20 This can be incredibly helpful, scalable and powerful for 4:25 responsive typography by saving time and extra code. 4:29 It also corrects accessibility issues if a user needs to 4:32 change the default font size of their browser. 4:35 But, you want to be on the lookout for a compounding m's, 4:38 meaning nested elements font sizes can begin to multiply on top of each parent. 4:41 For example, let's set the li element to be a font size of 0.8m. 4:47 We'll also remove this ten pixel font size for our container. 4:52 We'll save and refresh. 4:57 Now, we see that our paragraphs are at one m, and 4:59 there our li's are 0.8 of that one m. 5:02 And then the nested li's under that are at 0.8 of that 0.8. 5:05 That's because these nested elements are compounding on top of each other. 5:09 To fix this, 5:14 you can set all nested elements like li li to have a font size of one m. 5:14