CSS Font Properties: Sizing, Weights, Styles, and Shorthands

Master CSS font styling. Learn how to control font sizes (px, em, rem), weights (bold, regular), styles, variants, and use the font shorthand property.

Introduction

Choosing a font family is only the first step in typography design. To build a clear visual hierarchy, you must adjust the scale, thickness, and stylistic variant of your text.

CSS provides a set of core properties to control these details. From adjusting heading sizes using responsive relative units (like rem or em) to configuring variable font weights or consolidating multiple rules into a single clean shorthand declaration, mastering font styling properties is fundamental to creating accessible, polished, and readable web layouts.

What You Will Learn

  • How to adjust font sizes and the difference between px, em, and rem.
  • Configuring font weights (keyword values vs. numerical ranges).
  • Making text italicized using font-style.
  • Using font-variant for small-caps styling.
  • Declaring all typography settings using the font shorthand.

Prerequisites

Detailed Explanation: Core Font Properties

Let's break down the essential properties used to style fonts individually:

1. Font Size (font-size)

Controls the scale of the letters. Choosing the right unit is critical for responsive design:

  • Absolute Units (Pixels px): Fixed size (e.g., 16px). Simple, but does not scale if users change default browser accessibility zoom settings.
  • Relative Units (rem - Root Em): Scaled relative to the HTML root font size (usually 16px by default). E.g., 2rem equals $2 \times 16 = 32\text{px}$. This is the industry standard for accessibility.
  • Relative Units (em): Scaled relative to the font-size of its direct parent element.
html {
  font-size: 16px; /* Root font size */
}

h1 {
  font-size: 2.5rem; /* 40px */
}

2. Font Weight (font-weight)

Controls the thickness of the characters. You can use keyword descriptors or numerical values:

  • Keywords: normal (equivalent to 400), bold (700), lighter, bolder.
  • Numbers: Values ranging from 100 (Thin) to 900 (Black), in increments of 100.

| Value | Common Label | Value | Common Label | | :--- | :--- | :--- | :--- | | 100 | Thin / Hairline | 500 | Medium | | 300 | Light | 700 | Bold | | 400 | Regular / Normal | 900 | Black / Heavy |

3. Font Style (font-style)

Mainly used to define italicized text:

  • normal: Standard upright text.
  • italic: Renders text in the italicized version of the font (if available).
  • oblique: Forces the browser to mathematically tilt the normal characters (used when no true italic font file is loaded).

4. Font Variant (font-variant)

Converts lowercase text into smaller version of uppercase letters:

  • normal: Standard formatting.
  • small-caps: Turns lowercase letters into scaled uppercase glyphs.
.card-header {
  font-variant: small-caps;
}

The Font Shorthand Property

To keep your code concise, you can combine all these rules into a single font property. However, you must follow a strict syntax order:

$$\text{font: style} \rightarrow \text{variant} \rightarrow \text{weight} \rightarrow \text{size/line-height} \rightarrow \text{family};$$

/* Shorthand declaration */
p {
  font: italic small-caps bold 1.2rem/1.6 "Outfit", sans-serif;
}

> [!IMPORTANT] > When using font shorthand, the font-size and font-family parameters are MANDATORY. If either is missing, the entire CSS shorthand rule is ignored. The line-height is optional but must be declared immediately after size, separated by a slash (e.g. 1.2rem/1.6).

Visual Learning Diagram (Mermaid)

graph LR
    Shorthand[font: shorthand] --> Style[italic]
    Shorthand --> Variant[small-caps]
    Shorthand --> Weight[bold]
    Shorthand --> Size[1.2rem]
    Shorthand --> Slash[/]
    Shorthand --> LineHeight[1.6]
    Shorthand --> Family["'Inter', sans-serif"]

Code Examples

Example 1: Creating a Clean Article Heading Hierarchy

Here is a responsive typography system using rem scaling:

article {
  /* Set parent boundary scale */
  font-size: 16px;
}

article h1 {
  font-size: 2.5rem;      /* 40px */
  font-weight: 800;      /* Extra Bold */
  font-style: normal;
}

article h2 {
  font-size: 1.875rem;    /* 30px */
  font-weight: 600;      /* Semi Bold */
}

article p {
  font-size: 1rem;        /* 16px */
  font-weight: 400;      /* Regular */
}

Example 2: Interactive Card Status Badge

Use small-caps and bold weights to style a status label:

.badge-active {
  font-style: normal;
  font-variant: small-caps;
  font-weight: 700;
  font-size: 0.75rem;     /* 12px */
  
  color: #10b981;
  background-color: #d1fae5;
  padding: 4px 8px;
  border-radius: 4px;
}

Best Practices & Common Mistakes

  • Avoid Pixels for Body Text: Hardcoding font-size: 14px on the body element disables font scaling for visually impaired users who set their default browser size to Large. Always use relative units (rem) so text scales with the user's settings.
  • Order of Shorthand: A common mistake is writing the family before the size: font: "Inter" 16px bold; (invalid). Always place size and family at the end.

FAQs

Q: What is the difference between em and rem? A: rem is always relative to the root (<html>) element font-size (usually 16px). em is relative to the parent element's font-size. If a list item has font-size: 2em inside a div with font-size: 2em, the list item renders at 4 times the base size.

Q: Can I use any number for font weight? A: If you are using standard static font files, you can only use round hundreds supported by that font (e.g. 300, 400, 700). However, if you are using modern Variable Fonts, you can specify any exact weight number (like 435 or 682).

Summary

CSS font properties define visual attributes of text. While font-size adjusts dimensions (recommending relative rem units), font-weight configures thickness, font-style handles italics, and font-variant manages small-caps. These parameters can be declared together inside the font shorthand.

Related Articles

Next Tutorial

How do we control spacing, alignment, and formatting of text layouts? Let's check: Text Spacing.

← Back to Syllabus