Debunking the myths of web typography

Typography is, put simply, the arrangement of type in order to facilitate communication. As a craft, it’s been around for hundreds of years, but the web form is still very much in its infancy—no doubt typographers in a decade’s time will gasp at our lack of soft hyphen, or half space.

On the Web, typography is largely defined by its limitations. We simply don’t have the control that print typographers take for granted. To produce good web typography you have to get the basics right—because basics are all we have available.

Unfortunately if you google “typography” you’ll quickly find the Web is awash with poor advice that will lead you to produce inferior work. Collected here are some of the worst myths we’ve found in the guise of advice, and the reasons you should ignore them.

“Sans-serifs are better than serifs”

There are numerous myths relating to serifs and sans-serifs, and their preferred roles in design. The most frequently repeated is that sans-serifs perform better on screen because serifs have too much detail to render well in pixels.

The flaw with this argument is that the human eye doesn’t read individual letters, it scans word-shapes; word-shapes that serifs help create. Whilst it’s true that a lot of detail is lost in a font displayed online at 16pt or below, it’s true of both serifs and sans-serifs. Georgia, Officina Serif, and Sabon are all excellent choices for body text on screen and are all serifs.

When selecting a typeface determine whether it has been designed for the job you have in mind, sans-serifs and serifs are available for just about any task and perform more-or-less as well as each other.

“Always use the typographic scale”

Anyone who’s studied typography will be aware of the typographic scale. It runs thus: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72. Developed in the 16th century it’s still used in most design applications.

I’ve heard some very well respected designers refer to it as the musical scale of visual design, and that moving away from it is the equivalent of playing a bum note. However, to extend that logic, limiting our sizing to the typographic scale is the equivalent of only playing music using the C-major scale; kiss goodbye to your Dizzy Gillespie records.

Using a typographic scale certainly aids in the creation of a visual hierarchy, but using the typographic scale is a ‘rule’ left over from when fonts were physical things and variation cost money.

What’s more, with disparate measurements in different fonts—18pt Gill Sans is not the same size as 18pt Minion—the introduction of a second typeface normally breaks the scale anyway.

A typographic scale is an excellent tool to begin constructing a layout, but don’t ever allow mathematics to dictate your design work.

“Great typography is invisible”

Ask yourself, “Why should typography be invisible?” The answer, is that typography (or design in general) that draws attention to itself, takes attention away from its subject.

As with many myths, this one contains a grain of truth: great typography is invisible when designing for extended reading. There’s no doubt that if you were reading Moby Dick, you’d quit by page 4 if it was set in Futura.

However, extended reading is rare on the Web and the role of typography more commonly includes brand reinforcement.

The most famous example of a designer breaking this rule is David Carson’s 1994 layout for Ray Gun magazine in which he set an entire interview with Bryan Ferry in Zapf Dingbats. It’s often cited as bad design because Ferry’s words weren’t communicated to the magazine’s readership (in actuality it was reprinted fully legible in the back pages of the magazine). However, neither Ferry, nor his loyal fans were Carson’s client; his client was Ray Gun magazine, who had a rebellious image to maintain; twenty years later it’s still a controversial spread, I’d call that job done.

The lesson, is that in order to approach a typographic design, you have to first establish your goals. If you’re designing a blog then yes, readability—and therefore invisibility—will be central to your design, however for the vast majority of commercial websites brand reinforcement, and the qualities expressive typography imbues are far more valuable.

“Test your design with multiple fonts”

This myth has grown out of the ease with which design applications allow us to switch fonts. Considering the fact that it’s easier to switch fonts than it is to change leading you’d be forgiven for thinking it was a worthwhile exercise.

However, if you’re switching fonts “to see how it looks,” you’ve missed the point. The line-height, the tracking, the contrast and measure, et-al, is your design, and it’s critically dependent on your choice of typeface.

The time to switch fonts is 9:15am on day 1. Get it right, and then move on. If you’re revisiting your font selection once your full layout is in place then in all likelihood you need to start over from scratch.

“Professionals don’t use free fonts”

There is an inherent mistrust in most people living in a capitalist society, we tend to assume that everything has a monetary value and anything given for free has no worth.

I would be the first person to max out the credit card on a beautiful set of fonts if required, but it’s often not necessary. The way people choose to monetize their businesses varies greatly online. For example it’s not unusual to find type foundries giving away regular fonts of their typefaces, whilst charging a premium for “professional” fonts such as small cap variations. You’ll also frequently find large corporations such as Google and Mozilla giving away their corporate typefaces for free.

It’s certainly true that many free fonts are poor, but likewise, I’ve seen fonts priced into the hundreds of dollars that I’d be embarrassed to use.

You’re a designer, use your designer’s eyes to select the right typeface. Once you’ve found it, then check the price tag.

“You have to know the rules in order to break them”

This myth is applied not just to typography, or to design in general, but to every creative field. I wouldn’t be surprised if there’s an accountant somewhere lecturing an intern with this very phrase right now.

Roughly translated it means: that if you’re going to break rules you have to do so knowingly and deliberately, in order to produce good work.

My problem with this is that too many designers accept rules, guidelines, suggestions and tips as being cast in stone, and follow them unquestioningly. How do we know that the optimum measure for a column of text is around 65 characters? Because that’s what worked before. How did designers know it would work before? Because somebody tried it.

As technology, and intentions develop, rules must inevitably change with them. Does 65 characters represent the optimum column width for responsive design? Should we even be imposing a column width? We can’t know, because we haven’t tried it enough yet. We, as a community, are learning as we go.

So here’s how I’d like us to rewrite this last myth: You have to break the rules in order to know them.

Featured image/thumbnail, eye image via Shutterstock.

Ben Moss

Ben Moss has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.