Better text sizing?

[loxy]

Hi!

Your text scale system is really cool. But it can be improved, I think. If you add a --text-base, something like this:

  // type scale
  --text-scale-ratio: 1.2;
  --text-xxs: calc(
    var(--text-base-size) /
      (var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio))
  );
  --text-xs: calc(var(--text-xxs) * var(--text-scale-ratio));
  --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
  --text-base: calc(var(--text-sm) * var(--text-scale-ratio));
  --text-md: calc(var(--text-base) * var(--text-scale-ratio));
  --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
  --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
  --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio));

it would be more consistent for the calculations. And now you can add

.text-base {
  font-size: var(--text-base, 1em); 
}

Or leave --text-base away and only use:

.text-base {
  font-size: var(--text-base-size, 1em); 
}

Because at the moment it is hard coded as:

.text-base {
  font-size: 1em;  // doesn't respect --text-base-size
}

Or did I miss something?

[sebastiano-guerriero]

Hi there! Because of the em units and because the body-font-size is equal to --text-base-size, the .text-base utility class value is always relative. For example: if you set the --text-base-size: 1.2em, then when you use .text-base on a component, the 1em of the class is equal to the font-size of the body (1.2em). If you change the font-size of a component, and apply the .text-base class to a children, then 1em is equal to the new current font-size of the component (so it's no longer equal to font-size of the body, but to the font-size of the component/parent).

This is why the value of the .text-base is equal to 1em. If it was equal to --text-base-size, it may end up increasing the text in unexpected ways and it would be off the scale because no longer linked to the body font-size.

Just in case it may be helpful, here's a link we've published on working with em units: https://www.youtube.com/watch?v=dKvEwtqkVCs&feature=emb_title

[loxy]

Ok. Makes totally sense. Thank you!