blog header here

4 reasons I use large type

The type on this site is totally unorthodox and it’s easier to read. If you don’t believe me, here’s why…

I’m sick and tired of cramped websites that have tiny type and don’t use the whole screen well. I’ve come to believe that the problem with reading on a screen isn’t the backlight—it’s that the type is too freaking small. Most designers don’t even know that there is an optimal number of characters per line. Let me take you through some of my thinking so that you can consider if you can take away any ideas to use on a project of your own. The fact you’ve read to this paragraph is proof that there is something to my argument.

#1 — I want my site to read like a book

I often hear people complain that they don’t like reading on a screen because of the backlight—I believe the real reason is tiny type. Reading online is more analogous to reading a dictionary than reading a book. The text is small and thin columned, it’s obvious that the designers goal was to fit a lot of information into a small amount of space. This may work for some applications, but lengthy reading is definitely not one of them.

#2 — To achieve optimal characters per line

On each full paragraph line of text on this blog there are about 75 characters—which is widely regarded as the most characters that you can put on a line and still have it optimal for readers.

“Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line(counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.”
The Elements of Typographic Style Applied to the Web

#3 — Text should be not too long & not too short

Optimal characters per line are a big deal—if the message you’re writing is important you want to remove any barrier to your readers connecting with your message. Here is a quote about why line length matters from the Baymard Institute:

  • Too long – if a line of text is too long the visitor’s eye will have a hard time focusing on the text. This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text.
  • Too short – if a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress people, making them begin on the next line before finishing the current one (hence skipping potentially important words).

#4 — I want readers to engage—so I lost the noise.

For years I’ve taught dozens of authors how to write online by pointing them to the best article I’ve ever read on how we read online. In this article they refer to Jakob Nielson‘s philosophy of the motivation of the reader:

Nielsen champions the idea of information foraging. Humans are informavores. On the Internet, we hunt for facts. In earlier days, when switching between sites was time-consuming, we tended to stay in one place and dig. Now we assess a site quickly, looking for an “information scent.” We move on if there doesn’t seem to be any food around.

I designed this site to give an “information scent” with a large title, quick summary, and hook. Then I  focus on removing distraction and delivering the best writing I can.

UPDATE: #5 — Line Height Matters

To ensure that your type can be readable it’s important to let the lines of type breathe. There is actually a ratio between type size, characters per line,  column width, and line height. You can use this great calculator to help dial it in.

Conclusion

I hope that this article has at least caused you to think about the way your web page displays text.I would love to hear your thoughts on this. Time will only tell if this set up will be fruitful.

email

Warning: count(): Parameter must be an array or an object that implements Countable in /home/gf1y40j7acyw/public_html/wp-includes/class-wp-comment-query.php on line 405

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>