CSS Fonts Tutorial

In this tutorial, we’ll be learning about working with fonts in CSS!

The font property is a shorthand property that can combine a number of sub-properties in a single declaration. For example:

font: normal italic small-caps bold 16px/120% "Helvetica", sans-serif;

This is equivalent to:

font-stretch: normal;
font-style: italic; 
font-variant: small-caps; 
font-weight: bold; 
font-size: 16px; 
line-height: 120%; 
font-family: "Helvetica", sans-serif;

Let’s review each of these properties in detail!

CSS Font properties

Font-family

The font-family property sets the font family that the element will use.

The selected font is not a single font face but one of a “family”, as a font is composed of a number of sub-fonts. Such as bold, italic, light, etc.

body {
    font-family: Helvetica;
}

The font family name matches either a font that is embedded on the page or available on the user’s system.

We could also choose multiple fonts like so:

body {
    font-family: Helvetica, Arial, sans-serif;
}

In this case, the browser will choose the next font, if the first cannot be used. This might happen if it’s either not found on the user's local machine, or if the server that the font is hosted in is down.

Font types are typically classified as Serif, Sans-Serif, or Monospace fonts. Here are some of the most popular:

Serif: Georgia, Times New Roman

Sans-Serif: Arial, Helvetica, Verdana, Lucida Grande , Trebuchet MS

Monospace: Courier, Courier New, Lucida Console: Courier, Courier New, Lucida Console

Line-height

The line-height property sets the amount of space above and below our element.

p {
    line-height: 1.5;
}

We can also use the keyword values normal, none as well as a number, length (any valid CSS unit), or percentage (being the elements’ font size multiplied by the %).

Font-weight

The font-weight property sets the width (or thickness) of each of the characters of a font. You can use the following values:

• normal
• bold
• bolder
• lighter Note that bolder & lighter are relative to the element's parent.

Numeric values can also be used:

• 100
• 200
• 300
• 400 (equivalent to normal)
• 500
• 600
• 700 (equivalent to bold)
• 800
• 900

With 100 being the lightest font, and 900 being the boldest.

For values other than 400 or 700 to have an effect, the font being used must have built-in faces that match these weights.

Font-stretch

With font-stretch we can choose a narrow or wide face of the font. Assuming the font being used contains corresponding font faces.

The possible values are:

• ultra-condensed
• extra-condensed
• condensed
• semi-condensed
• normal
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded

Font-style

The font-style property accepts one of three possible values: normal, italic, and oblique.

For example, to set our font to italic:

p {
  font-style: italic;
}

There is very little difference between using italic and oblique. Both apply a sloping effect to the text.

Font-size

The font-size property is used to determine the size of fonts. For example:

p {
  font-size: 20px;
}

You either use a valid length value (such as px, em, rem a percentage, etc), or a predefined value keyword.

The available keyword values are:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• smaller
• larger

With both smaller & larger being relative to the parent element.

Note that font-size is a mandatory value. When using the font shorthand property, the size must be set (or it will be invalid)!

Font-variant

The font-variant property is a bit of a relic. It was originally used to set text to small caps, it had 3 values:

• normal
• inherit
• small-caps

Small caps set the text to “smaller caps”, which is smaller than the regular uppercase letters.

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!

🌎 Let's Connect

• Portfolio

• Twitter

• LinkedIn

• Hashnode

• Devto

• Medium

• Github

• Codepen