Thursday 22 May 2008 — This is over 16 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.
Comments
a) you wouldn't care, at least at first.
b) the correct character would immediately be evident in -in this case- your text editor.
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.
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.
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.
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).
(see apostrophe in headline on this page on my site http://www.onethreefour.co.uk/ideas/ )
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...
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...
Best
Simon
Can you share the information?
I'd be grateful...
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: