Font measurements - a modest study

Design help General
5

Hi @Hywel

I am not sure I understand what you mean by “set the default size in the Body per breakpoint in pixels”. I guess you are doing it correctly already.

However, typically you would use the browsers default root font size (16px for most users). This way, users can customize their browser defaults as needed. From there, you would use REM units.

Set base font-size:
html { font-size: 1rem; }

Breakpoint handling:

  1. html { font-size: 1.2rem; }
  2. html { font-size: 1.4rem; }
  3. html { font-size: 1.6rem; }
  4. (...)

This way, you never ever touch any of the individual values, rather always the base-font-size displayed above.

$h1-font-size: 2.5rem !default;
$h2-font-size: 2rem !default;
$h3-font-size: 1.75rem !default;
$h4-font-size: 1.5rem !default;
$h5-font-size: 1.25rem !default;
$h6-font-size: 1rem !default;

Why REM and not EM? Because EM has a compounding problem that REM fixes. Meaning REM values are relative to the root html element, not the parent div. I guess this is what you mean by cascade?

Remember to set a default value for the line-height property as well.

Calculating EMs (or REMs, from MDN web docs):
m = desired element pixel value / parent element font-size in pixels

For example, suppose the font-size of the body of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.

Percentages is the exact same thing as REM. Typically, you would work from some sort of mockup, sketch, psd file, xd whatever that renders its text sizing in pixels or points. With the given formula, this makes it very easy to translate the graphical prototype into a pixel perfect html site.

As this process is standard, I hope you didn’t waste too much time coming up with this on your own :laughing:

Best,
Karl-Heinrich

(edit ) P.S.: I should mention … make sure to have a even more consistent style over all breakpoints by applying this technique to your spacing (margin and padding) as well.

1 Like