Text and fonts

Most of any site is text, and its styling decides whether it is pleasant to read. CSS controls the font, the letter size, the spacing between lines and the alignment. Text properties are inherited: set on body, they apply to the whole page.

Font family

font-family lists fonts separated by commas. The browser takes the first one available on the device, and the last one is a generic family — a fallback that always exists:

<p style="font-family: Georgia, serif;">Georgia — a serif font</p>
<p style="font-family: Arial, sans-serif;">Arial — a sans-serif font</p>
<p style="font-family: Consolas, monospace;">Consolas — monospace</p>

A name of several words is put in quotes: "Times New Roman".

Size and weight

font-size sets the letter size, and font-weight sets the thickness. Weight is a number from 100 to 900: 400 is regular text, 700 is bold:

<style>
  .big { font-size: 24px; }
  .light { font-weight: 300; }
  .bold { font-weight: 700; }
</style>
 
<p class="big">Large text</p>
<p class="light">Light text</p>
<p class="bold">Bold text</p>

A light weight shows only if the font has that variant; otherwise the browser picks the closest one.

Italics and line height

font-style: italic turns on italics. line-height sets the spacing between lines; a number without units is a multiplier of the font size:

<style>
  .text {
    font-style: italic;
    line-height: 1.8;
  }
</style>
 
<p class="text">Long text is easier to read when there is air between the lines. For body text a value from 1.4 to 1.8 is common.</p>

Alignment

text-align aligns the lines inside a block: left, center, right or justify — to both edges:

<p style="text-align: left;">Left aligned</p>
<p style="text-align: center;">Centered</p>
<p style="text-align: right;">Right aligned</p>

text-align moves the text inside the block, not the block itself.

Text decoration

text-decoration adds or removes lines — that is how the underline is removed from links. text-transform changes the letter case, and letter-spacing changes the space between letters:

<style>
  .plain { text-decoration: none; }
  .caps { text-transform: uppercase; letter-spacing: 2px; }
</style>
 
<p><a class="plain" href="#">A link without an underline</a></p>
<p class="caps">capital letters</p>

The markup has the words in lowercase — CSS made them capitals.

Your own font

To make a font look the same for everyone, the font file is loaded with an @font-face rule, and then its name is used as usual:

@font-face {
  font-family: "Inter";
  src: url("fonts/inter.woff2") format("woff2");
}
 
body {
  font-family: "Inter", sans-serif;
}

The woff2 format is compressed and suits websites. Ready-made fonts with such files are available in libraries like Google Fonts. More about @font-face, font-display and variable fonts is in the lesson "Web fonts".

Common mistake

Without a generic family at the end of the list, a missing font is replaced by the browser's default — usually a serif one, even if you wanted a clean sans-serif:

<p style="font-family: 'Nonexistent Sans';">No fallback</p>
<p style="font-family: 'Nonexistent Sans', sans-serif;">With a sans-serif fallback</p>

Always end font-family with one of the generic families.