EFFICIENT DEV
<< See other exercices

The basics of CSS typography

Learn the properties making up a typography (font-family, font-size, line-height, font-weight, letter-spacing, word-spacing)

The basics of CSS typography

In this section, you'll learn the properties making up a typography :

1 - font-family

The font-family represents the font used for the text

1. Change font-family field to Arial with "font-family: Arial;" in the style.css file
2. Change font-family field to Helvetica with "font-family: Helvetica;" in the style.css file

2 - font-size

This represents the size of your text

Recommended units: pxemrem
1. Change font-size to 10px and see the text become smaller
2. Change font-size to 30px and see the text become bigger

3 - line-height

This represents the height of each line with the font you applied

Recommended units: em
1. Set the line-height to 2em to make the text wider
2. Set the line-height to 1em to make the text more condensed

4 - font-weight

This represents the font chosen for your text

Recommended units: lighternormalbold100 | 200 | ... | 900
1. Change font-weight to one of the values between lighter, normal, bold, bolder or 100,200, ... ,900

5 - letter-spacing

This represents the spacing between each letter

Recommended units: em
1. Set the letter-spacing to 0.1em to make the text wider
2. Set the letter-spacing to -0.1em to make the text more condensed

6 - word-spacing

This represents the spacing between each word

Recommended units: em
1. Set the word-spacing to 1em to make the text wider
2. Set the word-spacing to -1em to make the text more condensed
Default version

Hello johny 1
Hello johny 2

Updated version

Hello johny 1
Hello johny 2

style.css
Loading...
🎉
If you enjoyed this tutorial, share it to other people !


Every week, I publish a new tutorial / section.
Follow me on twitter to be notified when a new section is out (every week)

If you have any question or suggestion, please reach out on twitter also 🤗