Typography and the Web

Designers love type--some more than others. This passion for letter form is rarely understood by anyone outside the design world. Most people wouldn't know a serif if it bit them on the descender. Long ago, when I was engaged, my soon-to-be wife asked what I wanted for Christmas. I listed off a few books about typography--she stared back blankly. But we designers enjoy this mystery knowledge of the sublimest of the arts. Then there's the web. Anyone with a refined appreciation for typography can barely stand the abuse of type on the web. It's truly ghastly--so few typeface options and so little size control. And on the web users can increase or decrease font size at will--oiy!

Early in my career I was a production artist at Pagano Schenk & Kay. I spent a large portion of my days fitting copy, working it into a nice even rag, letter-spacing and kerning everything from billboards to bowling shoe catalogs. Xacto blades and rubber cement brushes were like extensions of my hands.

So when I became a web designer I was both aghast at the horribly limited typographic control of the web, but also somewhat relieved that my days of filing metal or hacking up galleys were over.

Better Typography on the Web
But that was yesteryear's web. Today there is considerably more control over type. It used to be that the only way to definitively spec type was to use a GIF or a JPEG instead of HTML. Now there are many more options for standard text formatting using CSS. There are more typefaces, more size control, even line height (leading for you print types) and letter spacing can be controlled on the web. It's not print, but at least there are choices. In fact I'd say that there is enough control that the artful typographer can consider the web to be just one more place to explore the fundamental application of design and type.

So let's assume for a minute that you're one of those print designers that has punted in despair when it came to designing and typography on the web. It's time to go to work. You'll need to get a few web-based typographic concepts down, and learn some new terms with regard to spec'ing type on the web. By using your typographic sensitivity and the options available, there are some beautiful web-based typographic solutions to look forward to.

First things first
I'll give definitions to a few CSS terms that you'll need to know in spec'ing web type, but really the only way to spec type on the web is to see it. So click on over to Typetester and you can play with type settings in real time. You'll be going back and forth from this article to this tool so you may want to keep two browser windows open.

Typetester is a great tool built by Marko Dugonjić. Throw in some sample text (or use the default Lorem ipsum) and use the three comparative columns to view the text with various font settings. Results are viewed instantly. Using this tool can really help to experiment with font treatments in a true WYSIWYG environment.

Typeface Choices
Any typeface can be specified for a website. Whether or not that face is displayed depends on whether or not it’s installed on the user’s system. The list of dependable typefaces has grown a bit though. It used to be limited to Times, Helvetica, Arial, Verdana, and Courier. But these days you can safely add George, Impact, Trebuchet and Comic Sans (though you wouldn't choose Comic Sans now would you?). I would personally add Tahoma and Lucida into that list as well. Clearly this is still a very short list compared to all the typefaces available in print. However, there's nothing stopping you from spec'ing Truesdell, Centaur, or any other typeface of superlative beauty and simply allowing the browser to substitute one of the more certain faces if the perfect typeface is not installed.

If you're feeling adventurous and you're not afraid of mixing Flash and JavaScript with your HTML, there is a way of displaying your favorite font in a browser without using a graphic or the viewer having the font installed on their system. It's called sIFR (or Scalable Inman Flash Replacement). It's most effective for headlines or short lengths of copy but it's a great solution for typofiles that just HAVE to have Snell Roundhand for their headlines.

Font Size Options
Beyond the typeface selection are other font options such as font size. Font size is based on the "em" quad. Traditional typographers need no explanation about em quads, but for younger computer trained designers the "em" is a base size specified in points (do I need to define points?) upon which larger sizes are specified. The name "em" comes from the capital letter "M" which in metal type was usually a perfect square. The width of an em quad (used for spacing out lines of metal type) was equal to the width of the capital letter "M." How wide was that? Well that would depend on the point size of the chosen font. A 36pt. font would be about 36pt. wide. A 12pt. font would be 12pts. wide. In CSS, the base "em" setting is usually set to 10pt. Defining font size in "em" increments, when the base "em" is set to 10pt. means that 1.4em would equal 14pt., 1.6em would be the same as 16pt. But if you change the base the point sizes would increase proportionately. If this is confusing don't worry about it, just make sure that when spec'ing type for the web that you indicate a base em size of 10pt. and then just move that decimal point one place to the right to translate for a more the familiar point size specification.

Leading (a.k.a. Line Height)
For those who have not had the pleasure of setting metal type, leading refers to the thin slugs of lead that are slipped between lines of metal type to expand the space between each line. I remember once cutting strips of 2pt. leading into 38 pica widths for a letter-press piece I was working on. I was almost done hand-setting the piece when I needed a couple more lines worth of 2pt. leading and ran out. Ha! Running out of type is one thing we don't have to worry about on the web! Any who, leading can be spec'ed in em units too (by the way, type on the web does not have to be spec'ed in "ems"; points and pixels are possible too. But since "em" is the "right" way to do it, and because Typetester is set up that way, I'll continue to refer to these "em" settings.

Type Tracking
For all those Quark users out there, tracking is nothing new. Setting a negative or positive tracking will condense or expand the letter and word spacing. A quick typographic tip - tracking may very well improve the reading of lines set in all caps but spacing out lower case type, especially in body copy, is a typographic no-no. But you knew that already.

Color
As far a color goes - go for it. The days of "web safe color" are long gone. Go nuts.

Style
Scrolling down the page in Typetester shows the text in the specified typeface, size, color and leading. But it also shows it in all the various styles; italic, bold, bold italic, uppercase, uppercase italic, uppercase bold, uppercase bold italic, small caps, small caps italic, small caps bold, and yes - you guessed it - small case bold italic.

Other Typographic Web Resources

Identifont - Identifont, where have you been all my life? How many times have I seen a typeface and wondered what it was? There was a time when I was pretty good at typeface identification, but even then I spent plenty of time flipping through type books in search of the identity of that special face. Identifont is an online tool that asks a series of questions about the face you’re trying to identify. You can even tell Identifont what letter you have to compare to so if your trying to match a font in a particular headline and you only have those letters to go on, it will ask questions based on the sample letters you have. I've found it to be very helpful and accurate. At the very least it ends up showing faces that are very similar to the one being sought.

Type Navigator - A interactive visual font search tool.

Typophile - A typography blog. Jump into the fray and talk type with other type types.

Thinking with Type - A great educational resource for learning and applying typography.

Adobe Glossary of Type Terms - For a quick reference of type terms.

Typographi.com - Another great typography blog with RSS feed - sign up!

Font Tester - Another font specification site like Typetester. Not as pretty as Typetester but has even more CSS attributes to choose from.

In my opinion, the web will never be able to achieve the heights of typographic beauty that the printed page can. That's mostly because I consider the toothy impression of letter-press printed on slightly dampened handmade paper to be the utmost in typographic beauty. This would do very bad things to computer monitors. Nevertheless, the range of typographic control has improved. The tools available, even for the non-web designer, to help specify web typography now make it possible for all the typophiles out there that used to cringe at the web to take up the challenge of beautifying the web with thoughtful, typographic composition. And that's a good thing.