# CSS Font Control

# font-family

# Creating Font Stacks

# Custom Web Fonts

# font-size and font-weight

The font-size property controls the height of every character inside an HTML element. There are many different units that you can use to describe the size. We will be using the rem (Root EM) unit most commonly.

The font-weight property controls how light or bold the text inside an element is. You can use the keywords light, normal, bold, lighter, or bolder. Alternately, you can use the numbers 100, 300, 500, 700, or 900.

p {
  font-size: 1.2rem;
  font-weight: 500;
  text-align: left;
}
a {
  text-decoration: underline;
}

# text-align and text-decoration

The text-align property controls how text will move around inside the content box part of the box model.

The text-decoration property allows you to show or hide an underline, overline, or line through your text.

# letter-spacing

In Graphic Design, the space between letters is usually called kerning. With kerning you can control the spacing between words, letters or specific combinations of letters.

In CSS we have the letter-spacing property which lets us set a specific amount of space to use between EVERY letter inside an element. The following example will put 3 pixels of space between every letter in all paragraphs.

p {
  letter-spacing: 3px;
}

You can use any spacing unit you want when setting the letter spacing.