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.
Opens WPIDE on
Code
$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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.