Fonts

font-family and the fallback stack

List fonts in order of preference. The browser uses the first one available, falling back to the next. End with a generic family (sans-serif, serif).

<style>
  .sans { font-family: Arial, Helvetica, sans-serif; }
  .serif { font-family: Georgia, 'Times New Roman', serif; }
  p { font-size: 18px; margin-bottom: 6px; }
</style>
<p class="sans">Sans-serif: clean and modern.</p>
<p class="serif">Serif: classic and formal.</p>

The comma-separated list in font-family is a fallback stack — a list of preferences. For .sans the browser tries Arial first; if Arial is missing it tries Helvetica; if that is gone too it uses any sans-serif font the device has. The .serif stack works the same way, ending in the generic serif. Always end with a generic family (sans-serif or serif) so the page never falls back to nothing.

Size, weight and style

<style>
  .big { font-size: 28px; font-weight: 700; }
  .quote { font-style: italic; color:#5b6178; }
</style>
<p class="big">Big and bold (700)</p>
<p class="quote">Italic for a quote</p>

.big combines two properties: font-size: 28px makes the text large and font-weight: 700 makes it bold (700 is the same as bold; the scale runs 100–900). .quote uses font-style: italic to slant the text, which reads as a quotation. These three — size, weight and style — are the everyday controls for emphasis.