Typography Concerns for Websites

Doing layout online is like listening to a bunch of people describe a traffic accident and trying to figure out what exactly happened. First there’s the HTML itself. Presuming everything works exactly the way it’s supposed to, every browser engine has a different set of rules that govern how things are to be interpreted – and those rules can change from one version to the next. Compounding that interpretation are browser bugs that wind up not rendering things the way they’re supposed to. There’s the fact that when you specify fonts, there’s no guarantee that they’re going to be present on visiting machines, so you specify a suite of typefaces and hope that somewhere in there is something that looks vaguely like what you intended in the first place. And then there are helper apps like Proxomitron, or Greasemonkey that allow users to rewrite and restructure the content of a page, adding or removing things and changing fonts to suit their own personal tastes. Despite your best intentions and through no fault of your own (in a perfect world), you’re conspired against at every step of the way.

Armed with valid code and CSS, your target is [reasonable] consistency across browsers and platforms – not identical. The internet as a platform is never going to allow the same kind of precision as printed media. And considering the vast array of roadblocks constantly lobbed into your path, it in no way justifies the effort that is lavished on printed works.

Spacing is a prime example. If you spend hours carefully adjusting all of the word- and letter-spacing, only to have a browser maul your carefully crafted text, your document will look vastly worse than if you’d just left it alone with the default word spacing. One bad browser is one too many – and you can’t possibly test them all.

The best possible advice is “get close and quit worrying” – it’s a whole lot less cynical and fatalistic than “get close and give up.”




Concerns (and Other Info):

Do not use typographical spaces other than that supplied by the keyboard space bar. Browser rendering engines cannot be relied upon to properly format anything other than the keyboard word space.

In the event of a series of quotation marks – i.e., single-double, ’ ” – separate the marks with a word space.

The concept of a web-safe color originated in ancient times when there was a worry that some graphics cards might not support the display of more than 256 colors. Those days are long since dead as disco. Any and all references to or warnings about web-safe colors can be cheerfully ignored.

While HTML entity names are case sensitive, hex notation – such as you would use for CSS colors or Unicode code points – is not. Traditional hex numbers were always written in uppercase, and many graphic apps give color sample numbers in that form. For the sake of tradition, hex numbers are given here in uppercase. Whichever form you choose, be consistent.