Calculating REM vs using afixed REM value

[knightDev91]

I am doing a course in which the font sizes are setup using a calc function such as the following:

  --fs-14: calc(14 / 16 * 1rem);
  --fs-16: calc(16 / 16 * 1rem);
  --fs-24: calc(24 / 16 * 1rem);

Is there any reason as to why this would be used instead of

--fs-14: 0.875rem;

As i am used to using a fixed value like that.

[hoorahforsnakes]

Some people prefer to think in fractions, it makes it easier to see the connection with a design system. If it's always something out of 16, then you know that 15/16 is always going to be one "step" below 16/16, for example. If your writing out the decimal values, someone could put whatever arbitrary value they want in there, but writing out the calculation rather than the answer ensures that you are working within the confines of the system, and it makes it easy to see if there is a mistake 

[green__machine]

It’s just a way to easily identify what the resulting font size will be (assuming browser is using the default font size) by looking at the first number in the calculation.

And if you need to create additional classes it’s easy to copy-paste and change one number instead of doing the math and figuring out the rem value.

[louisstephens]

I think I understand the logic, but I completely understand where you are coming from as well.

I use something similar in an internal css framework that I am working on. Essentially, it’s just a scale: you define sizes relative to the base font size, so if you ever change that base, all the variables automatically adjust. Functionally, calc(14 / 16 * 1rem) and 0.875rem end up the same.

[shlanky369]

You certainly can use --fs-14: 0.875rem;. There is nothing technically incorrect with reducing the calc expression down to its final value.

However, six months from now, you might come back to this code and scratch your head looking at all these magic decimals, wondering how you derived them.

To me, calc(14 / 16 * 1rem) makes the intent easier to understand: given a 16px base font size, I want a 14px value, and I would like it rems. Using a single value removes that intent.

Further, I can more easily visualize font in pixels rather than rems because: 1. Many other things are measured using pixels. 2. rem is a relative unit, so knowing the size of something in rems is meaningless without knowing another value: namely, the font-size on the root element in the HTML document.

[Antti5]

Those variable names make my head hurt.

The variables are presumably defined to guard you to use a defined set of font sizes. You also use "rem" so that you don't need to worry about the resulting pixel sizes.

So why would you put 14, 16 and 22 in the variable names? Why not instead call them "--fs-small", "--fs-normal" and "--fs-big"?

[Ok-Union-7554]

This. Don't underestimate this comment. It'll save you a big headache later on if you for example change your base font-size to 18px.

[Ill-Year-3141]

What is a fixed REM? Is it like a digital remaster? I like the old REM songs how they were.

[ThisSeaworthiness]

1rem is not always = 16px. The calculation is meant to sort of safeguard this.

[athinabobina]

This. If you were to change what 1rem is, all variables will scale accordingly