Font-Weight, Font-Style, & Unitless Line-Height

Topics covered in this HTML & CSS tutorial:

Adding custom web fonts from Google Fonts, Using font-weight & font-style, Unitless line-height

Exercise Preview

Exercise Overview

In this exercise you’ll refine the typography of the page built in the previous exercise. You’ll add custom webfonts from Google Fonts, examine font-weight, font-style, and learn about the efficiency of unitless line-height.

Getting Started

The files for this exercise are very similar to where the previous exercise left off, but we went ahead and set a couple font sizes to save some time.

1. In your code editor, close any files you may have open.
2. For this exercise we’ll be working with the Tahoe Typography folder located in Desktop > Class Files > Advanced HTML CSS Class. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).
3. Open index.html from the Tahoe Typography folder.
4. Preview index.html in a browser. Our design calls for some custom web fonts and better line spacing.
5. Leave index.html open in the browser as you work, so you can reload the page to see the code changes you’ll make.

Loading Custom Web Fonts From Google Fonts

1. In a new browser tab, go to fonts.google.com
2. There are two font families we want to use (Alfa Slab One and Open Sans). In the search field at the top of the page, search for Alfa.
3. Click on Alfa Slab One.

4. On the right, click on + Select this style.

   A column should appear on the right of the page listing the Selected family.

   NOTE: If you close this panel, you can reopen it by clicking the button at the top right of the page.

5. Let’s find a second font:

   • At the top of the page click Browse fonts.
   • Search for Open.
   • Click on Open Sans in the search results.

6. On the right, click on + Select this style next to these 3 styles:

   • Light 300
   • Regular 400
   • Bold 700 italic
7. You should see a column on the right of the page listing the Selected families. If you don’t see it, open it by clicking the button at the top right of the page.

8. 2 fonts should be listed: Alfa Slab One (with 1 style) and Opens Sans (with 3 styles).

   Each style increases the download size and slightly slows down the loading of the page, so only load styles you’ll be using.

9. Copy the links which load the fonts from Google’s servers:

   <link rel="preconnect" href="https://fonts.googleapis.com"> 
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
   <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Open+Sans:ital,wght@0,300;0,400;1,700&display=swap" rel="stylesheet">
   

10. Keep this page open, but return to index.html in your code editor.

11. Paste the link below the title tag, as shown below in bold:

    <title>Tahoe Adventure Club</title>
    link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Open+Sans:ital,wght@0,300;0,400;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/normalize.css">
    

12. Save the file.

    NOTE: Putting the link to Google Fonts before links to other CSS files will start the font download as soon as possible. To learn more about font loading and what the display=swap part of the link means, read css-tricks.com/font-display-masses

    The rel=“preconnect” lines of code tell the browser to connect to the domain where Google stores its fonts. This will speed things up for when the CSS file goes to download the font files.

Adding Fonts to the Page

Now that the fonts are loaded, we must apply them to the text. We want everything to be Open Sans (except for headings) so let’s apply that to everything in the body.

1. Return to Google Fonts in the browser.

2. Under CSS rules to specify families, copy the code for the Open Sans font:

   font-family: 'Open Sans', sans-serif;
   

3. Keep this page open, but return to your code editor.
4. Open main.css from the css folder.

5. Paste the following into the body rule (at the top) as shown below:

   body {
      background: #555;
      margin: 30px;
      font-family: 'Open Sans', sans-serif;
   }
   

6. We want our two heading levels (h1 and h2) to be the Alfa Slab One font. Above the h1 rule, add the following new rule so we can style both with one rule:

   h1, h2 {
   
   }
   

7. Return to Google Fonts in the browser.

8. Under CSS rules to specify families, copy the code for the Alfa Slab One font:

   font-family: 'Alfa Slab One', cursive;
   

9. Close the Google Fonts browser tab.
10. You should still have index.html open in the browser. Leave it open so you can reload the page to see the changes you make in the code.
11. Return to main.css in your code editor.

12. Paste the code into the rule for h1, h2 as shown below:

    h1, h2 {
       font-family: 'Alfa Slab One', cursive;
    }
    

13. There are no good, consistent cursive fonts across platforms, so we don’t recommend using cursive as a fallback. We’d rather fall back to Open Sans or any sans-serif font if our custom font doesn’t load. Edit the font stack as follows:

    font-family: 'Alfa Slab One', 'Open Sans', sans-serif;
    

14. Save main.css, switch back to the browser, and reload index.html to see the new fonts.

15. Notice that the headings look extra thick (especially around the x in Come Explore). Alfa Slab One only comes in one weight (regular 400), but headings are bold by default (even if it’s faked). We’ll need to remove the bold.

Font-Weight & Font-Style

