typography-unnamed-cbffa-x-hd-jootix-66808

Typography 101 For Bloggers



jerry-digital-strategist

Do you want to get more readers to your blog?

Of course you do.

There’s thousands and thousands of tricks on how to do that. And just as many blog posts out there.

But this one is easy, but it’s also pretty much overlooked. I’m talking about some basic information design and typography 101 for bloggers.

Interested?

Accept Your Limitations And Get With It

Now, let me tell you right off the bat: I’m no art director. Actually, I’m pretty far from being good at web design myself.

I know this because I work with some very talented web designers and boy, they have talents I’ll never have.

But I’m not talking about highly creative skills here. And if I can learn basic information design, so can you.

Let me highlight this with a short story:

When I studied at the university, I took a 10 week course named Information Design. And I sucked at it.

At the very end of the course, we voted for who had produced the most beautiful information designs during the course. I don’t remember the name of the girl who won, but from what i could tell—she was talented.

Of course, some fellow douchebag thought it was a good idea to also have a vote on who had done the most terrible design.

Scheisse, I thought. (I speak German, but only when I swear to myself.)

The teacher didn’t have a chance to stop the class who quickly decided by raising hands on who had produced the most terrible design.

Drumroll, right? Of course it was me.

But I was okay with it. I’m a pretty cool guy if I may say so myself — and I know where my strengths lie. And it’s not as a designer.

As Clint Eastwood said in one of his movies:

“A man has to know his limitations.” <<< Click to tweet.

Still, it was the best and most useful class I’ve ever taken.

Getting The Basics Right Is Actually Easy

So why should you listen to me on this subject? Because, I’ve learnt the hard way.

I’m a pretty good example of what the worst acceptable level should be. Because I’ve got exactly zero talent in this area. So what I can learn, you can learn.

And since we have a blogging groundswell in Sweden right now, with over 500+ bloggers each publishing one post a day for 100 days in a row, my eyes are actually hurting.

So this is really a community service, of sorts.

Let’s start with the choice of font.

1. Choosing The Right Font For Your Blog

Serifs is what they call fonts that have feet and stuff. Like Times New Roman and Georgia. Sans serifs are fonts without feet, like Helvetica and Arial. The classic rule is that you should use Sans serifs for your headlines and Serifs for the rest.

Serifs are easier to read as they tend to tie in to each other, while Sans serifs are better att standing out and grabbing attention.

But since reading on the screen is somewhat different to reading on paper, a lot of San serif fonts works really well for everything.

As a reaction to this, some use Serifs for headlines to make them stand out.

So in short, the rules for Serifs and Sans serifs doesn’t really apply for bloggers.

The basic rules for choosing blogging fonts are quite simple:

1. Less is more. Use two different fonts, or maybe three if you want an accent font. Don’t use more. (I have four right now, but that’s because I’ve got a Google Web Font Plugin that’s messing with me.)

2. Don’t fall for the fancy fonts. You don’t want people to notice your fonts, because that distracts them from your message. So choosing fonts that people are used to is a plus.If you get really fancy with one font, go mainstream with the rest.

3. Go bigger. Size 12 is pretty standard in Word and Pages, but rest assure it’ll probably loose you readers.

2. The Golden Ratio For Content Width

This is my favourite rule. And it gets the best results.

It scares me sometimes, that many otherwise awesome web designers get this wrong. Don’t ask me why.

I learnt how to calculate this by hand, but a good rule of thumb is that every line of text should have about 11 to 14 words on average.

That’s very few words, right?

Try to pick up a novel, and you can see that this rule applies. And on the web, we want shorter, not longer.

Most WordPress themes don’t get this. The lines of text just goes on and on. But if you want readers, it’s better to have a really short content width and a lot of white space (as little distraction as possible).

There’s a really good tool for this, The Golden Ratio Typography Calculator.

Use it. And mind the line height as well, please. It’s important.

