CSS Font-Size Mastering Text Sizes

Introduction

The font-size property in CSS is a key tool for web developers and designers. It lets you set the size of text on a webpage, which is crucial for readability, user experience, and overall design. By using font-size, you can make sure your content looks great and works well on different devices and screen sizes.

Specification

The font-size property is defined by the CSS Fonts Module Level 4 specification. This specification sets the standard for how font-size works, ensuring consistency across different browsers and platforms. You can find the detailed guidelines in the CSS Fonts Module Level 4 documentation.

Description

The font-size property in CSS is used to set the size of text elements on a webpage. It’s essential for maintaining readability and enhancing the visual appeal of your site. You can use various units like keywords, pixels, ems, and percentages to set the font size, which provides flexibility and ensures responsiveness across different devices and screen sizes.

When you change the font-size, it also affects the sizes of font-relative length units like em, ex, and others. This means adjusting the font-size can have a cascading effect on other elements that use these relative units, making it a powerful tool for creating consistent and scalable designs.

Syntax

The font-size property in CSS is straightforward and allows for various types of values. Here is the basic syntax:

font-size: value;

The value can be any of the following types:

• Absolute size keywords: Predefined sizes like xx-small, x-small, small, medium, large, x-large, xx-large, and xxx-large.
• Relative size keywords: smaller and larger, which adjust the font size relative to the parent element’s font size.
• Length values: Units like px, em, rem, cm, mm, in, pt, pc, and others.
• Percentage values: Relative to the parent element’s font size, specified as a percentage.
• Math value: Used for math elements, applying scaling rules.
• Global values: Such as inherit, initial, revert, revert-layer, and unset.

Absolute Size Keywords

Absolute size keywords provide a straightforward way to set the font size using predefined sizes. These keywords include:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• xxx-large

These sizes are based on the user’s default font size, which is typically medium. Using absolute size keywords ensures that the text size remains consistent across different browsers and devices.

Relative Size Keywords

Relative size keywords allow you to adjust the font size relative to the parent element’s font size. The available keywords are:

• smaller
• larger

These keywords are useful when you want to create a hierarchical structure of text sizes, where child elements have larger or smaller font sizes compared to their parent elements.

Length Values

Length values provide a precise way to set the font size using specific units like pixels (px), ems (em), rems (rem), centimeters (cm), millimeters (mm), inches (in), points (pt), and picas (pc).

• Pixels (px): A static unit that is not relative to any other element. It provides pixel accuracy and is commonly used when precise control over the font size is required.
• Ems (em): A relative unit that is based on the font size of the parent element. It allows for dynamic and scalable font sizes.
• Rems (rem): A relative unit that is based on the font size of the root element (html). It ensures that the font size remains consistent across different elements without compounding issues.
• Other units (cm, mm, in, pt, pc): These units are less commonly used but provide additional options for setting the font size.

Percentage Values

Percentage values allow you to set the font size as a percentage relative to the parent element’s font size. This provides a flexible way to create scalable designs that adapt to different screen sizes and user preferences.

Math Value

The math value is used specifically for math elements and applies scaling rules to determine the computed value of the font-size property relative to the parent element’s font size.

Global Values

Global values provide a way to set the font size using universal settings:

• inherit: Inherits the font size from the parent element.
• initial: Sets the font size to its default value.
• revert: Resets the font size to the user agent’s default stylesheet value.
• revert-layer: Resets the font size to the value established by the user-agent stylesheet for the document language.
• unset: Resets the font size to its inherited value if it is inheritable, or to its initial value if not.

Example

Here is a combined example of how to use different values with the font-size property:

/* Absolute size keywords */
.xx-small {
  font-size: xx-small;
}

.x-small {
  font-size: x-small;
}

.small {
  font-size: small;
}

.medium {
  font-size: medium;
}

.large {
  font-size: large;
}

.x-large {
  font-size: x-large;
}

.xx-large {
  font-size: xx-large;
}

.xxx-large {
  font-size: xxx-large;
}

/* Relative size keywords */
.smaller {
  font-size: smaller;
}

.larger {
  font-size: larger;
}

/* Length values */
.pixel-font {
  font-size: 16px;
}

.em-font {
  font-size: 1.2em;
}

.rem-font {
  font-size: 1.5rem;
}

/* Percentage values */
.percentage-font {
  font-size: 120%;
}

/* Math value */
.math-font {
  font-size: math;
}

/* Global values */
.inherit-font {
  font-size: inherit;
}

.initial-font {
  font-size: initial;
}

.revert-font {
  font-size: revert;
}

.revert-layer-font {
  font-size: revert-layer;
}

.unset-font {
  font-size: unset;
}

And here is the corresponding HTML to see the effect:

