1 00:00:00,330 --> 00:00:03,459 We've had a look at the mockup a few times at this stage, and 2 00:00:03,459 --> 00:00:05,963 I'm sure you've noticed by now that the font or 3 00:00:05,963 --> 00:00:10,380 typeface is different from what we've been seeing on our webpage. 4 00:00:10,380 --> 00:00:14,396 In this video, we'll jump into the captivating world of text and 5 00:00:14,396 --> 00:00:15,280 fonts in CSS. 6 00:00:16,280 --> 00:00:21,640 Let's begin by exploring some fundamental font-related CSS properties. 7 00:00:21,640 --> 00:00:26,265 Font family, the font family property allows you to specify the typeface or 8 00:00:26,265 --> 00:00:28,330 font for your text. 9 00:00:28,330 --> 00:00:33,799 It's a pivotal element in establishing the overall style of your website's text, 10 00:00:33,799 --> 00:00:40,190 for example, font-family sans-serif, will give us a modern sans-serif font. 11 00:00:40,190 --> 00:00:45,690 Font size, the font size property is all about controlling the size of your text. 12 00:00:45,690 --> 00:00:48,778 It's a critical factor in setting the readability and 13 00:00:48,778 --> 00:00:51,630 visual hierarchy of your content. 14 00:00:51,630 --> 00:00:56,060 From small text for fine print to large headings for emphasis, 15 00:00:56,060 --> 00:00:58,890 font size is a powerful tool. 16 00:00:58,890 --> 00:01:05,200 For example, font size 72 pixels, we'll set our text to 72 pixels. 17 00:01:05,200 --> 00:01:09,206 Font weight, font weight enables you to determine the thickness or 18 00:01:09,206 --> 00:01:10,980 weight of your text. 19 00:01:10,980 --> 00:01:16,630 This property is key to creating contrast and emphasis within your content. 20 00:01:16,630 --> 00:01:20,027 Whether it's a light, regular, or bold weight, 21 00:01:20,027 --> 00:01:23,750 it can affect the visual appeal and impact of your text. 22 00:01:23,750 --> 00:01:28,380 For example, font-weight bold will embolden the font. 23 00:01:28,380 --> 00:01:31,930 Next, we'll explore the concept of a font stack. 24 00:01:31,930 --> 00:01:36,668 In the context of CSS, a font stack is a list of fonts that a web browser 25 00:01:36,668 --> 00:01:40,200 should apply in order of preference. 26 00:01:40,200 --> 00:01:44,821 This ensures that if a particular font isn't available on a user's device, 27 00:01:44,821 --> 00:01:47,855 an appropriate alternative is used. 28 00:01:47,855 --> 00:01:51,103 Font stacks are crucial for ensuring consistent and 29 00:01:51,103 --> 00:01:54,305 legible text across various platforms. 30 00:01:54,305 --> 00:01:59,015 For example, we may want to use Havetica Neue for our website. 31 00:01:59,015 --> 00:02:03,940 This is great if the visitor is a macOS user as Havetica Neue is 32 00:02:03,940 --> 00:02:06,460 a built in macOS font. 33 00:02:06,460 --> 00:02:10,030 However, Windows users may not have this font installed and 34 00:02:10,030 --> 00:02:13,060 will have trouble viewing your website. 35 00:02:13,060 --> 00:02:18,430 We can then assign a Windows friendly font, Arial, to be used instead. 36 00:02:18,430 --> 00:02:22,253 Finally, we'll want to specify a generic sans-serif font for 37 00:02:22,253 --> 00:02:25,860 any systems that don't have either typeface. 38 00:02:25,860 --> 00:02:29,966 A safe font stack to use here is font-family, 39 00:02:29,966 --> 00:02:33,690 Helvetica Neue, Arial, sans-serif. 40 00:02:33,690 --> 00:02:37,384 Now I'm sure you're thinking, what if you wanted your website to have 41 00:02:37,384 --> 00:02:41,050 the correct font no matter what computer was viewing it? 42 00:02:41,050 --> 00:02:43,290 Well, the world of typography is vast and 43 00:02:43,290 --> 00:02:47,510 you don't have to limit yourself to the standard system fonts. 44 00:02:47,510 --> 00:02:52,060 There are web font libraries out there that you can use in your website. 45 00:02:52,060 --> 00:02:54,770 Google Fonts is one of these libraries. 46 00:02:54,770 --> 00:02:56,270 Let's check it out. 47 00:02:56,270 --> 00:03:02,700 Head over to fonts.google.com, or follow the link in the teacher's notes below. 48 00:03:02,700 --> 00:03:08,310 And here you'll see a huge library of fonts that are free to use from Google. 49 00:03:08,310 --> 00:03:14,290 We'll be using Playpen Sans, which we can search for up here in the search bar. 50 00:03:14,290 --> 00:03:17,880 There should only be one result, so click through to that page. 51 00:03:19,180 --> 00:03:23,082 This page will showcase the name of the font, an example, and 52 00:03:23,082 --> 00:03:27,670 then if we scroll down, we'll see lots of different weights. 53 00:03:27,670 --> 00:03:32,400 These match up to the font weight property that we learned about earlier. 54 00:03:32,400 --> 00:03:36,366 This section allows us to select the weights that we foresee using in our 55 00:03:36,366 --> 00:03:37,740 project. 56 00:03:37,740 --> 00:03:42,168 For us, we'll only need the regular weight and bold weight, 57 00:03:42,168 --> 00:03:46,950 so let's select regular 400 and extra bold 800. 58 00:03:46,950 --> 00:03:51,510 You'll see a selected family panel pop up on the right containing all 59 00:03:51,510 --> 00:03:54,980 the type faces and weights we want to use. 60 00:03:54,980 --> 00:04:00,217 Scrolling down, we can see the use on the web section, which is what we want. 61 00:04:00,217 --> 00:04:03,337 There are two ways to link this to our project and 62 00:04:03,337 --> 00:04:08,430 we'll use the Add import method, so click on that radio button. 63 00:04:08,430 --> 00:04:12,680 We'll select Add Import up to the semicolon and copy it. 64 00:04:13,730 --> 00:04:17,122 Now navigate to the very top of our CSS file and 65 00:04:17,122 --> 00:04:21,540 paste this in before the universal selector. 66 00:04:21,540 --> 00:04:25,100 This links the font to our CSS file so that we can use it. 67 00:04:26,110 --> 00:04:30,540 Now we'll need to specify where to use that font in our CSS. 68 00:04:30,540 --> 00:04:34,673 Back in the Google Fonts page, under the Add Import Text box, 69 00:04:34,673 --> 00:04:38,120 we can see the font stack suggested for us. 70 00:04:38,120 --> 00:04:40,620 Let's copy this and head back to our CSS. 71 00:04:41,800 --> 00:04:45,975 We want all the text on our page to have this font family applied, so 72 00:04:45,975 --> 00:04:48,300 we can pop this declaration in body. 73 00:04:49,490 --> 00:04:51,790 Let's save our file and refresh the page. 74 00:04:53,870 --> 00:04:59,440 And we can see that the play pen sans typeface is being used for all our texts. 75 00:04:59,440 --> 00:05:02,430 It's really starting to look like the mockup. 76 00:05:02,430 --> 00:05:07,380 In addition to font properties, there are also properties that handle text styling. 77 00:05:07,380 --> 00:05:12,120 We'll introduce two very common properties that we'll use in this project. 78 00:05:12,120 --> 00:05:17,580 Text-align is just like the text alignment feature in your favorite word processor. 79 00:05:17,580 --> 00:05:22,120 This aligns text to the left, center, or right of its container. 80 00:05:22,120 --> 00:05:27,944 For example, text-align:center will align the selected HTML text element or 81 00:05:27,944 --> 00:05:29,751 elements to the center. 82 00:05:29,751 --> 00:05:34,880 Line-height is another word processor feature that you may be familiar with. 83 00:05:34,880 --> 00:05:38,240 This controls the space between lines of text. 84 00:05:38,240 --> 00:05:43,040 For example, line-height:2 would spread the content out vertically. 85 00:05:43,040 --> 00:05:46,439 These properties are vital for fine tuning the appearance and 86 00:05:46,439 --> 00:05:47,880 readability of your tax. 87 00:05:49,040 --> 00:05:53,043 Let's use text-align to center align the header, nav, 88 00:05:53,043 --> 00:05:56,240 and footer content using a new CSS role block. 89 00:05:57,440 --> 00:06:00,447 I'll type header, nav, footer, 90 00:06:00,447 --> 00:06:05,770 then in the declaration type text-align and set it to center. 91 00:06:06,830 --> 00:06:11,392 We'll also use text align to center aligned spaghetti carbonara, 92 00:06:11,392 --> 00:06:15,152 which is a heading 2, so we'll select the h2 tag, and 93 00:06:15,152 --> 00:06:20,430 in the declaration block, we'll set the text align to center. 94 00:06:20,430 --> 00:06:25,410 We'll also want to make this font size a little larger to match mockup, 95 00:06:25,410 --> 00:06:26,740 like 36 pixels. 96 00:06:27,900 --> 00:06:32,342 We'll also increase the line spacing between the P and LI elements so 97 00:06:32,342 --> 00:06:35,180 it matches the mockup better. 98 00:06:35,180 --> 00:06:39,260 Below our h2 selector, we'll select the paragraph and list item. 99 00:06:40,350 --> 00:06:44,210 Then we'll give it a line height of 2 so there's double spacing. 100 00:06:45,410 --> 00:06:50,306 Finally, we'll make all the meat related lines thicker by giving them a font 101 00:06:50,306 --> 00:06:54,990 weight of 800, which is one of the styles we selected in Google Fonts. 102 00:06:56,170 --> 00:07:00,740 Find the .meet CSS roadblock we've already been working in. 103 00:07:00,740 --> 00:07:06,289 Oops, looks like I forgot the semicolon after the hex color, I'll add that in. 104 00:07:06,289 --> 00:07:12,477 Now underneath this property I'll add the font weight property setting it to 800. 105 00:07:12,477 --> 00:07:16,422 Save the file and refresh the page. 106 00:07:16,422 --> 00:07:20,229 Nice, we're getting closer and closer to the mockup. 107 00:07:20,229 --> 00:07:25,725 Mastering font related CSS properties font stacks and Google Fonts empowers you 108 00:07:25,725 --> 00:07:31,729 to create captivating typography, adding depth and personality to your web designs.