Rethinking Text Resizing on Web

Re:Rethinking Text Resizing on Web by rrr_oh_man on Monday May 20, 2024 @05:38PM (#40420733)

Here's what I used in my app [1] to do scaling with CSS only, no breaking points or JS complicated needed. All sizes of fonts and elements (like cards) are derived from the visible viewport and the golden ratio:

    :root {
        --gr: 1.618;
        --font-baseline: clamp(16px, calc(5.725vh + 5.725vw), 72px) !important;
        --font-baseline: clamp(16px, calc(5.725svh + 5.725svw), 72px) !important;
        --baseline-unit-1: var(--font-baseline);
        --baseline-unit-2: calc(var(--font-baseline) / var(--gr));
        --baseline-unit-3: calc(var(--font-baseline) / pow(var(--gr), 1));
        --baseline-unit-4: calc(var(--font-baseline) / pow(var(--gr), 2));
        --baseline-unit-5: calc(var(--font-baseline) / pow(var(--gr), 3));
        --baseline-unit-6: calc(var(--font-baseline) / pow(var(--gr), 4));
        --baseline-unit-7: calc(var(--font-baseline) / pow(var(--gr), 5));
        --baseline-unit-8: calc(var(--font-baseline) / pow(var(--gr), 6));
    }

(Initially there was no `clamp()`, but I had to concede that point for a better UX on really large and really small screens.)

[1] https://news.ycombinator.com/item?id=40408418

[ Parent | on HN ]

Re:Rethinking Text Resizing on Web by dwallin on Monday May 20, 2024 @06:34PM (#40421284)

That article about the golden ratio lost me with that horribly cropped image. It ignores all the things that actually matter when composing and cropping a shot, and gives some absurd advice that will actively lead people astray. The end result cuts off valuable content in favor of blurry background nonsense, leaving a random pencil end sticking up out of nowhere and a massively distracting board that is uncomfortably lined up with an outer edge. Learning some basic compositional techniques would be far more helpful both for the author and its readers.

[ Parent | on HN ]

Re:Rethinking Text Resizing on Web by rrr_oh_man on Monday May 20, 2024 @06:59PM (#40421573)

Agree! I cleaned up my comment. Hopefully it's a bit clearer.

[ Parent | on HN ]