DEV Community

Cover image for CSS Fonts Tutorial
Richard Rembert
Richard Rembert

Posted on • Edited on

CSS Fonts Tutorial

#css #writing #tutorial #beginners

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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!
Buy Me A Coffee If you enjoyed this article & would like to leave a tip — click here

🌎 Let's Connect

Top comments (0)