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.

0 shares
  • Mike

    Good read. I must admit, I fall for several of the myths. I think it’s time to be more daring. Interesting point on the serif font at or below 16pt. I’ll have to experiment with that. I’d be curious how many webbies don’t even consider serif fonts. Thanks

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      I think there’s an increasing trend towards serifs online as designers realise that sans-only designs aren’t the only option. It’s a great way to make your design look fresh.

  • penina

    I’m really impressed by this article, Benjie. You clearly know what you’re talking about. As a traditionally trained designer, it’s refreshing not only when someone confirms my own experiences, but also inspires me to re-think them.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      You’re very kind :)

  • marceland

    I really agree with the article.
    I can recognize most of the items as most of designer “vices”. Sometimes these rules must be told as guides not to be followed literally, any rule can bend and of course we need to get use of our own cryteria more often!
    Thanks for writing this.

  • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

    There’s good support across the board. Including IE: http://caniuse.com/fontface

    • Tim

      Except that Windows in general renders many fonts terribly compared to Macs. There are some Google fonts in particular that should be tested before used. Josephin is one of them. The Windows rendering of this is awful. It’s always good to test multiple fonts.

      • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

        Ah, well that’s different. Trying different fonts in different browsers is important when selecting a set of fonts to use.

        The point I was making in the article is that you need to do that first, because your design is tied into your choice, you can’t design with one typeface and then switch to another later on.

      • http://robbyk.com Robby

        I recently switched to a windows laptop, and you’re completely right on this one. Windows renders fonts horrible! Even with the clear type junk turned on. I have noticed a difference between different fonts on windows though, I feel like it renders them all badly equally, if that makes any sense. I think windows users are used to it by now, but yeah…

  • Jenn

    I also find that Chrome sometimes renders fonts poorly as well :/

  • http://www.eclecticradio.nl Jasper

    what doesn’t work? font-face support in IE is decent, good even!

  • http://robbyk.com Robby

    Testing different fonts, can be tricky. I’m pretty sure most of us don’t own licenses to commercial fonts, but rather subscribe to a service such as Typekit/Fonts.com . While this gives us access to tons of good fonts, it makes it much harder to get the fonts right, from the beginning, because you don’t get desktop versions to use in Photoshop. A lot of times I have to work on the typography during the development.

    Up until recently, I’ve pretty much always used Sans-Serif fonts for the body text my web designs, but lately I’ve been going the opposite direction.Both can look great if you just have to configure the type correctly, like you said. I really think mixing the two together looks good. Sans-Serif headings, with Serif body text or vice-versa,

    Thanks for the great article, I really enjoyed this one.

  • http://www.isadoradesign.com/ Isadora Design

    Yes to the last debunked myth. While some creatives would like to say they deliberately broke the rules in order to be different, I think most just happen upon incredible design creations out of curiosity. Thinking outside the rules is the key to being creative – and finding out the hard way that a rule is in place for a reason is something everyone should find out for themselves. Great post!

    Cassandra
    Isadora Design – Handcrafted Web Design Company

  • http://www.bordiranku.com emblemku

    awesome article, salam kreatif