/ typography

Web Typography

I'm always confused about font sizing with rem.
So here's a recap of what's the deal with sizing with rem.

ref: http://snook.ca/archives/html_and_css/font-size-with-rem

rem is relative to the font size assigned to the root element, html.

So html { font-size: 100% } takes the browser's default font size as the root font size.

Any rem size thereafter, will be calculated based on the root size.

Assuming the default font size is 16px, 1rem is equal to 16px.
.75rem is equal to 12px.

What does this mean for you?

Now all you need to do, is to change the font size of the root element, and your document will scale itself accordingly.

rem is supported by IE9+ 🤘

So what happened to em?

Well, it's essentially the same as rem except that the font size is calculated based on its parent container instead of the root element.

As you can imagine things will go out of control pretty fast when you start nesting em. I know we hate calculations.

As if that's not enough, here's a tool for you to explore: https://github.com/matejlatin/Gutenberg.
Have not tried it myself yet, but will probably do so when I have the time.

Web Typography
Share this