Font Properties Overview (font-family, font-size, font-weight)

font-family

The font-family property sets the typeface. It accepts a list of fonts separated by commas, so the browser can fall back to the next option if the first is not installed or has not loaded yet.

body {
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

The final entry should always be a generic family (sans-serif, serif or monospace) as a last-resort fallback that every browser understands.

font-size

Controls how large the text renders. Sizing in rem is the common recommendation, since it scales consistently with the root font size and respects a user's accessibility settings.

h1 { font-size: 2.5rem; }
p  { font-size: 1rem; }

font-weight

Controls how bold text appears, either with keywords or numeric values from 100 (thinnest) to 900 (boldest). A numeric weight only renders if the loaded font file actually includes that weight.

Other Common Text Properties

• font-style: italic - slants the text.
• text-transform: uppercase - changes casing without editing the source text.
• text-decoration: underline - adds or removes underlines, useful for resetting default link underlines.
• letter-spacing - adjusts space between characters, often used for small uppercase headings.