Typography

on my Web sites

Web typography has come a long way, as it should have. If computers could drink, the Web is now old enough to enjoy a beer! At first, there was virtually no control over typography at all. You took whatever the browser gave you for fonts, paragraph spacing, heading size, and so on. Variations were limited to HTML bold and italic tags, and many authors used heading elements almost randomly just to get larger type. Soon, graphic designers found kludges—like the one-pixel invisible .gif resized for spacing—and even went so far as to make entire pages, text and all, into Photoshop graphics that were sliced up and reassembled for display. Not the “good old days”!

Style sheets (CSS) finally gave us versatility, at least in theory separating content from presentation. Like HTML itself, the CSS standards have been an ongoing project, with browsers gradually implementing the still-in-progress W3C recommendations. My own work since at least the early 2000s has been happily based on style sheets, with a bit of conservatism about using the “latest and greatest” features. One continuing irritant, though, has been the limited selection of fonts that were predictably available on most browsers.

CSS3 appears to have solved the problem. Using its @font-face rule plus some JavaScript to solve cross-platform inconsistencies, we can now be reasonably sure that the fonts we specify are the fonts that visitors see. Better, there are literally thousands of fonts available that can be used with the new standard. (The downside is that the majority of them aren't all that useful!) Regardless, the new capability gave me the incentive to do a complete visual update to my web sites.

Goals

To start, I simply wanted to experiment with new fonts. But after making page after page of test paragraphs, I decided that all of the old standard fonts had to go. Not that Georgia, Verdana, and Arial are “bad”—they just aren't distinctive any more. I was also looking for fonts that are more open and readable as blocks of text.

At the same time, I wanted to fix any place where the page layout allowed text to overlap when it was enlarged (ctrl/cmd- +) in the browser. This is important for viewers with lower vision. Another small but important change was to replace any image that contained only text, both for accessibility and for search optimization. Finally, there were a few places where simple visual or typographic mistakes could be corrected. What did not change is the basic character and layout of each site.

Sites

This section details the changes in each site. In a way, it's as much for my own reference as it is for anyone else—just to save me from looking up style sheets any time I want to see what was done. Fonts are from the free Adobe Edge Web Fonts service except those marked “(Typekit)”, which are from the subscription-based Adobe Typekit system.

Home and associated pages

The tomjewett.com domain dates from about 2002, as I started gradually migrating materials from my old CSU Long Beach directory. The background image was carefully designed to reflect my interests, tile seamlessly, and conflict as little as possible with the text. However, it's never worked quite right, and the text also seemed a bit cramped. Quick style changes eliminated the image behind text, and a bit of line spacing plus a new font opened up the page visually.

  • Headings: PT Sans
  • Text: (home and biography): PT Sans
  • Text: (restaurant and typography): Alegreya
  • Left side links (restaurant page): PT Sans Narrow
  • Headline/logo: Maiden Orange

Database design

Changes only to the fonts, plus a bit lighter background for the left column.

  • Text: PT Serif
  • Headings: PT Sans
  • Left side links: PT Sans Narrow
  • Code examples: Source Code Pro
  • Logo: graphic image retained

Color tutorial

Started in 1997, at one point the side navigation was done with separate button images and a complicated system of replacing them to indicate the current page. CSS replaced that nonsense in a few years, but the multicolored image logo/headline remained simply a visual embarassment until now. (Finding the right font took a lot of looking, though.) The CSS layout did have a bug that permitted some text overlap at the bottom, which I fixed by replacing styled positioning with a layout table.

  • Text: PT Serif
  • Headings and side navigation: PT Sans
  • Headline/logo: Aviano (Typekit)

The Enabled Web

Like the database site, changes only to the fonts plus a lighter left column background. The tagline “Smart design…” took some testing, and I finally noticed that the serif font needed curly quotes rather than straight quotes.

  • Text and headings: Source Sans Pro
  • Tagline: PT Serif
  • Logo: graphic image retained

Photographic image quality

My newest site; I've been working on it anyway to upgrade from a plain “paper” to a nicer layout and more visual interest. I wanted an “architectural” looking headline to replace the image logo, and I also wanted these pages to mimic the look of my SmugMug photography site. Fortunately, SM recently updated their software—now including the Baumans font (clearly a rip-off of the classic Bauhaus), which is also available in Adobe Edge Web Fonts for use here.

  • Text: Quattrocento Sans
  • Headings and sidebar text: PT Sans Narrow
  • Headline/logo: Baumans

U of I Symphony tour, Champaign HS reunion, Accessibility resources

No change to any of these. The first two are historical and no longer maintained; the last contains mostly older or temporary working documents. All are fine as they are, despite the Times and Verdana.