CSS: font shorthand

By Xah Lee. Date: .

work in progress ai help

xtodo

The font property in CSS is a shorthand that lets you set multiple font-related properties in a single declaration.

it is very complicated. but mostly, it allows you to specify font-size and font-family , and optionally line-height.

practical examples: 

body {
  font: 1rem Arial, sans-serif;
}
body {
  font: 1rem/1.5 Arial, sans-serif;
}

/* the 1.5 is line-height.
slash before it is required.
 */

Properties Included in font Shorthand

The shorthand can include up to 7 individual properties:

Order Property Description Required?
1 font-style normal, italic, oblique No
2 font-variant normal, small-caps No
3 font-weight normal, bold, 100-900, etc. No
4 font-stretch normal, condensed, expanded, etc. No
5 font-size 16px, 1rem, 2em, etc. Yes
6 line-height 1.5, 150%, 1.2em No (but must follow size with /)
7 font-family "Arial", sans-serif, etc. Yes

Correct Syntax

font: [style] [variant] [weight] [stretch] [size / line-height] family;

Key Rules:

Examples

1. Basic Example (Most Common)

body {
  font: 1rem/1.5 Arial, sans-serif;
}

This is equivalent to:

body {
  font-size: 1rem;
  line-height: 1.5;
  font-family: Arial, sans-serif;
}

2. With Style, Weight, and Size

h1 {
  font: italic bold 2.5rem/1.2 "Georgia", serif;
}

Equivalent to:

h1 {
  font-style: italic;
  font-weight: bold;
  font-size: 2.5rem;
  line-height: 1.2;
  font-family: "Georgia", serif;
}

3. Using small-caps and font-stretch

.caption {
  font: small-caps condensed 0.9rem/1.4 system-ui, sans-serif;
}

4. System Font Keywords (Very Useful)

CSS provides shortcut keywords that apply the entire font stack of the operating system:

button {
  font: menu;           /* Uses the system's menu font */
}

code {
  font: ui-monospace;   /* System monospace font */
}

/* Other keywords: caption, icon, message-box, small-caption, status-bar */

Common Pitfalls & Tips

❌ Wrong order

/* This will NOT work */
font: bold 16px italic Arial;   /* weight before style is wrong */

✅ Correct

font: italic bold 16px Arial;

Missing required values

/* Invalid - missing font-size and font-family */
font: italic bold;

Line-height without slash

/* Wrong */
font: 1rem 1.5 Arial;

/* Correct */
font: 1rem/1.5 Arial;

Best Practices:

  1. Always declare a fallback font family (e.g., sans-serif, serif).
  2. Use rem or em for font-size for accessibility.
  3. When you only need to change size and family, the shorthand is perfect. If you need to override only one property later, use the longhand version.

Complete Demo

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .demo {
    font: italic 700 1.8rem/1.1 "Playfair Display", serif;
    color: #333;
  }
</style>
</head>
<body>
  <p class="demo">This text uses the font shorthand.</p>
</body>
</html>

Summary Table of Valid Values

Property Common Values
font-style normal, italic, oblique
font-variant normal, small-caps
font-weight normal, bold, lighter, bolder, 400, 700
font-stretch normal, ultra-condensed, condensed, semi-expanded, expanded
font-size 16px, 1rem, 1.25em, clamp(1rem, 2.5vw, 2rem)
line-height 1.5, 150%, 1.2
font-family Arial, "Helvetica Neue", system-ui, serif

Mastering the font shorthand will make your CSS much more concise and professional. Start using it for body text and headings — you’ll love how clean your stylesheets become!

CSS Font