Lab exercises are designed to help you gain practical experience with web technologies. You should elaborate on these exercises to confirm you understand and deploy the learning you find here in your own code.

CSS fonts

This is a quick demonstration of how to work with fonts.

Let’s begin with a simple document, index.html. We have a paragraph (block) with three <span> elements (inline) containing text.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>
        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
        <span>Itaque, in. Aliquam ab magnam libero reprehenderit amet, molestias cum!</span>
        <span>Temporibus illo harum cumque, reiciendis distinctio magni minus officia suscipit explicabo consectetur!</span>
    </p>
</body>
</html>

We can add a few styles to style.css to highlight the text.

1
2
3
4
5
6
7
8
p {
    font-size: 2em;
}

span {
    background: hsl(50, 80%, 50%, 0.2);
    border: 0.5px solid hsl(50, 80%, 50%);
}

The result is some large text with the <span> elements clearly indicated.

Line height

The line-height property controls the space between the lines. The default value is usually 1.1.

1
2
3
4
5
6
7
8
9
p {
    font-size: 2em;
    line-height: 1;
}

span {
    background: hsl(50, 80%, 50%, 0.2);
    border: 0.5px solid hsl(50, 80%, 50%);
}

It is advised to not use units for line-height as it can cause problems. Unitless values should be relative to the font size.

Reducing the line-height squeezes the text causing overlap.

A value of 1.0 should make the space between text baselines the same as the font size, leaving no space for descenders such as in p, g and q.

Expanding to a larger value is good for readability in normal paragraphs.

1
2
3
4
5
6
7
8
9
p {
    font-size: 2em;
    line-height: 1.4;
}

span {
    background: hsl(50, 80%, 50%, 0.2);
    border: 0.5px solid hsl(50, 80%, 50%);
}

Letter and word spacing

We have some fine-grained control over the way a font is presented using letter-spacing to modify the spacing between letters and word-spacing to modify the space between words.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
p {
    font-size: 1.2em;
    line-height: 1.4;
}

span {
    background: hsl(50, 80%, 50%, 0.2);
    border: 0.5px solid hsl(50, 80%, 50%);
}

p:nth-of-type(2) {
    letter-spacing: -3px;
    word-spacing: 1em;
}

p:nth-of-type(3) {
    letter-spacing: 5px;
    word-spacing: -0.5em;
}

Notice the :nth-of-type selector pseudoclass allows us to select the second and third paragraphs individually to add the new styles.

Obviously we have taken this to the extreme and messing with these parameters is not always recommended, however it can be useful for things like titles.

Changing fonts

Swapping fonts is easy enough using the font-family property.

Here we use the (usually much better) system-ui font.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
p {
    font-size: 1.2em;
    line-height: 1.4;
    font-family: system-ui;
}

span {
    background: hsl(50, 80%, 50%, 0.2);
    border: 0.5px solid hsl(50, 80%, 50%);
}

p:nth-of-type(2) {
    letter-spacing: -3px;
    word-spacing: 1em;
}

p:nth-of-type(3) {
    letter-spacing: 5px;
    word-spacing: -0.5em;
}

The system-ui font is always available and can appear different depending on the platform.

Notice that by swapping the font we have actually changed the size of the text and the content has shifted position slightly.

Not all fonts are available on all platforms. Custom fonts can be added by linking to the necessary files.

Fonts come in all sorts of formats,

Google fonts

An easy way to get nice fonts quickly is to use google fonts. Simply visit the site, select a font and choose which variants to include.

Once you have selected what you want in your site, you should see options in the side panel to use on the web.

Find the @import formatted output and copy it.

You can paste it into your document directly.

1
2
3
<style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');
</style>

Alternatively, to keep things simple, we can simply add the @import statement to our CSS file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');

p {
    font-size: 1.2em;
    line-height: 1.4;
    font-family: Roboto;
    font-weight: 300;
    max-width: 70ch;
    margin-inline: auto;
}

p:nth-of-type(2) {
    font-weight: 100;
}

p:nth-of-type(3) {
    font-weight: 400;
}

In this case, we’ve added a few different weights (thin, light and normal) of the Roboto font and used them in the different paragraphs.

Notice we also limited the paragraph width to 70ch (70 characters) to improve readability on larger device widths. We also centered the paragraphs by setting margin-inline to auto.

@font-face

Looking through google fonts provides a lot of options but it doesn’t do anything special, the google font system simply links out to files served on the google servers.

If you want to use a different font then @font-face can be used to specify custom font files (e.g. otf, woff etc.).

You can see how to do so by visiting the url in our @import statement. This code can be included directly in a CSS file without using google fonts.

To host your own fonts, download them into your project (e.g. in a fonts folder) and use a custom @font-face rule to define when the files should be used.

More stuff about text

There’s plenty more to learn about formatting text.

Research the text-decoration, text-transform and text-shadow properties.

Also learn about breaking text and the white-space property.

See this article for more details of how fonts and line-height work. In truth, it’s complicated.