Responsive Websites: Typography!
Tags: html, css
Published: 2020-07-12 06:36:36

Hey friends! 

So I was heading over to write something up on responsive typography when I realized that my writing style is totally TL;DR. 

I'm not here to pretend I'm an expert. I am, like many of you, blogging to learn and share those learnings. Thus, I'll leave the big kahuna explanations to the pros and no doubt the plethora of existing resources. 

Full disclosure: I'm currently learning about front-end web development through Skillcrush's Front-End Developer Blueprint and most of these learnings come from their fab course! 

Now without further ado...

<h2><u>Font basics:</u></h2>

1. Make sure your text is easy to read- never size anything smaller than 16px. Didn't define the font size in your stylesheets? Most browsers will have a default size of 16px!
2. Keep the line length between 45-75 characters in length.
3. Use black text on white backgrounds, or even dark grey, for better readability. 
4. Keep fancy fonts to a minimum! 

<h2><u>Pixels, ems, and rems, oh my!</u></h2>
Now, if you're like me, you probably had no idea that there was any other way to define your font sizes besides pixels. It turns out there are SO many more, but for now we'll only cover the most common three. 

<h3>1. The Pixel</h3>
A pixel is fixed and does not scale. It's computed value is the same regardless of the context in which it occurs. In other words, it's pretty static. Not exactly what we want for a responsive site.

<h3>2. The em</h3>
Em's are pretty neat because they are <em>scaled</em> units of measure. 

1em is the equivalent of the font-size set on the parent element of the current element. 

So if your site's base font-size is 16px:
1em = 16px
2em = 32px
3em = 48px

This means that if you know you want your h1 to be 2, 3, 4 times bigger than your paragraph fonts, for example, you would just set H1 elements to 2, 3, 4 ems. 

BUT WATCH OUT! Nesting elements can have an unexpected effect on your sizes. Here's an example:

```html
  <html>
    <div class="greeting">
      <h1>Hello World!<h1>
    </div>
  </html>
```

Here you can see I've nested an h1 within a div with a class of greeting. So what happens when I do this?

```css 
  html {
    font-size:16px;
  }

  .greeting {
    font-size: 2em;
  }

  h1 {
    font-size: 3em;
  }

```
You might expect everything in our greeting div to be 32px in size, with the exception of our h1s, which would be 48px in size. 

Instead, our h1s are actually 96px in size! WHAT?!?

Well, em's are based on the <em>parent</em> element. Because our h1's parent is the div with the class, "greeting", it's 1em was actually 32px. 

32px * 3= 96px

You get it, right? So, handy, but can sometimes be problematic. 

Which brings us to...

<h3>3. The rem</h3>

Okay, the rem is pretty neat, but before I tell you about how great it is, know that it's not supported on Internet Explorer 8 or below. 

With that out of the way, let me tell you why the rem is great. 

While em's are based on the font-size of the parent container, an rem is based on the <em>root</em> element of the document and its size. 

So in our example above, we could skip the headache by just changing ems to rems. 


<h2><u>That's all, folks</u></h2>
I hope this was just the right length to be informative but not pedantic! If you have any questions, comments, suggestions, please reach out to me any ol' time :)