<!DOCTYPE html>
<html>
<head>
  <title>CSS font-size Examples</title>
  <style>
    /* Absolute size keywords */
    .xx-small {
      font-size: xx-small;
    }

    .x-small {
      font-size: x-small;
    }

    .small {
      font-size: small;
    }

    .medium {
      font-size: medium;
    }

    .large {
      font-size: large;
    }

    .x-large {
      font-size: x-large;
    }

    .xx-large {
      font-size: xx-large;
    }

    .xxx-large {
      font-size: xxx-large;
    }

    /* Relative size keywords */
    .smaller {
      font-size: smaller;
    }

    .larger {
      font-size: larger;
    }

    /* Length values */
    .pixel-font {
      font-size: 16px;
    }

    .em-font {
      font-size: 1.2em;
    }

    .rem-font {
      font-size: 1.5rem;
    }

    /* Percentage values */
    .percentage-font {
      font-size: 120%;
    }

    /* Math value */
    .math-font {
      font-size: math;
    }

    /* Global values */
    .inherit-font {
      font-size: inherit;
    }

    .initial-font {
      font-size: initial;
    }

    .revert-font {
      font-size: revert;
    }

    .revert-layer-font {
      font-size: revert-layer;
    }

    .unset-font {
      font-size: unset;
    }
  </style>
</head>
<body>
  <h1>font-size Examples</h1>

  <!-- Absolute size keywords -->
  <div class="xx-small">font-size: xx-small;</div>
  <div class="x-small">font-size: x-small;</div>
  <div class="small">font-size: small;</div>
  <div class="medium">font-size: medium;</div>
  <div class="large">font-size: large;</div>
  <div class="x-large">font-size: x-large;</div>
  <div class="xx-large">font-size: xx-large;</div>
  <div class="xxx-large">font-size: xxx-large;</div>

  <!-- Relative size keywords -->
  <div class="smaller">font-size: smaller;</div>
  <div class="larger">font-size: larger;</div>

  <!-- Length values -->
  <div class="pixel-font">font-size: 16px;</div>
  <div class="em-font">font-size: 1.2em;</div>
  <div class="rem-font">font-size: 1.5rem;</div>

  <!-- Percentage values -->
  <div class="percentage-font">font-size: 120%;</div>

  <!-- Math value -->
  <div class="math-font">font-size: math;</div>

  <!-- Global values -->
  <div class="inherit-font">font-size: inherit;</div>
  <div class="initial-font">font-size: initial;</div>
  <div class="revert-font">font-size: revert;</div>
  <div class="revert-layer-font">font-size: revert-layer;</div>
  <div class="unset-font">font-size: unset;</div>
</body>
</html>

CSS Font Size Units

Ems (em)

• em is a relative unit based on the font size of the parent element.
• Useful for responsive designs as it adapts to different screen sizes.

.em-font {
  font-size: 1.5em; /* 1.5 times the font size of the parent element */
}

Rems (rem)

• rem is a relative unit based on the font size of the root (html) element.
• Ensures consistent font size across different elements without compounding issues.

html {
  font-size: 16px; /* Default font size for the root element */
}

.rem-font {
  font-size: 1.2rem; /* 1.2 times the font size of the root element */
}

Other Units (cm, mm, in, pt, pc)

• Less commonly used but useful for print stylesheets or physical dimensions.

.cm-font {
  font-size: 0.5cm;
}

.mm-font {
  font-size: 5mm;
}

.in-font {
  font-size: 0.2in;
}

.pt-font {
  font-size: 12pt;
}

.pc-font {
  font-size: 1pc;
}

Practical Example

Here’s a practical example demonstrating different length values for font size:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Font-Size Length Values</title>
  <style>
    .pixel-font {
      font-size: 16px;
    }

    .em-font {
      font-size: 1.5em; /* 1.5 times the font size of the parent element */
    }

    .rem-font {
      font-size: 1.2rem; /* 1.2 times the font size of the root element */
    }

    .cm-font {
      font-size: 0.5cm;
    }

    .mm-font {
      font-size: 5mm;
    }

    .in-font {
      font-size: 0.2in;
    }

    .pt-font {
      font-size: 12pt;
    }

    .pc-font {
      font-size: 1pc;
    }
  </style>
</head>
<body>
  <h1>Font-Size Length Values</h1>

  <div class="pixel-font">font-size: 16px;</div>
  <div class="em-font">font-size: 1.5em;</div>
  <div class="rem-font">font-size: 1.2rem;</div>
  <div class="cm-font">font-size: 0.5cm;</div>
  <div class="mm-font">font-size: 5mm;</div>
  <div class="in-font">font-size: 0.2in;</div>
  <div class="pt-font">font-size: 12pt;</div>
  <div class="pc-font">font-size: 1pc;</div>
</body>
</html>

Percentage Values

• Percentage values set the font size as a percentage of the parent element’s font size.
• Useful for scalable and responsive designs.

.parent {
  font-size: 16px; /* Base font size for the parent element */
}

.child {
  font-size: 125%; /* 125% of the parent element's font size */
}

Example:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Font-Size Percentage Values</title>
  <style>
    .parent {
      font-size: 16px; /* Base font size for the parent element */
    }

    .child {
      font-size: 125%; /* 125% of the parent element's font size */
    }
  </style>
