CSS Fonts Tutorial
Tags: css, writing, tutorial, beginners
Published: 2022-07-25 19:56:00

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:
```css
font: normal italic small-caps bold 16px/120% "Helvetica", sans-serif;
```
This is equivalent to:
```css
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.
```css
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:
```css
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.
```css
p {
    line-height: 1.5;
}
```
We can also use the keyword values `normal`,`none` as well as a number, length (any valid [CSS unit](https://dev.to/rembertdesigns/css-units-tutorial-33eh)), 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:
```css
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:
```css
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](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)