Parity between font and fontfluid

[felix-bohlin]

This might be an OPv2 issue, most likely.

font.css goes from 00-8 like this:

/* font.css */
:where(:root) {
    --font-size-00: 0.5rem;
    --font-size-0: 0.75rem;
    --font-size-1: 1rem;
    --font-size-2: 1.1rem;
    --font-size-3: 1.25rem;
    --font-size-4: 1.5rem;
    --font-size-5: 2rem;
    --font-size-6: 2.5rem;
    --font-size-7: 3rem;
    --font-size-8: 3.5rem;
}

fontfluid.css goes from 0-3 like this:

/* fontfluid.css */
:where(:root) {
    --font-size-fluid-0: clamp(0.75rem, 2vw, 1rem);
    --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
    --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
    --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
}

WHAT IF...

... fontfluid.css could match font-size.css and also go from 00-8? Too much choice?

/* fontfluid-2.0.css */
:where(:root) {
    --font-size-fluid-00: clamp(0.4rem, 1.5vi, 0.5rem);
    --font-size-fluid-0: clamp(0.5rem, 2vi, 0.75rem);
    --font-size-fluid-1: clamp(0.75rem, 2.5vi, 1rem);
    --font-size-fluid-2: clamp(0.875rem, 3vi, 1.1rem);
    --font-size-fluid-3: clamp(1rem, 3.5vi, 1.25rem);
    --font-size-fluid-4: clamp(1.125rem, 4vi, 1.5rem);
    --font-size-fluid-5: clamp(1.5rem, 5vi, 2rem);
    --font-size-fluid-6: clamp(1.875rem, 6vi, 2.5rem);
    --font-size-fluid-7: clamp(2.25rem, 7.5vi, 3rem);
    --font-size-fluid-8: clamp(2.5rem, 9vi, 3.5rem);
}

/* or even use the font.css values as default values */
:where(:root) {
    --font-size-fluid-00: clamp(0.4rem, 1.5vi, var(--font-size-00, 0.5rem));
    --font-size-fluid-0: clamp(0.5rem, 2vi, var(--font-size-0, 0.75rem));
    --font-size-fluid-1: clamp(0.75rem, 2.5vi, var(--font-size-1, 1rem));
    --font-size-fluid-2: clamp(0.875rem, 3vi, var(--font-size-2, 1.1rem));
    --font-size-fluid-3: clamp(1rem, 3.5vi, var(--font-size-3, 1.25rem));
    --font-size-fluid-4: clamp(1.125rem, 4vi, var(--font-size-4, 1.5rem));
    --font-size-fluid-5: clamp(1.5rem, 5vi, var(--font-size-5, 2rem));
    --font-size-fluid-6: clamp(1.875rem, 6vi, var(--font-size-6, 2.5rem));
    --font-size-fluid-7: clamp(2.25rem, 7.5vi, var(--font-size-7, 3rem));
    --font-size-fluid-8: clamp(2.5rem, 9vi, var(--font-size-8, 3.5rem));
}

---

DEMO: https://codepen.io/Flerox/pen/azodWxJ?editors=1100

[felix-bohlin]

As a total sidenote - while doing the demo it occurred to me that a fluid font sizes based on cqi instead of vw could be a thing. If you don't define a container-type somewhere it defaults to body right? Too much? Prop pack? 😅

:where(:root) {
    --font-size-00: clamp(0.4rem, 5cqi, 0.5rem);
    --font-size-0: clamp(0.5rem, 5cqi, 0.75rem);
    --font-size-1: clamp(0.75rem, 5cqi, 1rem);
    --font-size-2: clamp(0.875rem, 5cqi, 1.1rem);
    --font-size-3: clamp(1rem, 5cqi, 1.25rem);
    --font-size-4: clamp(1.125rem, 5cqi, 1.5rem);
    --font-size-5: clamp(1.5rem, 5cqi, 2rem);
    --font-size-6: clamp(1.875rem, 5cqi, 2.5rem);
    --font-size-7: clamp(2.25rem, 5cqi, 3rem);
    --font-size-8: clamp(2.5rem, 5cqi, 3.5rem);
}

Didn't put much effort into fine-tuning this one, but you get the idea.

DEMO: https://codepen.io/Flerox/pen/XJrXaNP?editors=1100

[argyleink]

As a total sidenote - while doing the demo it occurred to me that a fluid font sizes based on cqi instead of vw could be a thing. If you don't define a container-type somewhere it defaults to body right? Too much? Prop pack? 😅

def room for container fluid sizes 👍🏻 captured here in #274
and yep, if there's no container, they default to the viewport.