CSS <relative-size> Data Type

CSS <relative-size> Data Type

The CSS <relative-size> data type represents a font size relative to the inherited font size of the parent element. It uses the smaller and larger keywords to decrease or increase the font size without specifying an exact length or percentage.

Syntax

The <relative-size> data type accepts two keyword values:

<relative-size> = larger | smaller

These keywords are used as values of the font-size property:

font-size: smaller;
font-size: larger;

Relative-size Values

The resulting size is determined relative to the parent element's computed font size rather than representing a fixed physical size.

smaller Keyword

The smaller keyword requests a font size smaller than the inherited font size. The browser determines the resulting size based on the parent element's computed font-size.

.smaller {
  font-size: smaller;
}

This makes smaller useful when text should be reduced relative to its surrounding text without assigning a specific unit such as px, em, or rem.

larger Keyword

The larger keyword requests a font size larger than the inherited font size. As with smaller, the resulting size depends on the parent's computed font-size.

.larger {
  font-size: larger;
}

The keyword provides relative enlargement without requiring the author to calculate a specific font size.

Relative Font Sizing

The smaller and larger keywords are relative to the parent element's font size. They do not correspond to fixed pixel values, so the resulting size can change when the inherited font size changes.

.parent {
  font-size: 20px;
}
.child-small {
  font-size: smaller;
}
.child-large {
  font-size: larger;
}

This behavior differs from the <absolute-size> keywords, which use named size categories such as small, medium, and large.

<relative-size> Example

The following example compares the inherited font size with the smaller and larger values:

.parent {
  font-size: 20px;
}
.smaller {
  font-size: smaller;
}
.larger {
  font-size: larger;
}

The browser calculates both relative sizes from the parent element's 20px font size.

Related CSS Properties

The <relative-size> data type is used by the CSS font-size property and can also appear as part of the font shorthand:

• font-size
• font

Specifications

The <relative-size> data type is defined in the CSS Fonts Module Level 4 .