Getting Turnt for Typography

Typography For Your Grandma

Shane Boland
4 min readDec 30, 2013

At its most basic, [readability] is the ability to make readers continue from the top to the bottom of the page and then turn that page; and then make them do that 200 times in the course of any book.

— John Curran

Words are everywhere. Look at this. You’re reading words right now. Everyone (within reasonable societal boundaries) has to read and write at some point in time.

Typography is the art of making those words look good. You know what happens if the words don’t look good? Everyone will hate you, and nobody will read it. Okay, I might be exaggerating a little. But you get my point. Make words look good.

108pt Joker font? Bad idea. Nobody likes that crap.

4pt Arial? I shouldn't need a magnifying glass to read your essay.

“This font is too small ,” said Goldilocks.

To help save you from eternal damnation by the design gods, I’ve written these 5 simple tips to help everyone (even your dear grandmother) write clean and visually appealing text.

Note: The following tips are relevant for writing body text. The text that makes up the meat of your writing. Designing titles, captions, footers, etc. all have their own rules. But body text is the most important and should be your first focus in any project.

1. Use a professional font, that fits your project

You can find free fonts all over the web. Most of them suck. It’s always a better option to shell out the moolah to buy a professionally designed font. Designers have spent hours and hours meticulously tweaking these fonts to make them the best they can be. This takes a lot of work off your hands.

Also, you should pick fonts that fit your project. You wouldn't use the same font for an Italian Restaurant menu as you would for a children’s bowling party.

Until you have a few “font favorites” in your Bat Utility Belt, it might do you good to reference Julian Hansen’s So You Need A Typeface.

2. Use an appropriate font size

The size of font is very important. If the font is too small, it’ll be difficult to read. If the font is too large, you’ll take up too much space on the page and it will look terrible. The ideal font size for print use is between 10-14 points. However, for the web you should use a size between 15-25 points. There is no “perfect size” for body copy though. Use your best judgment for each project.

3. Line Length should be 2-3 alphabets long

Humans do this funny thing with their eyes when they read. They read in bursts of 5-12 letters.

Scan path for a typical reader

Your lines should be long enough that the readers eyes aren’t constantly darting to the beginning of the line. But also it should be short enough that the reader’s eyes don’t lose their spot on the page. A good line length will make your sentences easier to read.

The ideal line length is approximately 45-70 characters long. Another way to think about this is that your line should be 2-3 lowercase alphabets long.

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm

4. Keep Line Spacing and Line Length In Proportion

Line Spacing is the vertical distance between two lines of text. You’re probably most familiar with single spacing and double spacing.

We all know the old “double space your essay to make it seem longer” trick. In print usage, you should aim for a line spacing that is approximately 1.2 to 1.6. In web usage, your line-height should be no smaller than 1.5.

It is also important to increase your line spacing as you increase your line length. Short lines don’t need as much line spacing as longer lines. It is smart to keep these values proportional to each other.

5. What About Goofy Fonts Like Joker or Papyrus?

Caption not needed. Don’t use crappy fonts.

Comic Sans? Eh.

Using Papyrus as a font? Bad.

Using Joker? Worse.

We all remember that kid in school, the one who discovered the Wingdings font and thought it was super cool. We all hate that kid. Don’t be that kid.

Enjoy the article? Let me know on Twitter (@ShaneTheBoland)

Shoutout to @emb_2499, @AlexLuciano25 @rrhoover, and @BrainMasella for editing and reviewing this article. You guys rock.

--

--

Shane Boland

not your dad. front-end web designer. moving slow and breaking things since 1995. [ shaneboland.com ]