CSS Fonts Tutorial

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

The font property is a shorthand property which 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 users 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’s some of 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 elements’ 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 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 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 sets the text to “smaller caps”, that 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!
If you enjoyed this article & would like to leave a tip — click here

Blog

Richard Rembert