3. Paragraph Structure… GRRR!

This, I hate.

I love long paragraphs. Keeping complex lines of thought neatly structured together. And I for one thinks that long paragraphs looks good as well.

I get even happier when I can vary between blank lines and indentations as well because it offers a wider range in shifting pace as a writer.

For a blog? No, not so much.

Write shorter paragraphs. With more punch in every line. <<< Click to tweet.

I try to do this myself because I find this style of writing easier to read on blogs. And if I prefer it that way myself, then I want to show my readers the same courtesy.

And use sub-headers. Most blog posts gets scanned rather than read word-for-word, so sub-headers do a great job in keeping those restless soul interested.

In Closing

If you apply these simple recommendations, you will get more readers.

It might not fit with your current style of writing I know, but as a writer, you should really care more about your readers than about yourself.

(Now I sound like your language teacher from school, right?)

After all, some basic typography never hurts. If you find this exciting, there are tons of things online for you to research on the subject.

And when you start to kern (what?) your blog posts, that’s when you now you’ve gone to far with this. Don’t blame me, okay? :)

Now, if you found this useful, don’t be shy to post a link to your blog in the comment section if you decide to better the readability of your blog. Or, subcribe to my mailing list for future updates from me!

Image credit: WALLSAVE


22 comments
wonderoftech
wonderoftech like.author.displayName 1 Like

Hi Jerry, Great story about your web design class! I find typography very important and interesting. You are definitely rocking the Droid Serif. I had always heard that Sans Serif was the way to go with websites, but your Droid Serif is calling to me. I may just have to give it a go.

 

I use Thesis which makes changing fonts and font sizes easy peasy!

Jerry Silfwer
Jerry Silfwer moderator like.author.displayName 1 Like

 @wonderoftech Thank you so much for those kind words — and yes, Droid Serif rocks! :)

wonderoftech
wonderoftech like.author.displayName 1 Like

 @Jerry Silfwer I just switched to Droid Serif at my site and really like it. Thanks for being a shining example!

Jerry Silfwer
Jerry Silfwer moderator like.author.displayName 1 Like

 @wonderoftech Cool, looks awesome. Liked your Facebook Page and will make sure to subscribe to your posts as well! Have a great evening!

wonderoftech
wonderoftech

Hi Jerry, Great story about your web design class! I find typography very important and interesting. You are definitely rocking the Droid Serif. I had always heard that Sans Serif was the way to go with websites, but your Droid Serif is calling to me. I may just have to give it a go.   I use Thesis which makes changing fonts and font sizes easy peasy!

Jerry Silfwer
Jerry Silfwer

@wonderoftech Thank you so much for those kind words — and yes, Droid Serif rocks! :)

wonderoftech
wonderoftech

@Jerry Silfwer I just switched to Droid Serif at my site and really like it. Thanks for being a shining example!

Jerry Silfwer
Jerry Silfwer

@wonderoftech Cool, looks awesome. Liked your Facebook Page and will make sure to subscribe to your posts as well! Have a great evening!

andreasivarsson
andreasivarsson

Interesting stuff Jerry, thanks!

Jerry Silfwer
Jerry Silfwer

@andreasivarsson Thanks for the support, Andreas — I appreciate it!

WilliamArsenis
WilliamArsenis like.author.displayName 1 Like

Interesting article. I had a lot of trouble with the font, though. It was tiny and I had to zoom in on the page a few times before it made for a comfortable read. Ironic for a post on fonts. That's something that drives me crazy with Wordpress themes. There's no easy way to increase the font size to 16 (recommended for most blogs). I have no problems increasing the size using blogspot.com, but then I feel I'm limited in what I can do with a blogger site.

Jerry Silfwer
Jerry Silfwer moderator

 @WilliamArsenis Sorry about that, William. I'm using Droid Serif at 14.5 which is acceptable for such a short content width that I'm using. I wanted to go a bit bigger, but I want it to harmonise with the Triberr and Livefyre comment plugin and I can't change those unfortunately.

 

