Closed tcmulder closed 11 months ago
I could have fonts calculated like so:
-- --w-raw: 1440; --fs-h1: clamp(16px, calc(50 / var(--w-raw) * 100vw), 50px);
This has the effect of H1's being a min of 16px, a max of 50px, and a smooth transition between the two starting at a viewport width of 1500.
It's then easy to play around with. This would allow a greater size H1, but still have it be 50px on 1500px screens, if that matches designs:
--fs-h1: clamp(16px, calc(50 / var(--w-raw) * 100vw), 70px);
This seems like a nice, manageable one-liner compared to separating new values in a separate breakpoint.
I could have fonts calculated like so:
This has the effect of H1's being a min of 16px, a max of 50px, and a smooth transition between the two starting at a viewport width of 1500.
It's then easy to play around with. This would allow a greater size H1, but still have it be 50px on 1500px screens, if that matches designs:
This seems like a nice, manageable one-liner compared to separating new values in a separate breakpoint.