Kevin Powell - Community•7mo ago

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));
}

: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(...));
}

.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(...));
}

.secondary-header {
  font-size: clamp(var(...), 1rem + 2.5vw, var(...));
}

i'd appreciate any help, thanks in advance.

4 Replies

13eck•7mo ago

I honestly don't put any stock in those so-called modular scale formula. If design could be encapsulated with a simple formula it'd be easier to do! I mean, 1rem, 1.5rem, 2.25rem, 3.375rem, 5.0625rem, 7.59375rem is just a weird "scale". It's an exponential growth. Whereas the default h1 for most browsers is only 2em…that's smaller than half of your custom font sizes! Not to mention that both h5 and h6 have font sizes smaller than 1em and your scale doesn't have that—unless you expect "normal" font size to be 2.25rem (as h4 is the same font size as the base text). Before going and making such a sweeping change you should stop and ask yourself what problem you're having that this solves. If you want fluid type just use a simple clamp function to set the base font size and then set everything else based on that. A fairly simple code example:

::root {
  --1em: clamp(1em, 0.875em + .5vmin, 2em); 
}

body {
  font-size: var(--1em);
}

::root {
  --1em: clamp(1em, 0.875em + .5vmin, 2em); 
}

body {
  font-size: var(--1em);
}

Since all font sizes are either inherited or em-based (all browser-based font sizes are in em and not rem) that should cascade down to all elements for you.

snxxwyy•7mo ago

Ah that makes a lot of sense actually, thank you. In regards to the h5 and h6 font sizes, if you divide by the ratio instead you would get a font size smaller than 1em, I believe it’d look something like this which results in 0.666em

:root {
  ––size––1: calc(var(—size-0) / var(—ratio));
}

:root {
  ––size––1: calc(var(—size-0) / var(—ratio));
}

Based off of what you said I have a few questions if that’s okay: 1. what’s a browser font size? 2. why would you recommend they’re set in em if we’re usually taught that font sizes should be in rem? And how would you combat value stacking doing it this way? 3. how would you recommend calculating the preferred value for the clamp?

13eck•7mo ago

1. what’s a browser font size?

Default browser fonts sizes are as follows:

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.00em; }
h5 { font-size: 0.83em; }
h6 { font-size: 0.67em; }

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.00em; }
h5 { font-size: 0.83em; }
h6 { font-size: 0.67em; }

2. why would you recommend they’re set in em if we’re usually taught that font sizes should be in rem? And how would you combat value stacking doing it this way?

Beginners are taught rem to avoid issues with not understanding how em cascades down and "stacks" as you put it. using rem for font size is "easy mode", as it were, because you know exactly what you're getting out of it. But issues arise if you set, say, a font size of 1.5em on a div and then put a rem-based header in there—suddenly the font size is the same size as the headers!

3. how would you recommend calculating the preferred value for the clamp?

I gave you my starting point, above:

::root {
  --1em: clamp(1em, 0.875em + .5vmin, 2em); 
}

body {
  font-size: var(--1em);
}

::root {
  --1em: clamp(1em, 0.875em + .5vmin, 2em); 
}

body {
  font-size: var(--1em);
}

Depending on the use case of your site, your chosen font face, and the target device you expect most users to use you'll want to adjust the middle number. While you can adjust the first I would not recommend it—1em is whatever default the user has chosen (even if they didn't change the default it's still a choice to use that) and going any smaller will be annoying at the very least. The last number can be adjusted, too, of course. But I find that it's a great starting point. Here's a great article on choosing font sizes. And one on why type scale is silly.

snxxwyy•7mo ago

Ah that’s all been very helpful, I appreciate it, and I’ll check out those articles!

Gaming

Programming

font size scale