Creating a Fluid Type Scale with CSS Clamp

[AleksandrHovhannisyan]

No description provided.

[solution-loisir]

First of all, thanks for such a detailed and overall high quality write up. I've been experimenting lately with fluid types and fluid design in general. Funny enough, the following idea yield some pretty good results and is less complex than what I've seen in the wild and in tutorials.

$font-h1: 2em;
$font-h2: 1.7em;
$font-h3: 1.2em;
$font-base: clamp(1.08rem , 0.46vw + 0.9rem, 1.2rem);

body {
  font-size: $font-base;
}

h1 {
  font-size: $font-h1;
}

h2 {
  font-size: $font-h2;
}

h3 {
  font-size: $font-h3;
}

Now the headings are relative to the font base which is fluid with a very slight variation. I'd like to engage discussion over such concept versus clamping everything. Have a good day!

[AleksandrHovhannisyan]

@solution-loisir Thanks! I actually agree—while I've found clamping to be nice for font sizing, it's a little awkward for other properties. I used to clamp my spacing variables at one point, but now I maintain a separate set of pixel measurements that I use for margins/padding/borders/etc.

Using ems like that is clever! Generally, though, it's not recommended to use ems for font sizing because it can lead to compounding effects if you apply it to deeply nested components whose parents also use em-based font sizes. (More on that here: https://www.aleksandrhovhannisyan.com/blog/use-rems-for-font-size/#a-first-attempt-with-em). This wouldn't be an issue in the code you shared because you'd never nest headings.

Personally, I also don't like the idea of tying down the font sizes to heading levels because it may lead to misuse of headings for font sizing. In my opinion, the ideal approach is to have a set of reusable font size variables and use them to style your headings by default, but then also have a separate set of font size utility classes (like .fs-sm, .fs-base, .fs-md, etc.) that can be used as needed. I do this on my site. For example, in some cases, I want to use a certain heading level for semantics but change its font size to be larger or smaller than the default.

[solution-loisir]

Thanks for the quick reply! As I read, I realized that my knowledge on em and rem was incomplete and went on a reading to clarify things up. It made me realized that I could use the same idea but with rems instead. Something like this:

$base-size: 1rem;

// Variable names and overall scaling system borrowed from Andy Bell's Gorko tool.
// https://github.com/hankchizljaw/gorko 
$size-300: $base-size * 0.8;
$size-400: $base-size * 1;
$size-500: $base-size * 1.2;
$size-600: $base-size * 1.7;
$size-700: $base-size * 2;
$size-800: $base-size * 2.4;

// Fonts
$font-base-size: clamp(#{$size-500} * 0.9, 0.46vw + 0.91rem, #{$size-500});

The base font size as to be declared on the root element though.

html {
  font-size: $font-base-size;
}

h1 {
  font-size: tokens.$size-700;
}
h2 {
  font-size: tokens.$size-600;
}
h3 {
  font-size: tokens.$size-500;
}

Now every sizes are relative to font-base-size and can be used without the 'limitations' of ems. I don't think it is a new idea. More of a fluid version of:

html {
  font-size: 1.08rem;
  @media(min-width: $md) {
    font-size: 1.2rem;
  }
}

Anyhow, this is just me tinkering on my side project. Thank again for all your input!

[AleksandrHovhannisyan]

Edit: Nope, this doesn't work like I thought it would since it increases the ratio at a hard breakpoint.

@solution-loisir I thought about this a bit more, and I think something like this would also work:

  --type-scale: <pick a ratio>;
  --fs-xs: calc(var(--fs-sm) / var(--type-scale));
  --fs-sm: calc(var(--fs-base) / var(--type-scale));
  --fs-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --fs-md: calc(var(--fs-base) * var(--type-scale));
  --fs-lg: calc(var(--fs-md) * var(--type-scale));
  --fs-xl: calc(var(--fs-lg) * var(--type-scale));
  --fs-2xl: calc(var(--fs-xl) * var(--type-scale));
  --fs-3xl: calc(var(--fs-2xl) * var(--type-scale));
  --fs-4xl: calc(var(--fs-3xl) * var(--type-scale));
  --fs-5xl: calc(var(--fs-4xl) * var(--type-scale));

  @media screen and (min-width: desktop) {
    --type-scale: <pick a ratio>;
  }

You could also use CSS variables to derive the base clamp so it's not hard-coded. Going to play around with this, and if it works well, I might update the post and/or https://fluid-type-scale.com/ to make this an option for the output.

[yababay]

Hi, Alexandr, thank you for the great article. It became very useful for me.

It's seems there is an misprint. It should be written --font-size-sm: clamped(13.33px, 16px);... instead of --font-size-sm: clamp(13.33px, 16px);... in "Native Approach..." section.

All the best to you!

[AleksandrHovhannisyan]

@yababay Good catch, thanks! I'll push up a fix later today.

[NiklasGameDev]

Sorry if this a dumbass question but I have been trying to implement this into my project for days now without success.
I am no web genius at all so after reading multiple articels on fluid typography and its formulas, I am left with only one question:
Is it even possible to dynamically calculate the preffered value in regular css ?

I tried calculating all values without units and then multiplying the slope with 100vw and the intercept with 0.1rem because I am using a Rem-value of 10px. I need an explanation or my head is going to explode :(

[AleksandrHovhannisyan]

@NiklasGameDev Andy Bell wrote this a few years ago. It uses unitless values to ensure CSS calc works correctly for the interpolation: https://archive.hankchizljaw.com/wrote/custom-property-controlled-fluid-type-sizing/. I bet you could do something similar for clamp's min, preferred, and max values.

[yababay]

Hi, NiklasGameDev, you can see working example here.

[NiklasGameDev]

I have seen this formula before in a few articles but it never worked. This one actually did work so thanks for linking it.

[bearoxo]

Inverted min max value.

https://www.desmos.com/calculator/afxjle1b3d

[AleksandrHovhannisyan]

@bearoxo It might be worth moving that discussion to the project's repo as an issue: https://github.com/AleksandrHovhannisyan/fluid-type-scale-calculator/

That said, this is technically working as expected from a math standpoint. For example, on your graph, notice how the red curve is above the blue curve at x = -3 (corresponding to the xxs step in your screenshot above):

However, I also see that comparable tools like Utopia just flip the min and max values: https://utopia.fyi/type/calculator/?c=400,16,1.25,1280,19,1.333,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12. I could do the same, but it technically wouldn't be correct, as it would mean that the minimum would be using the 1.333 type scale rather than 1.25 at that step.

[bearoxo]

It's 2AM now and my brain is potato. But I think I get it now, that intersection point is where the fluid scaling starts working its magic, before that point it'll shrink the font size but will still max at the red curve.

[AleksandrHovhannisyan]

@bearoxo Correct. My tool doesn't currently warn you if you accidentally go past that intersection; I'm not sure what the level of effort would be for that. Also, as a general rule of thumb, you don't want to add too many negative steps to your type scale since the font sizes will be illegibly small (in this case, ~8px, while the minimum recommended for the web is usually 12px).