Skip to main content

Web Fonts & Typography — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Web Fonts & Typography lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Bold the paragraph

    easy10 min

    Make #text bold.

  2. 2

    Use a numeric weight

    easy10 min

    Give #title a semi-bold weight of 600, lighter than a heading's default.

  3. 3

    Italicise the text

    easy10 min

    Make #text italic.

  4. 4

    Space the letters

    easy10 min

    Give #title 2px of letter spacing.

  5. 5

    Set a readable line height

    medium10 min

    With #text at 16px, use an unitless line-height of 1.5.

Find the bug(5)

  1. 1

    Fix the invalid weight keyword

    easy8 min

    The keyword for heavy text is bold.

  2. 2

    Fix the weight with a unit

    easy8 min

    A numeric font weight is unitless.

  3. 3

    Fix the wrong property

    easy8 min

    Slanted text uses font-style.

  4. 4

    Fix word spacing used for letters

    easy8 min

    This should space individual letters.

  5. 5

    Fix the cramped line height

    easy8 min

    1.5 is far more readable than 1.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace