CSS

Text & Fonts

font-family picks the typeface, font-size controls how big the text is, font-weight controls boldness, and text-align controls horizontal alignment.

Example 1: a font stack with a fallback

h1 { font-family: Georgia, "Times New Roman", serif; }

The browser tries each font left to right and uses the first one actually installed on the visitor's device, falling back to the generic serif at the end if neither named font is available. Always end a font list with a generic fallback (serif, sans-serif, or monospace) — without it, a visitor missing every named font sees the browser's unpredictable default instead of something in the style family you actually intended.

Example 2: weight and alignment together

p {
  font-weight: 600;
  text-align: justify;
}

font-weight accepts keywords (normal, bold) or a number from 100 (thin) to 900 (black) for finer control when a typeface supports it. text-align: justify stretches each line so both edges line up evenly — common in print, used more sparingly on the web since it can create uneven gaps between words on narrow columns.

<!DOCTYPE html>
<html>
<head>
<style>
  h1 { font-family: Georgia, serif; text-align: center; }
  p { font-family: Arial, sans-serif; font-size: 16px; font-weight: 600; text-align: justify; }
</style>
</head>
<body>

  <h1>A Serif Heading, Centered</h1>
  <p>A bolder, sans-serif paragraph, justified so both edges line up evenly across the page.</p>

</body>
</html>

← The Box Model Flexbox →

Text & Fonts

Example 1: a font stack with a fallback

Example 2: weight and alignment together

Cookie preferences

Strictly necessary

Analytics

Marketing