Font-Sizing: Px, Em, and Rem - Part 24:41 with Mattox Shuler
Choosing a font size can make or break the readability of your webpage. We’ll talk about some general rules of thumb to go by and utilizing a typographic scale.
Rems, which stand for route ems, have been on the rise in web design. 0:00 Instead of being relative to it's parent class or 0:05 element like an em, Rems are relative to the route em, set to the html. 0:07 As mentioned before, the common default font size for browsers is 16 pixels. 0:12 So in this case, one Rem will always equal 16 pixels. 0:17 Instead of being relative to a parent class, or element. 0:21 In our example, let's use rems, or root ems, instead of ems. 0:24 We know that 16 pixels is the browser default, so 0:29 here, 1.25 rem will be equal to 24 pixels. 0:32 Then we can set our h1 at 3 rem, which will be equal to 48 pixels. 0:38 Let's save and refresh. 0:44 Our font sizes have changed based on their rem values. 0:45 Even if we add a container value of ten pixels, and we'll set this to be 0:49 1.25 rem for our paragraphs, we can refresh, and we can see that these do 0:53 not change because they're referencing the root element and not the parent element. 0:58 This also corrects the problem of compounding ems and 1:03 still provides the benefits of scalability for responsive design. 1:06 It should be noted, that Internet Explorer 8, does not support rems. 1:10 So if IE8 support is required, then you would want to set a fallback in pixels. 1:14 I've also provided some further reading in a link to tools that 1:19 help size references with pixels to ems and rems. 1:22 Lastly, sizing your headings, paragraphs and other text elements may seem a little 1:26 tricky, and it's not a great idea to just guess by shooting in the dark. 1:31 This can lead to inconsistent heading and paragraph sizes. 1:35 This is why following a typographic scale can help immensely. 1:38 A scale gradually increases at a certain rate to ensure consistent proportions for 1:42 your font sizes. 1:47 The classic typographic scale increases in intervals of one, two, three and then 12. 1:49 It's been used for centuries and 1:54 is reliable to adhere to especially if you're using 16 pixels as your base size. 1:56 I liked our body copy at about 20 pixels, but 2:02 that size is not in that typographic scale we just looked at. 2:05 Don't fret. 2:08 Let's take a look at typescale.com and build one out. 2:09 This site is incredibly helpful because you can set your base size, 2:13 test different scales, and even import Google webfonts to the site. 2:16 So let's set ours up. 2:21 We'll put 20 pixels here, and we see it's in reference to 1.25 em. 2:24 We can set our scale. 2:28 I like the major third for our example. 2:30 If we wanted to, we can even see what our typeface, alegreya, 2:32 looks like by writing it in here, and then copying it and 2:35 pasting it into this font family, and here it appears. 2:39 So we're now presented with different em values to build our scale. 2:44 We'll start with this base size at 1.25 em so I wanna set that for our body copy. 2:49 [BLANK_AUDIO] 2:55 So now we're given some sizes in em's and this largest one will be our h1, 3:00 the next largest is our h2, h3, and so forth. 3:06 This 1 em is what we want our paragraphs to be at. 3:10 Now, in our design, I've already set these up down here as h1, h2, h3, 3:13 with those corresponding sizes. 3:17 I didn't go all the way to h6 because our design doesn't have all those 3:20 heading numbers. 3:23 We could also set the p element to be 1 em if we like, but 3:24 this is set by default in the browser. 3:28 Remember, these are relative to our body font size of 1.25 em. 3:31 So let's go check out what the scale looks like. 3:35 Great. 3:39 Our typographic scale looks good and it's intact, and 3:40 if we were change our body font size here, let's say to 1 em, 3:43 our whole scale changes with it which is very nice, and it's great for responsive 3:49 design, but I really want this to be 1.25 em, so I'll move it back to that. 3:53 Now that that's set up, we still have a little ways to go, 3:59 but getting a proper body size and scale is a great place to start. 4:01 To summarize this lesson we saw that pixels give the designer much control over 4:06 the design but lack easy scalability and accessibility. 4:11 Em's are easily scalable but can be confusing at first and 4:15 have issues with compounding font sizes and nested elements. 4:18 Rems are root ems. 4:22 They're growing increasingly in popular use because they bring 4:24 the scalability of ems without that hassle of compounding font sizes. 4:27 Once you've set your body text size, 4:32 he sure to build the rest of the sizes based on a typographic scale. 4:33 That's it for font sizing. 4:37 Next we'll look at measure and space 4:39
You need to sign up for Treehouse in order to download course files.Sign up