Support for fluid line-height

[iljapanic]

Foremost, thank you for creating such a graceful and simple tool 🙏

I was looking around for a straight-forward solution to fluid typography and yours is by far the easiest with just the right amount of customization and modern Tailwind-like naming convention out of the box.

I was wondering if you have considered adding variables for fluid line-heights? One for body text and one for headings.

I suppose it may be an overkill to use clamp() for line-height since the variation between min/max is so small. On the other hand, it would make your tool a true plug & play typographic solution.

[AleksandrHovhannisyan]

@iljapanic Thanks! Glad you found it useful.

Yup, I've thought about that before, but it might be tricky. You technically can clamp line height, but you can't clamp it in a unitless fashion (like clamp(1.3, x, 1.6)), so you'd need to use rems for the line height. That's actually what https://fluidtypography.com/ does (it's a similar tool), and it's perfectly fine, but in my experience, line height does not scale linearly with font size. So the curve looks more like this:

Or, in pixels:

So the tool would need to give you a way to define the function, maybe as a bezier curve (this might even be useful for font size if some users don't want their font size to scale in a perfectly linearly manner).

However, I still think the easiest approach is to just use unitless line heights and change the scale factor for each font size step. For example, on my personal website, what I do is have a set of line height variables, maybe like this:

--lh-3xs: 1.2;
--lh-2xs: 1.3;
--lh-xs: 1.4;
--lh-sm: 1.5;
--lh-base: 1.6;
--lh-md: 1.7;

And then I create font size utilities that pair the right line heights with the right font size steps. So maybe:

.fs-base {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.fs-3xl {
  font-size: var(--fs-3xl);
  line-height: var(--lh-3xs);

Alternatively, you could try out the technique in this article: Using calc to figure out optimal line-height. The trick in that article is actually what fluid-type-scale.com uses for its own CSS, although I will admit I still like to just create my own CSS variables. That way, I can more easily change line height based on other factors, like line length (e.g., for card components where the lines of text are very short).

I know that's a long response, but hopefully it clarifies things.

[iljapanic]

@AleksandrHovhannisyan Thank you for a quick response. I appreciate you taking time to write such a thoughtful and in-depth explanation. I haven't considered that the unitless values might be a culprit. Your rationale makes total sense. I'll just go with a few variables with unitless values 🚀