SXSW: Web Typography Sucks

[Notes from this panel with Mark Boulton and Richard Rutter]

[OED] Typography - (1) the are or process of setting and arranging types and printing from them. (2) the style and appearance of printed matter

Typography - the mechanical notation and arrangement of language.

See: Type & Typography by Phil Baines

So why does web typography sucks.

' " are primes, not quotation marks. These are used for height and latitude longitude.

The hypen, en dash, em dash, and minus are all different and have different cultural contexts. In the UK en dashes are supposed to be used without spaces. This changes in different places. Regardless of these rules, en and em dashes are never hyphens.

Even The Sun in the UK uses proper typography. If The Sun can do it why can't we?

All it is a matter of using the correct HTML entities instead of hyphens.

See: The Trouble with EM and EN
See: Smarty Pants plugin
See: Textile

Always use the best ampersand available!

See: Ampersand on Simple Bits

Vertical rhythm is incredibly important in typography, just as rhythm is important in music.

The first thing you see when you look at the default style applied by the browser is that the paragraphs are too cramped. It's sill not right. If you make an 18 pixel grid you will see that the text doesn't match up at all.

As designers we know that there is space between a header and a paragraph. You should be defining these spaces, you should know.

Working this out involves a little math so pay attention.

• base test size: 12 pixels
• text size for rhythm: 18 pixels

font-size: desired font size / base font size = em size
line-height: base line height / em font size = em line height

In addition to vertical rhythm there are things to consider in spacing and alignment. When someone describes a shopping list, like a politician, there is a physical gesture. Mirror this rhythm in type.

Give the list extra prominence. Use a different face or a different weight. Use position to hang the list in the margin. This makes it easier for the eye to read the list and it is the historically correct way to display a list. There is hanging punctuation as well the same way that numericals in this case are hanging in the gutter.

Start with a blank set.

Layout is also related to this.

See: The Elements of Typographic Style
See: Grid Systems and Graphic Design by Muller-Brockman
See: The Chicago Manual of Style

Start with a unit with a rational ratio of 2:3, which is a rounding up of the golden ration of 1:1.68. It's easier to use the rational ratio so that's what we'll do in this example.

Divide this unit into six blocks. Give each block a relationship of 1em so you have 2em:3em. Extrapolate this out to the layout with 0.5em gutters. As you combine these units in whatever way you see fit.

Place your type on the grid so that the grid is rationally derived from the unit of type.

The space that remains, the white space, is not decided arbitrarily, it related to type. There is a relationship between everything on the page.

Typefaces and fonts remain the thorny issue on the web. The typefaces that we are left with are actually very good. Verdana, Arial, Georgia, and the rest are good for our medium.

The problem with this is that Arial is not a good backup for Verdana. Arial will look about a third smaller.

But what about giving people with nicer fonts a chance to see them on the web. This list liberates you to start with the optimal font and then list your fonts from most desirable to least such that they all fit.

Helvetica Neue, for example, is the old helvetica optimized for digital display.

If your organization has conservative typeface requirements, push for something better than Arial.

Windows Vista comes with some really great new typefaces:

• Calibri
• Cambria
• Candara
• Contantia
• Corbel

So will these make it to Macs? We hope so. It would be great if they shipped with Office so they could become the new standards. They are truly very good. They lack certain character but their generic nature allows them to be applied over a wide range of uses.

Why they begin with "C" is an open question and it is rather silly.

What typography is all about is how the small parts come together to make a beautiful whole.

Think about the periodic table. If you take a proton away from anything on the periodic table you change the nature of the thing. This is the same with the details of typography. If you don't put any effort in you end up with Carbon instead of Gold, you win, to use a Britishism, the wooden spoon for your design sloth.

So who cares about these things within an organization? The answer should be that everyone does because that's what it is like in a newspaper. Everyone cares that the right characters are used, that the type is set correctly. Everyone involved in writing, editing, printing, etc.

At the BBC, where the medium was different, the care just wasn't there. What happened to our industry that we have lost track of this craft.

Web typography sucks because of us. Everyone should be responsible for typography. Typography should be in the process. Many of these things can be automated but to get there you need to tell software engineers what to put into their content management applications.

If you are an author and you see your text on the web with shoddy typography you should be annoyed. This is a matter of people reading text that is not as easy to read as it could be. Go up the process and demand that typographical detail is taken seriously at every stage.

Most organizations with print output do this on paper but it gets lost on the web. This can change and it is up to fix it. The new version of The New York Times does a great job of this, it is possible.

Get on your colleagues backs about this. The result is worth it.

See: webtypography.net/sxsw2007

The measure was originally dictated by line length. If you set a measure of around two alphabets, is that a scalable em based layout retains sizes as it grows. Because there are so many things that reader has control over you have to limit the lengths of your lines. You can do this bounding your layout in ems or with a liquid layout defined as a percentage of the window size. The content should determine which way you go.

Intelligent controls that know what size the type is and adapting the grid and the content to this size is a great step in the right direction.

Automation is only part of the solution. We need to nurture an environment that emphasizes using the right character in the right place. We just need to care a little bit more about our craft.

One counter argument is that resolution isn't good enough. As technology improves the defects of our work will become more apparent.

Jeff Croft from the audience: There is nothing wrong with using pixels to size your type. The only thing wrong with this is IE 6. Ems are great but don't let IE6 hold you back from using pixels. It is important to use the right characters in the presentation layer but it less important in XML where the right characters can get in the way.

Dan Moll from the audience: In lists you said that the proper way to do lists is to hang the numerics. How do you do this with quotation marks?

It is very hard to do this because the tools get in the way of what you are trying to do. There is no easy way to make this happen. Negative text-indent is one way to do this but it is only a rough approximation. You tend to not bother until the tools do what you want them to.