CSS provides several properties for controlling how text is displayed. These properties allow you to select a font, change its size, make it bold or italic, adjust spacing and create readable layouts.

The font-family property specifies the font used to display text.

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

The font-size property controls the size of text. Common units include px, em, rem and percentages.

.small {
  font-size: 14px;
}

.medium {
  font-size: 20px;
}

.large {
  font-size: 32px;
}

The font-weight property controls how thick or light the characters appear.

.normal {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.bold {
  font-weight: 700;
}

.heavy {
  font-weight: 900;
}

The font-style property is commonly used to display normal, italic or oblique text.

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

The line-height property controls the vertical distance between lines of text. It is especially important for paragraphs and long-form content.

p {
  font-size: 16px;
  line-height: 1.7;
}

The font property can combine several font properties into one declaration.

.text {
  font: italic 700 20px/1.6 Arial, sans-serif;
}

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

A font stack provides fallback choices so the browser can use an available font when the first choice is not installed.

Web fonts can be loaded from external font services. For example, a website can use the Poppins family.

<link
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"
  rel="stylesheet">

body {
  font-family: "Poppins", sans-serif;
}

h1 {
  font-size: clamp(28px, 5vw, 52px);
}

clamp() can create a font size that grows with the viewport while staying within a minimum and maximum size.