Bad web type: georgia’s numerals

Thursday 22 May 2008This is over 15 years old. Be careful.

Typography is an ancient and fascinating subject, with many facets: artistic, historic, and technological. At the intersection of these is how technology has shaped the art over time. The design of typefaces has always been shaped both by what the technology was capable of, and what the technology required.

As new typographic technology is introduced, there’s a general trend:

  • imitate the old technology,
  • discover the possibilities of the new technology,
  • develop a new set of norms,
  • restore some parts of the old technology in the new.

When Gutenberg first carved type into steel punches to make movable type, he made a number of different versions of each letter to reproduce the variation found in manuscripts. Eventually uniformity became the norm, with sophisticated variant forms later re-introduced as an advanced option.

The web is no different: type on the web is limited by HTML, by ASCII, and by browser support. For example, straight apostrophes and quotes are a compromise required by the limitations of typewriter and computer keyboards. Curly quotes are the return of previous quality, but require a little more work.

Sometimes, though, the old high-quality touches are still inappropriate. I realized one of these in the comments to yesterday’s post about patch. Simon Brunning helpfully provided this snippet:

patch -p0 -i my.patch      # ABC0123456789XYZ

except that instead of the monospace code font I just used, it was in Georgia:

patch -p0 -i my.patch # abc0123456789xyz

See the problem? Georgia’s numerals (or figures) are one of those advanced touches, known as old-style or lowercase figures. In the full range of type possibilities, there are a number of ways of designing figures. Old-style are like lowercase letters: they have a variety of heights, some with ascenders and some with descenders, as the Georgia sample shows. The alternative is called lining, or uppercase figures, which all extend from the baseline to the cap-height, just as uppercase letters do. The monospace font has these, as do most typefaces.

BTW: There’s another way figures can vary: tabular or proportional, which doesn’t affect this discussion, but for the full details, have a look at the FontFeed’s OSF, LF, and TF Explained.

The problem here is that Georgia’s old-style figures make it impossible to distinguish a zero and a lowercase o. Of course, with lining figures, it would be difficult to distinguish a zero and an uppercase O, and don’t get me started on the whole l/1/I (ell/one/Eye) thing. Maybe the problem here is setting code samples in a proportional face in the first place.

Typographers would tell you that typefaces have to be chosen carefully for their intended use. The FontFeed article above makes clear that the choice of old-style or lining figures depends on what numbers you are setting: in running text, best to use old-style, in tables use lining. No mention of Unix commands!

So what’s a web designer to do? In this case, it is especially complicated, because comments can contain any kind of content at all, with minimal markup limited by the tools, and provided by the commenter. Even if my comment form provided a <code> tag, readers would have to know to use it, and remember to use it each time they provided a code sample.

No typeface is going to be right for all uses, and the choices are limited by having to consider cross-platform browser issues. Georgia is at least one of the web-safe fonts, so I can be reasonably certain I know what my readers are seeing.

Georgia’s old-style figures are a nice touch, a whiff of the high-craft past in our sterile modern times. The title of this post is a bit harsh: they aren’t bad. But using them indiscriminately in web content isn’t always a good thing. The best answer may be yet more technology, finding ways to guide the use of the old tools appropriately for new contexts.


A question that pops to mind is "why retype what you can copy and paste?" The only way doubt about a character being a 0 or an o is if you were copying by hand, otherwise
a) you wouldn't care, at least at first.
b) the correct character would immediately be evident in -in this case- your text editor.
You assume that the only reason to post code is to cut and paste it somewhere. First, it must be read and understood. Legibility still matters.
I spent 2 minutes staring at this post in Bloglines trying to figure out what the heck you were talking about. Then I realized, and went to your site to see the full picture.

As you've already figured out, Bloglines wasn't displaying the Georgia that you called for. It was rendering your post entirely into Verdana, and the visual point was lost on me until I got out of the RSS feed and into your post.

