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...
Font basics:
- 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!
- Keep the line length between 45-75 characters in length.
- Use black text on white backgrounds, or even dark grey, for better readability.
- Keep fancy fonts to a minimum!
Pixels, ems, and rems, oh my!
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.
1. The Pixel
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.
2. The em
Em's are pretty neat because they are scaled 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>
<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?
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 parent 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...
3. The rem
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 root element of the document and its size.
So in our example above, we could skip the headache by just changing ems to rems.
That's all, folks
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 :)
Top comments (1)
YES! ^ Great intro! All developers can at least learn to like type a little bit. ; )
These are our current go-tos for units... but - we definitely went through many phases over the last 10 years.
We just read: "On web typography" - but it would have been a lot better if we read it in 2014! and "Flexible Typesetting" came out recently. Also reading/re-reading - some classics:
But these aren't necessarily a great entry point!
Gearing up for some writing on the subject. Yikes! We'll have to narrow down to what is most importance - in order of importance to a web developer. Some of this stuff goes way too deep for the average dev.
"On web typography" and "Flexible Typesetting" are probably the way to go!
We wish you hadn't alerted us to "why fonts matter" because now we have to read another book! ; )