The Typographic Web
I am attempting to improve the state of typography on the Web. I am no typographer, but I respect the art and am sad to see the state of the Web in a world of ASCII and bad fonts. With Unicode and Web standards, there is opportunity for so much more. Hopefully this site serves as a good example of what can be done without sacrificing accessibility.
By writing valid XHTML and using CSS correctly, you can make a robust page that will handle resizing and supports browsers well. While Web standards are an important foundation, there are other tools that help make a good page. If you build from the skeleton.html file below, you can type any Unicode character directly into the page. In order to help you get a good number of those characters under your fingertips, I've also developed the universal keyboard layout.
I’ve provided a number of files to help you improve the state of the Web:
- basic.css
- A stylesheet that cleans up HTML through the ages. It’s. Designed to be used on the client side to improve the default style used by your browser. Apple’s Safari and Microsoft’s IE for Windows currently allow you to use this feature.
- publish.css
- This is a more complete stylesheet to be included in the stylesheet you use for your site. Add
@import url("publish.css");at the top of your stylesheet to use this. - skeleton.html
- A skeletal HTML document (conforming to XHTML 1.1) that you should use as a basis for your own documents. Set the stylesheet and xml:lang attribute, then fill in the title and body.
It's easy to validate your MarkUp, CSS, and even accessibility, but there’s more to it than that. For one thing, you should follow the HTML Compatibility Guidelines as closely as possible.
Of course, all this is just tools. You still need knowledge to do anything with good typographic design. Using the stylesheets above is a good start, basically giving a format as dictated by Bringhurst in The Elements of Typographic Style. So, in general, that book is probably a good place to start. While the styles I defined work in general, the best result is always going to depend on the text. My stylesheets are merely a good point of departure.
Fonts
In addition, we need to make a list of fonts that are widely available, look good on a computer display, and have a fairly complete character set. Microsoft commissioned a few very good display fonts that come with both Windows and Mac OS X by default. They are Georgia and Verdana. They are currently not available for Linux or other systems. In reality, we should probably limit ourselves to freely available fonts – unfortunately, it’s hard to find good fonts that people are willing to give away.
Bitstream and Gnome have teamed up to provide a family of high-quality fonts for Open Source systems. These fonts are freely available, designed for screen viewing, and work on any platform. There is a sans-serif, monospace, and serif face, each of them available in a bold weight. The sans and monospace also have oblique (italic) and bold oblique. To download the fonts, visit Gnome's Font area.
It would appear that Microsoft’s fonts are available for Linux and such. There’s a SourceForge project that packages them.
There are certain features of a font that often help its readability on the Web. A tall x-height (the height of the lowercase letters like c, e, and u), sans-serif, and various other things.
As the pros will tell you, the correct typeface will depend on the text being set. However, you have to be careful to limit yourself to fonts that are readable on the low resolution of computer screens. It’s difficult. Print gives you a minimum of 300 dpi. For us to get even 200 dpi on a display, we’d need to have a 1600 × 1200 display on a 10′′ monitor. As it is, 120 dpi is about the best we can hope for.
Text
Now that you’ve got a good typeface, you have to make sure it looks good. On the Web we don’t have much control over kerning and such, we just have to hope. However, there are still a lot of things we can do. One of them is using non-breaking spaces ( ). You should use this entity between a number and its units, for example 12 inches, which results in 12 inches without allowing a line break to occur between the number and its units.
Using the correct characters goes a long way to make your text look professional. With the right font, you should have all the characters from the univeral keyboard layout available to you. This layout has been designed to make the most common typographic characters simple to use, and a slew of others nearby. Knowing when to use prime as opposed to the apostrophe (and never to use the ASCII apostrophe), when to use the letter x as opposed to the dimension sign, and what the difference between a hyphen and a dash is.
Knowing how to set your text is important, too. The width of the text (33 em is good in general), whether to set it justified (good for longer lines and serif fonts) or ragged (sans-serif and shorter lines), and how much leading to use.
The biggest problem, and the thing that bugs typographers everywhere, is that there is no way to know what font the client will be using for display. Most of the classical rules and guidelines of typography depend on the typeface. If it’s a heavier font the ellipses should be close-set; light font, more space. Without knowing the face, the typographer feels crippled. For the most part, I suggest trying to avoid those issues as much as possible. In the instance of the ellipsis, rather than typing ..., use the ellipsis character “…” and hope the font has a good glyph for it.
The control over the details that typographers thrive on is gone. If your browser is wider or narrower than the designer’s, the line breaks probably fall in different places. The typographer can’t force a word to the next line in order to fix the word spacing in his justified text. This is the kind of thing that drives them batty. The art in Web “typography” is designing a page that weathers these differences well. It might not look perfect in any browser, but you can make it look good in all of them.