The previous videos looked at different ways to customize text with CSS. See how to apply those techniques to your projects.
- [Instructor] In the last exercise we used Google Fonts. Let's go back and take a look at the options for selecting different typefaces and font weights. After you've selected your font choices open the drawer and go to this Customize tab. Here we'll see options for different font weights. For my selection Caveat only has regular and bold and Open Sans has many more options. You can choose as many as you'd like but the more you choose, the more resources your page has to load.
So only add what you need. I'll stick with just regular for Caveat and I'll add bold for Open Sans. When you select multiple weights it will be added to the embed code. So let's go back over to the Embed tab. Let's go ahead and copy the new embed code. You can see right at the end that my font weights have been added. Back in the HTML page let's update this.
Now, let's make a small change to the font weights. For the h1 and h2 headings I'm using my decorative font, Caveat. Personally, I like the regular typeface better for this font so I'm going to remove the default bold style from the headings. In the CSS file I already have a declaration block for the h1s and h2 headings. So here, I'm going to add a font weight of 400 just to remove the default bold and set it back to normal.
Let's go back to browser and check our changes. For this particular font family the change was subtle, so you may have no noticed too much of a difference. But good design doesn't always have to be drastic. There's definitely more we can do here with the typography styles, but I think it's time to address the spacing around these elements and also talk about page layouts.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property