# Sizing type on the web

There are rems and ems, which a somewhat similar, but with their distinct
differences.

### What is a rem?

> The rem unit is relative to the root—or the html—element. That means that we
> can define a single font size on the html element and define all rem units to
> be a percentage of that.

It’s taken from
[this article](http://snook.ca/archives/html_and_css/font-size-with-rem), it’s a
good read.

### But why rems over pixels?

- Internet Explorers can’t resize pixel set type.
- It doesn’t cascade (more on that later).

### But why rems over ems?

All the IEs play nicely with `em`s and they cascade good, but...

> The problem with em-based font sizing is that the font size compounds. A list
> within a list isn’t 14px, it’s 20px. Go another level deeper and it’s 27px!

You can easily get over it but it’s still a drag.

## Why is cascading so important?

Sometimes you want type to be bigger or smaller depending on the screen size.
With `rem`s you can just change the value in the root element and all text down
the line will resize. Simple and effective. For a Sass pattern that keeps those
breakpoints close to the styles they affect, see
[writing media queries with Sass](/the-modern-way-of-writing-media-queries-with-the-help-of-sass).

```css
@media screen and (max-width: 639px) {
  /* Make the type a bit smaller small screens */
  body {
    font-size: 0.7rem;
  }
}
```

## Setting it all up

The article that I quoted earlier uses the `font-size: 62.5%;` baseline thing,
which might be needed or not (the article was written in 2011).

```css
html {
  font-size: 62.5%;
}
```

We use that above trick to get the `rem` and `em` values look nice, so that the
code is easy to maintain. For instance, `1.4rem` equals `14px`, whereas normally
it would be something totally wild like `0.875rem`. If we’d want to change the
font size for a given site that uses the wild `rem` or `em` values, we’d need to
learn that new scale, or use a conversion tool.

We can do the calculation with SASS, we can have the cake and eat it too, so to
speak:

```scss
// Function for converting a `px` based font-size to `rem`
@function calculateRem($size) {
  $remSize: $size / 16px;
  // Default font size on html element is 100%, equivalent to `16px`
  @return #{$remSize}rem;
}

// Mixin that will include the fallback `px` declaration, as well as the
// calculated `rem` value
@mixin fontSize($size) {
  font-size: $size;
  font-size: calculateRem($size);
}
```

[Source](https://github.com/stubbornella/oocss/blob/master/oocss/src/components/utils/_fontSize.scss)

Usage:

```scss
@include fontSize(14px);
```

You may also wanna take a look at the
[rem browser compatibility table](https://caniuse.com/#search=rem).

## Further reading and sources

- [Font sizing with REM](http://snook.ca/archives/html_and_css/font-size-with-rem)
- [Some forum discussion about the 62,5% base thing](http://css-tricks.com/forums/topic/62-5-font-size/)
- [More forum ranting](http://css-tricks.com/forums/topic/62-5-font-size/)
- [A List a Part article from 2007](http://alistapart.com/article/howtosizetextincss),
  talking a lot about IE6 and IE7, not so relevant anymore but still a good read
- [CSS-Tricks article](http://css-tricks.com/why-ems/) wondering the sizing in
  em
- [pxtoem.com](http://pxtoem.com/) `em` to `px` conversion tool
- [Another `em` calculator](http://riddle.pl/emcalc/)
- Aaaand, I think this article:
  [How to size text using ems](http://clagnut.com/blog/348/) is the one that
  started the `62.5%` base thing back in 2004.