...for 'Responsive Font Sizing'

A technique that I have been using to help with Responsive Web Design (RWD) - fancy words meaning that our website resizes and scales 'nicely' based on the width of our screens, etc. -is to simply apply font-size: 10px (or really any number, but 10px or 20px is easier for the math) to the body tag.

Then, all of the fonts get appropriately sized with em. You see, em units scale up directly from the first ancestor (e.g. parent, grandparent, etc.) that has an established font size. So, if we set that as 10px, then 1em = 10px, 2em = 20px, etc.

body {
  font-size: 10px;
}

h1 {
  font-size: 3.052 em;
}

Our h1 will have a size of: 30.52px. If you're wondering about this 'weird' number, I will mention later in the post.

Why Not Just Use px to Specify the Font Size?

Great ❓, and a common one from my students.

The reason why is that typically folks hold ☎️s or tablets closer to their faces and we don't need the lettering to be as big.

But, on desktop views 🖥️, folks are sitting a bit further back and may need to squint to see the lettering properly.

If we were to use px, then we would have to manually update each and every font-size to be increased size.

Instead, by using ems, we can just increase our 'base' font-size and each and every other font-size is appropriately increased.

For example, assuming that our 'base styles - that is, styles for 'mobile' ☎️ are established as above 👆🏽, we can use a @media to easily scale up.

@media screen and (min-width: 1024px) {
  body {
    font-size: 16px;
  }
}

Now, without any additional work, all of the font-sizes are scaled up by 60%. Or, if you don't like that math, think if it was set as: font-size: 20px. If the original was 10px, it means now all things are doubled.

Type Scaling

Why this 'weird' number 👆🏽? font-size: 3.052 em;

TBH, not 💯 sure, but apparently there are some 'design rules' regarding what makes 'font-size scaling' and 'typography' look 'good' on sites. To this end, I use Type Scale to get recommendations for how the type should be...scaled.

You simply put in your font (if using Google Fonts) and our base font size and play with scaling.

It actually generates CSS for you, but I don't use that - there is some other 'weird stuff' added.

For some additional perspective, you can kindly listen 👂🏽 to this episode on CSS Units from Syntax.fm.