If you own a website, and you want it to make money, you need to fix your fucking typography.

How? Glad you asked. Have just a little bit of patience (or scroll down if you’re just unquestioningly going to implement my tips, that’s cool too).

But first things first.

Typography is important for two reasons:

• It affects the readability of your website. If it sucks, no one’s gonna read your content.
• It’s a visual design element and like all design elements, it needs to look good.

Well, I guess it doesn’t need to look good. Maybe you want an ugly website. That’s fine, and if so you can X out of this page. Because if you don’t understand the business value of design, you’re beyond saving.

Without further ado, here’s how to fix your web typography:

Step 1:

Purge Google Fonts from your realm of reality. 99% of the fonts on there suck, and the ones that don’t suck are still inferior to what you should pick.

And yes, I know a few of my client websites are running Google Fonts themes. Since working on them, my skill level as a designer has increased dramatically. So have my prices. (So hire me while you can still afford it, I guess.)

Step 2:

Pick any font — as long as it’s one of these:

Akzidenz Grotesk	Avenir	Avant Garde	Baskerville
Bembo	Bodoni	Bookman	Caslon
Century	Clarendon	Courier	DIN
Franklin Gothic	Frutiger	Futura	Garamond
Gill Sans	Gotham	Helvetica	Letter Gothic
Memphis	Meta	Mrs. Eaves	OCRB
Rockwell	Sabon	Times New Roman	Trade Gothic
Trajan	Univers

No, I didn’t pick these (but I did highlight a few of my favourites). I’m still a rookie designer and I have no business doing that.

The fonts were curated by Chris Do, who’s taught classes at one of the best design schools in the world and runs a successful branding agency in LA.

If Sony and Microsoft Xbox are happy to pay him millions of dollars for his judgment, you better listen up when he speaks.

Bottom line is this: pick something simple that’s stood the test of time. Don’t try to be fancy because, let’s face it, you don’t know what the hell you’re doing.

Step 3:

Next, increase the font size. The one you have right now is probably too small.

Don’t make your readers squint at your text — you’re not that good of a writer and to make them fuck up their eyes for the privilege to read you is frankly just rude.

Basically, your body text should be at least 18 pixels large. You could make it as large as 22 pixels without it looking bad.

Yes, it’s gonna look stupid at first, but that’s because you’ve probably stared yourself blind at the old version. Grab a glass of water, take a few deep breaths, and look at it again. Bet it looks pretty alright this time around, huh?

Step 4:

Okay, you’re doing great so far. First of all, I applaud you for making it this far into the article.

Most people who landed on this page will already have left, because goldfish have better attention spans than most people on the Internet.

Aherm… Step 4 (for real this time):

Sorry, I guess I’m pretty easily distracted too. Next, you want to optimize for readability.

That sounds pretty fancy, huh? It’s not.

I want you to look at a typical body paragraph on your website. Copy-paste the first line into a letter count checker (just google it, lazy). Jot down the amount of letters (including spaces).

Repeat process for like four more lines.

When you’re done, look at your piece of paper with the letter counts. Do they tend to be somewhere between 45 and 85 characters?

If not, your line width is either too short or too long. Since you hate thinking for yourself, the magical number you should shoot for is: 70. (Yes, I chose it completely arbitrarily, but it falls within the recommended range.)

How do you do this? By changing the width of your text containers. Not exactly revolutionary, but it works. Don’t be fancy, just do it.

Step 5:

Fix the line height.

In step 4 (the one that came before this, in case you’re bad at maths) we talked about line widths. This isn’t that.

This is line heights.

Or, “leading”, as it’s actually called. But we won’t bother with the design jargon in this article. You just wanna make more money off your website, right? Right.

For body text, set the line height to somewhere between 1.4 and 1.7. This time you’ll actually have to use your judgment, because the specifics are gonna depend on what font you’re using, and what font size you’ve chosen. I know, it sucks, but such is life.

Headings should be a little tighter, probably somewhere between 1.1 and 1.3.

What’s the purpose of this? To make it easier for people’s eyes to find their way from one line to another, and to give your text more room to breathe.

Conclusion (yes, it’s finally over):

Okay, that’s it for this article. There’s more to web typography (otherwise I wouldn’t be sitting on a 2,500 word article that’s only halfway finished right now), but if you follow my instructions you’ll be better off than 90% of website owners.

I know you’ve already forgotten most of what you just read, so here’s the recap:

• No Google Fonts
• Use a simple font that’s been around for a long time (refer to Chris Do’s list of approved fonts)
• Jack up your font size
• Make sure your body text is between 45—75 letters per line
• Set your body text line height to 1.4—1.7

I also know you’re probably not great with CSS, so you have two options:

1. Hire me as a designer. My current rate is $60/hr. Ask me again in 6 months and it’ll be way more than that. You snooze, you lose.

2. Use this code I wrote for you. It’s very basic. No promises it’ll work right off the bat, because each website is different. You’ll probably need to change some things around.

html {
  // This prevents iOS and IE text size adjust after device orientation change, without disabling user zoom
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  // Makes text look less "bulky" on modern browsers
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // Font settings
  font: normal normal 400 19px/1.7 "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
  font-size: 19px;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 1.5rem 0;
  font-weight: 700;
  line-height: 1.2;
}

p,
ol,
ul,
dl,
table {
  margin: 0 0 1.5rem 0;
}