# Fluid Heading Sizes (SCSS)

> Makes headings scale smoothly between mobile and desktop sizes with CSS clamp(), generated from a simple size table, so titles never look too big on phones.

- Type: SCSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: typography, headings, scss, responsive
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-fluid-typography-scss/

## Code

```scss
$min-viewport: 360px;
$max-viewport: 1200px;

// Heading => (min size, max size) in rem.
$headings: (
    h1: (2rem, 3.25rem),
    h2: (1.6rem, 2.4rem),
    h3: (1.3rem, 1.75rem),
    h4: (1.1rem, 1.35rem)
);

@function strip-unit($value) {
    @return $value / ($value * 0 + 1);
}

@mixin fluid-size($min, $max) {
    $slope: (strip-unit($max) - strip-unit($min)) * 16 / (strip-unit($max-viewport) - strip-unit($min-viewport));
    $base: strip-unit($min) - $slope * strip-unit($min-viewport) / 16;
    $base-rem: round($base * 1000) / 1000 * 1rem;
    $slope-vw: round($slope * 100000) / 1000 * 1vw;
    font-size: unquote("clamp(#{$min}, #{$base-rem} + #{$slope-vw}, #{$max})");
}

@each $tag, $sizes in $headings {
    #{$tag} {
        @include fluid-size(nth($sizes, 1), nth($sizes, 2));
        line-height: 1.2;
    }
}
```

## Notes

Edit the min and max sizes (in rem) in $headings. Block themes may set heading sizes in theme.json; this overrides them.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Fluid Heading Sizes (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/