Colophon
A colophon is a section of a book, usually at the back, that describes the book itself. It usually tells you what typefaces were used, what country had to be colonized to build the plantations to make the paper, and how big the drum of ink was. ‘Cause that drum, man: really, really big.
Web sites can have colophons too. On a Web site, the colophon is usually the page where the designer, in a fit of crippling narcissism, tells you what emo or goth-punk albums he-slash-she was rockin’ out to while he-slash-she was trying to remember what all those little toolbar buttons do in that one Web program. You know the one I mean. The one with all the little toolbar buttons.
This colophon is something in between. I’m going to tell you what fonts I used, but I’m also going to engage in a little gratuitous narcissism. Which, unless you stumbled across this page by sitting down at the only unoccupied computer at your public library that doesn’t smell like homeless-man pee or something, should come as no great surprise.
Are you ready? Then let’s-a begin.
If NASA ran on Photoshop, we’d have a lot more old astronauts
The stuff — I hesitate to call it “art” — that adorns the backdrop of this Web site was created entirely in Adobe Photoshop CS2. The final composite was built to a size of 900 by 800 pixels and consisted of about 60 layers, some of which can be seen in the screen shot at right.
Once complete, the composite was opened in Adobe ImageReady and sliced up for output. One image, 900 pixels across by 100 pixels high, makes up the masthead and runs across the top of your browser window. Another, 250 pixels wide by 700 pixels high, runs down the left-hand side; this image is called the “spine,” like the spine of a book. The schmutz and other nastiness that decorates the upper-right-hand quadrant of your screen comes from a third image, appropriately called stains.
Look, here’s a little piece of advice for all you budding Photoshop pros out there: Layers are your friends, okay? Use them. Put every element on its own layer. Never flatten anything. Learn to use the compositing tools Photoshop offers, like blending modes. There are like a dozen of them, and they all do different things. Experiment. Put things on top of other things and see how they fit together. Play with the blending modes and the opacities of your layers and see what happens. Never, ever erase anything. Instead, mask it off. You might want it later.
I think fonts are pretty
This Web site uses three typefaces: a display face, a headline face and a body face. The display face, which is used in the supah-spiffy logo up there and a few other places, is DIN 30640 Std Neuzeit Grotesk Bold Condensed, which has, like, the coolest name ever. Adobe tells me that “DIN” stands for “Deutsche Industrie-Norm,” but I’m fairly certain that nobody actually cares about that. Unless you happen to be a German license plate manufacturer.
When it comes to the headline and body faces, life gets complicated. Because, see, apparently there are different kinds of computers out there, and different computers have different typefaces on them. Now I know, saying that the typefaces used on a Web page depend on the computer you use to view that page makes about as much sense as telling me that the typeface used in a book varies with the brand of light bulb you buy. But that’s just how things are down here in the middle of the dark ages, you know? So here’s the scoop: If you use a Mac with halfway-up-to-date software and whatnot, you get one set of fonts. If you use whatever the latest Windows thing, you get another set. And if you totally suck ass and use, like, a vintage Kaypro or something, you get a third set of last-resort fallback fonts. And a swift kick in the ass for being such a loser.
If you’re on a Mac, your headline font is going to be Gill Sans, a font designed by Eric Gill way back in the 1920s. Apple includes a version of Gill Sans with Mac OS X, and it’s installed on your computer by default. Assuming you haven’t gone messing with things that don’t need to be messed with, it should still be sitting there just waiting to spring into action.
If you’re using one of those fancy new PCs with that Windows Vista or whatever they’re calling it these days, in place of Gill Sans you’ll see Candara, a more-or-less adequate sans serif font that Microsoft bundles with their products. It’s better than nothing. I mean, the letters do string together to form words. The job gets done, you know?
A similar situation exists with the body typefaces. On a Mac and any PC, the body face is Georgia. Georgia is one of those tried-and-true Web typefaces that pretty much everybody uses for everything all the time. If you squint, it looks like Utopia, which is a good thing indeed. If for some reason you don’t have Georgia but you do have those aforemention Windows Vista fonts, you get Cambria. Meh.
And if you have none of those, you’re stuck with Helvetica and Times, which is surely no better than you deserve.
I dream in black and white, but I blog in full color
I’m a big fan of keeping the color scheme simple and distinctive. I use only four colors here, and one of them would have gone completely unnoticed if I hadn’t pointed it out to you. Links, headlines and running subheads are TSOD Red (#8f0c03). Reversed headers (that h2 to you computer nerds) are TSOD Pale (#e2ded2) on a background of TSOD Blue (#314359). TSOD Blue is also called into practice occasionally for display type; you can see it in the “click to make a donation” sale tag thingy in the right-hand sidebar, for example. The background of the page is TSOD Blank (#f0eada) which looks an awful lot like TSOD Pale only slightly warmer.
I would love to tell you all about the hours and hours I spent pouring over swatch books under various lighting conditions to pick just the right colors for this Web site. Fact is, I just sorta twiddled the knobs for a second, went “Yeah, that looks pretty okay,” and moved right along.
I got miles and miles of tha Web site styles
Remember what the Web was like before stylesheets? No? Man, I’m jealous. I still have nightmares about that stuff. If you sneak into my bedroom at night, tiptoe across the room to my bed, lean in real close, and merely whisper the word “tables,” I’ll sit bolt upright with a scream on my lips. Hand to God.
Well, we don’t have to do things like that any more, now that we’ve got this “CSS” thing. Don’t get me wrong here; designing for the Web still sucks. It’s just that things that used to be flat-out impossible are now merely incredibly difficult. I guess that’s a kind of progress.
Back when the world was bright and new, there was but one style sheet for The Shape of Days. It was exactly seven hundred trillion lines long, and working with it was a pain in the ass of historic proportions. It got to the point where I stopped removing things. I just put new stuff down at the bottom, counting on the software to do the right thing and let new rules override old ones.
For the Fall 2005 relaunch, I rewrote the style sheet from scratch, wisely dividing it up into a handful of manageable, or at least not-kill-self-when-having-to-edit-able, chunks. There’s a style sheet called art.css that defines the masthead and the spine and the other decorative elements. There’s one called content.css that handles everything in the main column of text (called, coincidentally enough, the content column). There’s a sidebar.css that contains the styles related to the right-hand sidebar and the several elements thereof. And a few more.
For the Spring 2007 relaunch, everything changed again.
The Shape of Days makes occasional use of some CSS features which, having been invented since the turn of the millennium, are considered “advanced” by certain software companies coughMicrosoftcough. If you are unlucky enough to use Microsoft Internet Explorer, for God’s sake, stop. There’s an Apple Store on every corner these days. Go buy a Mac and join us in the 21st century. I occasionally check this site with Internet Explorer just to make sure that it doesn’t cause the screen to catch on fire or anything. Though that would be pretty cool. I’ll have to get to work on that. But anyway, my point here is that if you visit this site with Internet Explorer and you see something that doesn’t look right but no actual fire comes out of your computer, don’t bother telling me. I probably don’t care.
