In response to my post on the interesting typography of the J.L. Hudson seed catalog, Philip wondered whether it would be possible to design a blog so that it would look like an older publication that was typeset without the aid of computers.

There are lots of blog design elements, but one of the most important is the main text that people read. Here are a couple attempts at coming up with an online typographic style that looks a little more oldschool, more pre-computer.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

So do they look on the right track?

This is a greatly condensed version of a much more technical post. Click “continue reading” below to see the full version.

The original post…the blogger doth go on sometimes…

In response to my post on the interesting typography of the J.L. Hudson seed catalog, Philip asked whether it would be possible to design a blog so that it would look like an older publication that was typeset without the aid of computers.

I’ve done a little bit of working with web type design–and I do mean “little!” Most of it’s been closer to the hobbiest/novice end of the spectrum than anything that would qualify me as a journeyman web type guru. But with what experience I have, I’d answer Philip a very qualified “yes.”

Back in April, 2008 I did a post on Words Without Pictures, a now-deceased online journal dedicated to photography that was produced by the Los Angeles County Museum of Art. The publication, though about photography, consisted entirely of text–and what beautifully designed online text it was. Some of what I saw there makes me think that emulating something more oldschool definitely would be doable.

Warning: Some of the following gets technical fast. But there are some examples at the end that you could skip to if you don’t want to endure the tech talk.

The typeface of your pages has a huge amount to do with how your final blog will look. (People use the word “font” interchangeably with typeface. They are not the same, but I won’t go into the difference here.) If you want a more olden-style look, you probably should start with one of the two common serif typefaces that come with computers these days: Times (or Times New Roman) and Georgia.

Times is the old standby. Georgia is a typeface that’s been designed specifically for the web. There are huge numbers of other typefaces out there, but if the reader’s computer doesn’t have the typeface installed, the display will default to whatever the browser decides is best. Stick with the commonest ones.

There are millions of blogs using these typefaces with the default letter, word and line spacing that your browser will use to display the text. You wouldn’t look at them and say “old-fashioned.” What makes hand-set typography distinctive is that it isn’t perfectly uniform. The typesetter may have done subtle, creative things to make the text more readable or attractive.

While it is possible to make letter-by-letter modifications like this on your computer, the process would drive you crazy and you’d never blog another word. My idea for getting a distinctive look is that you make changes to the default text displays so your text display on the computer screen just a little differently from the others. In the end it’s not really hand-set, but your reader will look at the text and say, hmmm, there’s something different (and hopefully beautiful) going on here.

Another defining characteristic of most older publications is that they don’t have ragged right margins. All the text fits neatly into a rectangle. Switching from left-justified text to justified margins can contribute to your text looking more oldschool. And lastly, most older publications use indented paragraphs. Indent and justify and you’ll be a lot closer to your goal.

To make all this happen, you need to get into your blog’s HTML, and your blog editor will probably have an option for you to work in HTML mode. Also, depending on what software you’re using and what kind of service you’ve paid for (or not) you could have powerful access to the stylesheets that control how your blog looks. (If you blog at WordPress.com, for instance, this stylesheet access is a premium service.)

If you don’t have access to the stylesheets, you’d still be able to make local formatting changes to the text. But you’d have to make the changes every time you wanted something other than the default that came with your theme. That’s where stylesheets (part of CSS, cascading stylesheets) come in to save the day.

Below are some examples on what your could do with the text. I’ve given the default display of the typeface, followed by modified versions that at least to me look a little more old-fashioned, more hand-crafted. But be careful with all this. It’s incredibly easy to make text that’s illegible or painful for your readers to decipher. Less is more!

Times New Roman: out of the box, 14 pixel text height

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Times New Roman, modified: 14 pixel text height, letter spacing -.2pt, word-spacing 2pt, line height .9, justified, first line indented 9pt (The code: <p style=”font-family:times new roman, times, serif;letter-spacing:-0.2pt;text-align:justify;word-spacing:2pt;letter-spacing:-0.2pt;font-size:16px;line-height:.9;text-indent:9pt;”>)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Georgia: out of the box, 14 pixel text height

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Georgia, modified: 14 pixel text height, letter spacing 1.4pt, word spacing 5pt, line height 1.3, justified, first line indented 24pt (The code: <p style=”font-family:georgia, serif;font-weight:normal;text-align:justify;letter-spacing:1.4pt;word-spacing:5pt;font-size:14px;line-height:1.3;text-indent:24pt;”>)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

If all this looks fun to you–and how would it not be if you made it this far?–check out CSStxt.com. It’s a basic tool that helps you visualize changes to how your text displays. It may also eat up most of your waking hours if you’re a typography geek like me!

Also, if you’re new to stylesheets, there’s a good pile of information on stylesheets at W3Schools.com.

Hey, it’s winter. You’re not gardening as much. What else will you do with all your free time?