1 00:00:00,334 --> 00:00:02,192 In our previous videos, 2 00:00:02,192 --> 00:00:07,414 we learned to add new web fonts to our webpage, and that's a big help. 3 00:00:07,414 --> 00:00:12,131 But web type has other properties that we haven't examined yet 4 00:00:12,131 --> 00:00:17,563 that we could use to improve the presentation of our Lake Tahoe project. 5 00:00:17,563 --> 00:00:21,812 With the inspector open in Google Chrome, I'm going to turn on 6 00:00:21,812 --> 00:00:26,150 device mode to check out what our page looks like in mobile view. 7 00:00:27,280 --> 00:00:31,823 We should get used to the idea of checking this view early in the process. 8 00:00:31,823 --> 00:00:35,543 In mobile view, It's easier to identify one way 9 00:00:35,543 --> 00:00:38,494 we can make our body copy more legible 10 00:00:38,494 --> 00:00:42,860 increasing the space between lines of text. 11 00:00:42,860 --> 00:00:47,612 While typographers refer to the amount of space in between each 12 00:00:47,612 --> 00:00:49,460 line of text as leading, 13 00:00:49,460 --> 00:00:54,544 the CSS property controlling leading is called line-height. 14 00:00:54,544 --> 00:01:01,214 By default, the line-height in CSS is about 1.2 times the height of the text. 15 00:01:01,214 --> 00:01:05,902 But that's not enough for optimum legibility. I'd recommend 16 00:01:05,902 --> 00:01:10,954 making your line height at least 1.5 times the height of the text. 17 00:01:10,954 --> 00:01:12,289 Let's start with that number. 18 00:01:17,314 --> 00:01:23,584 You can use a number higher than 1.5, but be cautious about going too high. 19 00:01:23,584 --> 00:01:28,125 I'll try the number 3 and now my lines of text are so 20 00:01:28,125 --> 00:01:32,781 far apart that they look like separate paragraphs. 21 00:01:32,781 --> 00:01:35,754 So I'll go back to 1.5. 22 00:01:38,425 --> 00:01:43,452 You're probably noticing something strange about line-height values, 23 00:01:43,452 --> 00:01:45,815 we didn't include a measurement. 24 00:01:45,815 --> 00:01:51,745 line-height is the one CSS property you'll see that uses a unitless measurement, 25 00:01:51,745 --> 00:01:56,173 which gives the most predictable results when adjusting child 26 00:01:56,173 --> 00:01:59,697 elements no matter the line height of the parent. 27 00:01:59,697 --> 00:02:03,159 This follows the MDN recommendation. 28 00:02:03,159 --> 00:02:09,285 In most cases, this is the preferred way to set line-height and 29 00:02:09,285 --> 00:02:13,833 avoid unexpected results due to inheritance. 30 00:02:13,833 --> 00:02:19,394 Our paragraphs look great with more open line-height, but our headings don't. 31 00:02:19,394 --> 00:02:26,273 We don't want California to be so far beneath Lake Tahoe in our h1 for example. 32 00:02:26,273 --> 00:02:30,608 So let's tighten up the line height for our large headings, 33 00:02:30,608 --> 00:02:34,354 about 1.1 times the height of the text should do. 34 00:02:41,483 --> 00:02:48,102 Our CSS rule for the body element works great now, but it looks a little lengthy. 35 00:02:48,102 --> 00:02:52,823 In previous courses, we learned a shorthand for the border property, 36 00:02:52,823 --> 00:02:55,748 there's one for the font property as well. 37 00:02:55,748 --> 00:02:59,821 CSS Tricks' article on the font shorthand is a good guide, 38 00:02:59,821 --> 00:03:04,066 since it's important we put the values in the correct order. 39 00:03:19,101 --> 00:03:24,866 In one statement we've declared that the font-weight should be 300, 40 00:03:24,866 --> 00:03:28,079 the size of the font should be 100%, 41 00:03:28,079 --> 00:03:33,963 which refers back to the root font size, which is currently 20 pixels. 42 00:03:33,963 --> 00:03:40,353 The line-height should be 1.5 times the height of the body copy and 43 00:03:40,353 --> 00:03:44,695 the typeface should be Work Sans pretty slick. 44 00:03:44,695 --> 00:03:50,112 See if you can use the shorthand to shorten our heading declarations as well, 45 00:03:50,112 --> 00:03:52,709 that might take a bit of creativity. 46 00:03:55,176 --> 00:04:00,476 One other property that you'll adjust less frequently than line-height, 47 00:04:00,476 --> 00:04:04,724 but can be an interesting visual effect is letter-spacing. 48 00:04:04,724 --> 00:04:10,161 Rather than adjusting the amount of space between this line of text, 49 00:04:10,161 --> 00:04:14,860 letter-spacing controls the space between each letter. 50 00:04:14,860 --> 00:04:19,423 Note that a little bit of letter-spacing goes a long way. 51 00:04:19,423 --> 00:04:23,873 Underneath our comment that reads Main Styles, 52 00:04:23,873 --> 00:04:27,788 I'm gonna adjust the class called title. 53 00:04:28,833 --> 00:04:35,948 And set the spacing between each letter to 1rem equivalent to 20 pixels. 54 00:04:38,376 --> 00:04:40,932 And that's way too much, isn't it? 55 00:04:40,932 --> 00:04:44,955 Our lead sentence is almost impossible to read. 56 00:04:44,955 --> 00:04:47,378 Let's try 1 pixel instead. 57 00:04:50,524 --> 00:04:52,049 And that's much more subtle.