I can't tell if this is ironic or not. Bloglines was doing the "right thing" by using a font that showed me uppercase figures. But by rejecting your font choices, it was stripping out the information you were trying to convey.
What I find terribly annoying is when a font includes both lining and text figures (in OpenType format usually), but there's no way to tell the web browser which you want. Some of the new Microsoft "ClearType Collection" fonts default to text figures, for example, and others to lining. It's annoying having to wrap numbers in a special span and tell them to use another font entirely. It would be nice if you could specify all the fancy OpenType options in CSS... and googling around, I see someone else has written a much better, and much more well-informed comment on this already.

Dan: Think of how much more confusing it must be for people without Georgia installed at all :) The usual thing to do when talking about styled content seems to be to take a screenshot of it and stick that in instead.
You guys are right: I should have included a screenshot instead of a styled paragraph.

And Sam, thanks for mentioning the OpenType and CSS issues. While it would be nice for CSS to help us out here, I have no illusions that it will. Given the glacial schedule of updating the CSS standard, and the abysmal track record of browsers successfully implementing the dark corners of the standard, and then the further glacial pace of adoption of new browsers, I'm not holding my breath for CSS to somehow give us a solution.

Consider that even the CSS3 draft has no mention of this property; and even if it did, it would only help when used with a font that had both old-style and lining figures; and I don't have a good choice of websafe serif font that has both: no help is coming from the CSS quarter.
Truly, rereading my comment, the difference between 0 and o in Georgia is criminally small. What I meant to say is that in the case someone really cared about it, copying and pasting to an editor is trivial, moreso if you only want to read the code.
I know, it's a small pain. Still...
If we wanted DWIM, Perl is right there ->* :)

Although, to be honest, I think this problem would disappear simply by using a "better" web-safe font for comments. Trebuchet? After all, your posts do not use Georgia (but comments do).
Adriano, you are right the problem would disappear by using a better websafe font. The problem is, there isn't another one I like better. I wanted a serif face to contrast with the sans-serif Verdana that I use for the post text. Other than Georgia, that leaves me with Times or Palatino. Times is narrow and hackneyed, Palatino has a tiny x-height. You suggest Trebuchet, which is a sans. Georgia is the best choice open to me...
Another Georgia question/comment -- why aren't there curly/handed quotes and apostrophes on web pages that use Georgia?

(see apostrophe in headline on this page on my site )

Other sites I've seen that use Georgia (e.g. UK's Times and Guardian -- when was the last time they agreed on anything else?), none of them have curly quotes and the vertical ones look like the kind of cut-and-paste errors you get in Word...

And the curlies are there if you use font on computer...

Is it possible to code a site to display curly quotes?

Apologies if this is a v.basic question...
Whether text on the web shows straight or curly quotes depends on the characters in the text. You can't simply use the apostrophe key on the keyboard and expect it display properly. Searching the web for "curly quotes" will probably get you all the help you need.
Ned, thanks for reply and for reminding me how unhelpful forums can be... Maybe my question wasn't clear.

I know about the difference between straight and curly quotes. And I also know about the commonplace ansswers I'll get by Googling "curly quotes" (I've tried it before, and I've tried it today). I know a lot less about coding for websites and whether the behaviour of default fonts can be afffected by good website coding...

My question was whether there's a straghtforward way to get curly quotes on websites using Georgia -- i.e. is it a coding error and if coded corretly quotes are curly; or is it a problem with teh default font.

Major sites that should know how to do it don't, but the curlies are there in the default font.

If you have any useful thoughts that you can pass on -- beyond using Google -- I'd be grateful...

I don't think Georgia is any different from any of the other websafe fonts in this way: if the HTML text asks for curly quotes, they will be displayed, if not, they won't. If I understand you, you're surprised that major sites are showing straight quotes, and attributing it to a flaw in Georgia. I think it is simply a flaw in the sites: they don't value the curly quotes, and so don't bother to curl them.
So, fishing in your answer, it seems that there is a way to code HTML so that websites display curlies...

Can you share the information?

I'd be grateful...
Sorry Ned but you are wrong.
Georgia's numerals are best from the core safe fonts out there but they are just not right for that job you exemplify. Gerogia's numerals should be used in plain text, they are perfect for use within text matching the ascender and descender. The example you give is a tabular data where a typographer would use a sans serif regular numeral. Its just a matter of choosing the right typaface for the job.

Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
Comment text is Markdown.