Debunking the myths of web typography

Default avatar.
March 12, 2014
Debunking the myths of web typography.

thumbnailTypography 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 is Senior Editor at WebdesignerDepot. He’s designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. One of these days he’ll run a sub-4hr marathon. Say hi on Twitter.

Read Next

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…