Codectionary / Developer documentation / CSS

Font Properties

Core typography properties control how text is displayed. font-family sets the typeface (with fallbacks), font-size controls size, font-weight controls boldness, font-style controls italics, and the font shorthand can set several of these at once. Well-chosen typography is one of the highest-impact, lowest-effort improvements you can make to a design.

Syntax

font-family: name, fallback;
font-size: value;
font-weight: value;

Examples

Setting a Font Stack

Specifying a preferred font with sensible fallbacks.

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Browser tries each font in order, falling back if one is unavailable */
  1. Different text elements match the selectors in the editable sample.
  2. The font stack uses installed fonts and fallbacks; naming a font does not download it.
  3. Compare the weight, style and shorthand rules independently rather than judging them through a sample button.
HTML used by this example
<h1>Typography specimen</h1><p class="emphasis">An emphasised sentence in italic.</p><p class="light">A lighter line, if the installed font supplies that weight.</p><h2 class="heading">A complete font shorthand</h2>

Weight and Style

Controlling boldness and italics.

h1 { font-weight: 700; }         /* numeric weight, same as "bold" */
.emphasis { font-style: italic; }
.light { font-weight: 300; }      /* requires the font file to include a light weight */
  1. Different text elements match the selectors in the editable sample.
  2. The font stack uses installed fonts and fallbacks; naming a font does not download it.
  3. Compare the weight, style and shorthand rules independently rather than judging them through a sample button.
HTML used by this example
<h1>Typography specimen</h1><p class="emphasis">An emphasised sentence in italic.</p><p class="light">A lighter line, if the installed font supplies that weight.</p><h2 class="heading">A complete font shorthand</h2>

The font Shorthand

Setting several font properties in one declaration.

.heading {
  font: italic 700 24px/1.4 "Georgia", serif;
  /* style weight size/line-height family */
}
  1. Different text elements match the selectors in the editable sample.
  2. The font stack uses installed fonts and fallbacks; naming a font does not download it.
  3. Compare the weight, style and shorthand rules independently rather than judging them through a sample button.
HTML used by this example
<h1>Typography specimen</h1><p class="emphasis">An emphasised sentence in italic.</p><p class="light">A lighter line, if the installed font supplies that weight.</p><h2 class="heading">A complete font shorthand</h2>

Parameters and values

  • font-family (name list): Typeface, with comma-separated fallbacks
  • font-size (length): Text size, commonly in rem for accessibility
  • font-weight (number | keyword): Boldness, from 100 (thin) to 900 (black)
  • font-style (normal | italic | oblique): Controls italic styling

Best practices

  • Always include a generic fallback (sans-serif, serif, monospace) at the end of a font-family list, in case none of your preferred fonts load
  • Use rem for font-size rather than px, so text properly scales if a user has changed their browser's default font size for accessibility
  • Only load the specific font weights you actually use - loading all 9 weights when you only use 2 wastes bandwidth
  • Use numeric font-weight values (400, 700) rather than just "normal"/"bold" when working with variable fonts or multiple weight options

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading