...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 applyfont-size: 10px (or really any number, but 10px or 20px is easier for the math) to thebody tag.

Then, all of the fonts get appropriately sized withem. 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 as10px, then1em =10px,2em =20px, etc.

body{font-size:10px;}h1{font-size:3.052em;}

Ourh1 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 Usepx 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 usepx, then we would have to manually update each and everyfont-size to be increased size.

Instead, by usingems, we can just increase our 'base'font-size and each and every otherfont-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.

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

Now, without any additional work, all of thefont-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 was10px, 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 useType 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 Idon't use that - there is some other 'weird stuff' added.

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