Quick Wins for Web Typography

Quite often on the web we visit sites to read. With the web being about 95% typography it makes sense to try and get it right.

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

Measure

The measure is the length of a line of text. You’ll want to try and get about 45 to 75 characters on one line to ensure it’s comfortable to read. Too long and your eyes get lost—too short and your eyes get tired.

In responsive design keeping a measure of about 45 to 75 characters can be tricky. When you get onto larger screens quite often you’ll want to scale up the font size a little or change the layout to suit. On a smaller screen though, don’t be afraid to scale the font size down to try and keep your measure comfortable. Remember that a mobile device is often closer to your visitors eyes than a computer screen. Smaller text doesn’t make it harder to read.

Leading

The leading is the line height in CSS. For headings I usually have it around 1.2 and for body copy I find myself setting this between 1.4 and 1.6 depending on the typeface. If you find your measure is pretty long you can adjust the line height to be a little larger to help the readers eyes move between the lines.

Alignment

Left justify text you want people to read. There’s nothing else to it. It’s comfortable and normal people like it.

Don’t Be Dumb

When it comes to quotation marks, don’t be dumb.

“Smart quotes,” the correct quotation marks and apostrophes, are curly or sloped.

The dumb, straight quotes on your keyboard are only there because they are space savers. A hang up from old typewriters. Use the proper curly quotation marks the way the type designer intended you to use them.

Dashes

Like quotes, the dashes on your keyboard aren’t all you need. Despite you having a hyphen on you keyboard—you’ll need another two types of dashes. The en dash and the em dash. Here’s the run down.

  • Use a hyphen when you are joining two words, such as hand-lettering
  • Use an en dash when you are giving a range, such as “Read pages 38–45”
  • Use an em dash when you have a break in a sentence—amazing.

An em dash is typically the width of an em. The en dash is typically half that size. A hyphen is smaller still.

You can read more about quotes, dashes, and how to type them on your computer in Butterick’s Practical Typography Post.

, .

Can’t get enough? Subscribe to the Newsletter.

Using the great power of the internet—and MailChimp—you can get what I write straight to your inbox. All things design, web, and even photography sometimes.

It’s very occasional, and if it turns it it’s not for you, you can unsubscribe with just one click.