Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
4 replies
snxxwyy

font size scale

I've been experimenting with the method (found at https://every-layout.dev/rudiments/modular-scale/). It aims to create a perfect balance between font sizes by utilizing the previous size and multiplying by a ratio to decide the next size up. The ratio is decided based off of the root font size and the line height. In this case the root font size is 1rem and the line height is 1.5 so the ratio is 1.5.

The scale looks something like this:
:root {
  --ratio: 1.5;
  --size-0: 1rem;
  --size-1: calc(var(--size-0) * var(--ratio));
  --size-2: calc(var(--size-1) * var(--ratio));
  --size-3: calc(var(--size-2) * var(--ratio));
  --size-4: calc(var(--size-3) * var(--ratio));
  --size-5: calc(var(--size-4) * var(--ratio));
}

Taking the fact that there's a pattern in the scale which creates the balance between sizes, if i wanted to use clamp to adjust my font-sizes depending on the viewport size, how would i create a similar pattern and balance with the rem and vw properties for the preferred size?

Let's say my primary header looks something like this:
.primary-header {
  font-size: clamp(var(...), 1rem + 5vw, var(...));
}

would my secondary header look something like this?
.secondary-header {
  font-size: clamp(var(...), 1rem + 2.5vw, var(...));
}

i'd appreciate any help, thanks in advance.
Was this page helpful?