</head>
<body>
  <h1>Font-Size Percentage Values</h1>

  <div class="parent">
    Parent font size: 16px
    <div class="child">
      Child font size: 125% of parent (20px)
    </div>
  </div>
</body>
</html>

Math Value

• The math value is for mathematical content, applying scaling rules for clear display.
• Use with MathML for structured mathematical content.

.math-content {
  font-size: math;
}

Example:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Font-Size Math Value</title>
  <style>
    .math-content {
      font-size: math;
    }
  </style>
</head>
<body>
  <h1>Font-Size Math Value</h1>

  <div class="math-content">
    <math>
      <mrow>
        <mi>x</mi>
        <mo>=</mo>
        <mfrac>
          <mrow><mn>-</mn><mi>b</mi><mo>±</mo><msqrt><mrow><mi>b</mi><mo>²</mo><mo>-</mo><mn>4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow>
          <mrow><mn>2</mn><mi>a</mi></mrow>
        </mfrac>
      </mrow>
    </math>
  </div>
</body>
</html>

Global Values

• inherit: Sets the font size to the same as the parent element.
• initial: Resets the font size to its default value.
• revert: Reverts to the user agent’s default stylesheet value.

Example:

.parent {
  font-size: 20px;
}

.child {
  font-size: inherit;
}

.reset {
  font-size: initial;
}

In this example, the .child element will inherit the font size of 20px from the .parent element, and the .reset element will have the default font size of medium.

Ex Units

Ex units are based on the x-height of the first available font, making them useful for proportional designs.

How It Works

Ex units set the font size as a multiple of the x-height of the font. For example, if the x-height is 8px, setting font-size: 2ex results in a 16px font size.

Example

.element {
  font-size: 2ex; /* 2 times the x-height of the first available font */
}

Example:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Font-Size Ex</title>
  <style>
    .element {
      font-size: 2ex; /* 2 times the x-height of the first available font */
    }
  </style>
</head>
<body>
  <h1>Font-Size Ex</h1>

  <div class="element">
    This text has a font size of 2ex.
  </div>
</body>
</html>

Formal Definition of font-size

The font-size property specifies the size of the font used for text elements. It’s crucial for readability and visual appeal.

Initial Value

The initial value for font-size is medium. If no specific size is set, the browser uses its default medium font size.

Applies To

font-size applies to all elements and text, including pseudo-elements like ::first-letter and ::first-line.

Inheritance

font-size is inherited. Child elements inherit the parent’s font size unless overridden.

Percentages

Percentage values for font-size refer to the parent element’s font size. For example, 80% means 80% of the parent’s font size.

Animation Type

font-size is animatable as a length, allowing smooth transitions between values.

Syntax

The syntax for font-size includes absolute sizes, relative sizes, lengths, percentages, and global values.

font-size = absolute-size | relative-size | length-percentage | math | global-values;

absolute-size = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large;
relative-size = smaller | larger;
length-percentage = length | percentage;
global-values = inherit | initial | revert | revert-layer | unset;

Example

.small {
  font-size: xx-small;
}

.larger {
  font-size: larger;
}

.point {
  font-size: 24pt;
}

.percent {
  font-size: 200%;
}

<!DOCTYPE html>
<html>
<head>
  <title>CSS font-size Examples</title>
  <style>
    .small {
      font-size: xx-small;
    }

    .larger {
      font-size: larger;
    }

    .point {
      font-size: 24pt;
    }

    .percent {
      font-size: 200%;
    }
  </style>
</head>
<body>
  <h1 class="small">Small H1</h1>
  <h1 class="larger">Larger H1</h1>
  <h1 class="point">24 point H1</h1>
  <h1 class="percent">200% H1</h1>
</body>
</html>

Browser Compatibility

The font-size property is widely supported across all major browsers. Here’s a quick overview:

Best Practices for Browser Compatibility

To ensure cross-browser compatibility:

1. Use Standard Units: Stick to units like px, em, rem, %, and keywords (small, medium, large, etc.).
2. Test Across Browsers: Make sure to test your web designs on different browsers.
3. Avoid Deprecated Units: Units like pt and pc are less commonly used and may not be consistent.
4. Consider Accessibility: Ensure font sizes are accessible to users with visual impairments by avoiding fixed pixel sizes (px).

See Also

If you’re interested in learning more about CSS properties related to font-size, consider exploring the following resources and related properties:

• CSS font-size-adjust Property: Adjusts font size based on aspect ratio for better legibility.
• CSS font-style Property: Sets the style of the font, like normal or italic.
• CSS font-weight Property: Defines the weight of the font, such as normal or bold.
• CSS math-depth Property: Sets the depth of mathematical expressions.
• CSS math-style Property: Styles mathematical expressions.
• Fundamental Text and Font Styling: Overview of fundamental text and font styling techniques.
• MDN Web Docs CSS Reference: Comprehensive guide to all CSS properties.
• W3C CSS Fonts Module Level 4: Official specification for CSS font-related properties.