1. Return to main.css in your code editor.

2. In the h1, h2 rule add the following code shown below in bold:

   h1, h2 {
      font-family: 'Alfa Slab One', 'Open Sans', sans-serif;
      font-weight: normal;
   }
   

3. Save main.css, switch back to the browser, reload index.html, and notice:

   • The headings now look the correct thickness (look at the x in Come Explore).
   • After each h2 there are some paragraphs, but the first paragraph is a brief tagline. We want that to stand out from the others. It always follows an h2, so we can style it using an adjacent sibling selector (or next-sibling selector).
4. Return to main.css in your code editor.

5. Below the h2 rule, add the following new rule:

   h2 + p {
      font-weight: 700;
   }
   

   NOTE: The normal keyword is the same as the numeric 400 weight. 700 is the same as bold. We loaded a bold 700 italic font, so we’re using the 700 weight to be precise. For fonts that only have normal and bold weights, values from 100–500 are rendered as normal, and 600–900 are bold. For more info, see tinyurl.com/moz-fw

6. That makes the text bold, but we loaded a bold italic font. Add the following code (shown in bold) to make the text italic:

   h2 + p {
      font-weight: 700;
      font-style: italic;
   }
   

   NOTE: The font-style property accepts values of normal, italic, or oblique. If a given font family has an italic or oblique font (our font family does), the browser will use it, otherwise the browser will fake the slanted effect.

7. Save main.css and reload index.html in the browser. The first paragraph after the blue headings should be bold and italic.

Unitless Line-Height

1. Resize the browser window smaller so the Come Explore Tahoe! in the header breaks onto multiple lines. Notice that the paragraph line spacing is rather tight. Let’s increase the space to make the text easier to read.
2. Return to main.css in your code editor.

3. In the body rule at the top, add line-height as shown in bold:

   body {
      background: #555;
      margin: 30px;
      font-family: 'Open Sans', sans-serif;
      line-height: 28px;
   }
   

4. Save the file and reload index.html in the browser. The paragraphs are better, but the headings (especially Come Explore Tahoe!) are now too tight.

   What is happening? The line-height we applied to the body is inherited by all the elements inside it. By putting a fixed line height on the body, it sets that exact line height for all text on the page, including headings. A 28px line-height is way too small for the Come Explore Tahoe! h1 that has a font-size of 50px!

   We could move the line-height from body to paragraphs, but then we’d have to separately declare the line height for each element (h1, h2, etc.). Let’s try a different option, using a percentage value instead of a fixed pixel value.

5. Return to main.css in your code editor.

6. Change the line-height value to a percentage, as follows:

   body {
   
   
   

   Code Omitted To Save Space

      line-height: 175%;
   }
   

   NOTE: Why 175%? The line-height (28px) divided by the default font size (16px) equals 1.75, which is 175% when expressed as a percentage.

7. Save the file and reload index.html in the browser to see that nothing changed. We still have the same problem. Percentages are not helping us out in this regard. Why?

   When using a specified value (even a percentage) the value is static and child elements will inherit the raw number value. What we really need to use is a unitless line height. When we write the value without specifying the unit of measurement, the value is dynamic!

8. Return to main.css in your code editor.

9. Change the line-height value as shown below. Do NOT to add a unit of measure!

   body {
   
   
   

   Code Omitted To Save Space

      line-height: 1.75;
   }
   

   Setting the value to 1.75 is equivalent to setting the value to 175%, but with a crucial difference. The browser will multiply a unitless line-height with each element’s unique font-size, rather than computing the number once and then applying the same value to all the elements.

10. Save the file and reload index.html in the browser and notice:

• The paragraphs look the same.

• The headings look better, but now they have a bit too much space. The bigger the text’s font-size, the bigger the 1.75 line-height ends up being.

  NOTE: Because unitless line-heights are more flexible, we will be them (instead of px values) from now on, and recommend you use them in your work.

1. Return to main.css in your code editor.

2. To reduce the line-height of our headings. In the h1, h2 rule, add the following bold code:

   h1, h2 {
      font-family: 'Alfa Slab One', sans-serif;
      font-weight: normal;
      line-height: 1.2;
   }
   

3. Save the file and reload index.html in the browser. That’s looking better!

Optional Bonus: More Practice

1. Scroll to the copyright line of text at the bottom of the page.

   We want the copyright text to be thinner than this current normal weight. We loaded a light 300 weight, so let’s use that.

2. Return to main.css in your code editor.

3. In the footer rule, add font-weight as shown below in bold:

   footer {
      color: #ccc;
      text-align: center;
      font-weight: 300;
   }
   

4. Save main.css.

5. Switch back to the browser and reload index.html to see the text is now thinner.