A Rant on Typography and Spacing

PLEASE READ: I decided to give myself a fresh start. Read more about that here.

There comes a time when 12px font size and 10px of padding around your content is a no-no. In other words, styling your website this way is now bad.

It’s your responsibility to serve a good experience for your visitors. Before I go on, I’ll show some examples of what I’m talking about — so that it’s clear.

M’kay?

Here’s an example of bad typography – the kind that kills little puppies:

Bad Typography

Here’s an example of good typography – the kind that makes little angels gets their wings:

Good Typography

To illustrate the differences, here are the font stacks for each example:

Sorry, little puppies…

.bad-typography p {
font-family: Arial, Tahoma, sans-serif;
font-size: 12px;
margin: 0 0 10px;
padding: 10px;
}

Woohoo, angels…

.good-typography p {
font-family: ‘Lato’, sans-serif;
font-size: 16px;
margin: 0 0 25px;
padding: 30px;
}

Can you see the difference between the two? Yeah, that’s what I’m thinking.

Customizing CSS to make this kind of change on your website is a really an easy thing to do. It shouldn’t take more than a few minutes, if that — so go do it NOW!

If you want to save the world, one squinting eye at a time, stand up and make a difference. Go out and get yourself something from Typekit or hook yourself up with something (and they are free, might I add) from Google Web Fonts.

Not sure which combination of fonts to use? Well I got ya covered.

Now repeat after me…

“I will care about typography and spacing on my website.”

Say it again. And again. And again. Follow that up by saying…

“16px font is the new 12. 30px (at least) padding is the new 10.”

After you’ve spruced up your typography and spacing, please take a few minutes to read about another something important — responsive web design.

Trust me, your visitors will love you for it.