CSS <relative-size> Data Type

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <relative-size> CSS data type represents a value that is defined in relation to another length, typically the font size of the element itself or its parent. It is primarily used in typographic properties, allowing text or other elements to scale proportionally rather than using fixed units like pixels or points. Using <relative-size> ensures that designs remain more flexible and accessible, especially when users adjust their default font size in the browser.

This data type is often seen in properties such as font-size and line-height. Values of include keywords like larger, smaller, or combinations with numeric multipliers to scale elements relative to the parent. For example, setting font-size: larger; increases the text size relative to its parent, while smaller decreases it. This makes it particularly useful in responsive design, where content must adapt to different screen sizes and user preferences.

An important distinction is that <relative-size> differs from <length> or absolute units like pixels, because it does not define a fixed measurement. Instead, it relies on context, which means that the same keyword can result in different computed sizes depending on the surrounding elements. Additionally, combining <relative-size> with other CSS techniques, such as using the calc() function, allows developers to create dynamic and flexible layouts.

Here are a few examples:

/* Increase the font size relative to the parent */
p {
    font-size: larger;
}

/* Decrease the font size relative to the parent */
small {
    font-size: smaller;
}

/* Nested relative sizing */
div {
    font-size: larger;
}

div p {
    font-size: smaller; /* relative to the div's larger size */
}

The use of <relative-size> promotes scalability and readability while maintaining a relationship between nested elements, making it a core tool in adaptive typography and fluid design systems.

Syntax

<relative-size> = smaller | larger

Values

smallerA relative size one size smaller than the inherited size.
largerA relative size one size larger than the inherited size.

Example

HTML

<div class="container">

    <h1>CSS &lt;relative-size&gt; examples</h1>



    <div class="grid">

        <div class="sample xx-small">xx-small</div>

        <div class="sample x-small">x-small</div>

        <div class="sample small">small</div>

        <div class="sample medium">medium (base)</div>

        <div class="sample large">large</div>

        <div class="sample x-large">x-large</div>

        <div class="sample xx-large">xx-large</div>

    </div>



    <div class="relative-parent">

        <p class="parent-label">Parent (font-size: 1.25rem)</p>

        <div class="relative-children">

            <p class="child smaller">Child with font-size: smaller</p>

            <p class="child larger">Child with font-size: larger</p>

        </div>

    </div>

</div>

CSS

/* Base and layout */
:root {
    font-size: 16px; /* 1rem */
}
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    margin: 20px;
    color: #222;
}
.container {
    max-width: 900px;
}
h1 {
    margin-bottom: 12px;
    font-size: 1.125rem;
}
.grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.sample {
    padding: 10px 14px;
    border-radius: 6px;
    background: #f5f7fa;
    border: 1px solid #e1e6ee;
}
.sample.xx-small { font-size: xx-small; }
.sample.x-small  { font-size: x-small; }
.sample.small    { font-size: small; }
.sample.medium   { font-size: medium; }
.sample.large    { font-size: large; }
.sample.x-large  { font-size: x-large; }
.sample.xx-large { font-size: xx-large; }

/* Demonstrate 'smaller' and 'larger' relative to parent */
.relative-parent {
    margin-top: 10px;
    padding: 12px;
    border: 1px dashed #cdd6e0;
    border-radius: 6px;
}
.parent-label {
    margin: 0 0 8px 0;
    font-size: 1.25rem; /* makes the parent larger than root */
}
.relative-children {
    display: flex;
    gap: 12px;
}
.child {
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 4px;
    margin: 0;
}
.child.smaller { font-size: smaller; }
.child.larger  { font-size: larger; }

/* make samples readable on small screens */
@media (max-width: 480px) {
    .grid { gap: 8px; }
    .sample { padding: 8px 10px; }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS relative-size data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.