But to your point, I could definitely go bigger. And yes, Wordpress isn't exactly user-friendly in this aspect.

 

Thanks for commenting!

WilliamArsenis
WilliamArsenis

 @Jerry Silfwer  @WilliamArsenis WordPress is the most popular platform for blogging from what I can tell. Yet there's no way I can find to change the font size without messing with CSS.

 

I don't get it. Really. Am I missing something? I mean everyone seems to be saying that font size makes a big difference. I know it does for me.

 

I only use Macs. So when a blog pops up (I came to yours via a Twitter link curtesy of @Dino Dogan), I have to decide whether to press Command and + a few times so that I'm not straining like I do for eye exams on an FAA medical, or simply close the tab.

Jerry Silfwer
Jerry Silfwer moderator

 @WilliamArsenis  @Dino Yes, don't get me started on this! :)

 

Given all of Apple's success and Steve Job's love for fonts, one could think that this would make a bigger impact than it actually has.

 

Now, there's the Google Web fonts to choose from, but installing them means messing with the CSS as well. If you're not doing it by plugin, but I haven't found one without bugs yet.

 

And if you want to be very professional and actually buy yourself a beautiful web font, then you need to FTP that sucker and THEN hit the CSS.

 

And after that, you still don't have an easy way to adjust font size...

 

Some WP themes comes with it though, but often not with options for line heights and stuff.

 

Well, I'm doing my best to spread the word anyway. Bigger IS better.

WilliamArsenis
WilliamArsenis

Interesting article. I had a lot of trouble with the font, though. It was tiny and I had to zoom in on the page a few times before it made for a comfortable read. Ironic for a post on fonts. That's something that drives me crazy with Wordpress themes. There's no easy way to increase the font size to 16 (recommended for most blogs). I have no problems increasing the size using blogspot.com, but then I feel I'm limited in what I can do with a blogger site.

Jerry Silfwer
Jerry Silfwer

@WilliamArsenis Sorry about that, William. I'm using Droid Serif at 14.5 which is acceptable for such a short content width that I'm using. I wanted to go a bit bigger, but I want it to harmonise with the Triberr and Livefyre comment plugin and I can't change those unfortunately.   But to your point, I could definitely go bigger. And yes, Wordpress isn't exactly user-friendly in this aspect.   Thanks for commenting!

WilliamArsenis
WilliamArsenis

@Jerry Silfwer  @WilliamArsenis WordPress is the most popular platform for blogging from what I can tell. Yet there's no way I can find to change the font size without messing with CSS.   I don't get it. Really. Am I missing something? I mean everyone seems to be saying that font size makes a big difference. I know it does for me.   I only use Macs. So when a blog pops up (I came to yours via a Twitter link curtesy of @Dino Dogan), I have to decide whether to press Command and + a few times so that I'm not straining like I do for eye exams on an FAA medical, or simply close the tab.

Jerry Silfwer
Jerry Silfwer

@WilliamArsenis  @Dino Yes, don't get me started on this! :)   Given all of Apple's success and Steve Job's love for fonts, one could think that this would make a bigger impact than it actually has.   Now, there's the Google Web fonts to choose from, but installing them means messing with the CSS as well. If you're not doing it by plugin, but I haven't found one without bugs yet.   And if you want to be very professional and actually buy yourself a beautiful web font, then you need to FTP that sucker and THEN hit the CSS.   And after that, you still don't have an easy way to adjust font size...   Some WP themes comes with it though, but often not with options for line heights and stuff.   Well, I'm doing my best to spread the word anyway. Bigger IS better.


Enjoyed this post? Get email updates (it's free).

“Jerry’s profound insights in how people interact on the Social Web makes even the most complex solution seem simple and obvious.” Micco Grönholm, The Brand-Man