blog typography

In response to my post on the inter­est­ing typog­ra­phy of the J.L. Hud­son seed cat­a­log, Philip won­dered whether it would be pos­si­ble to design a blog so that it would look like an older pub­li­ca­tion that was type­set with­out the aid of computers.

There are lots of blog design ele­ments, but one of the most impor­tant is the main text that peo­ple read. Here are a cou­ple attempts at com­ing up with an online typo­graphic style that looks a lit­tle more old­school, more pre-computer.

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat. Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in culpa qui offi­cia deserunt mol­lit anim id est laborum.

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat. Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in culpa qui offi­cia deserunt mol­lit anim id est laborum.

So do they look on the right track?

This is a greatly con­densed ver­sion of a much more tech­ni­cal post. Click “con­tinue read­ing” below to see the full ver­sion.

The orig­i­nal post…the blog­ger doth go on sometimes…

In response to my post on the inter­est­ing typog­ra­phy of the J.L. Hud­son seed cat­a­log, Philip asked whether it would be pos­si­ble to design a blog so that it would look like an older pub­li­ca­tion that was type­set with­out the aid of computers.

I’ve done a lit­tle bit of work­ing with web type design–and I do mean “lit­tle!” Most of it’s been closer to the hobbiest/novice end of the spec­trum than any­thing that would qual­ify me as a jour­ney­man web type guru. But with what expe­ri­ence I have, I’d answer Philip a very qual­i­fied “yes.”

Back in April, 2008 I did a post on Words With­out Pic­tures, a now-deceased online jour­nal ded­i­cated to pho­tog­ra­phy that was pro­duced by the Los Ange­les County Museum of Art. The pub­li­ca­tion, though about pho­tog­ra­phy, con­sisted entirely of text–and what beau­ti­fully designed online text it was. Some of what I saw there makes me think that emu­lat­ing some­thing more old­school def­i­nitely would be doable.

Warn­ing: Some of the fol­low­ing gets tech­ni­cal fast. But there are some exam­ples at the end that you could skip to if you don’t want to endure the tech talk.

The type­face of your pages has a huge amount to do with how your final blog will look. (Peo­ple use the word “font” inter­change­ably with type­face. They are not the same, but I won’t go into the dif­fer­ence here.) If you want a more olden-style look, you prob­a­bly should start with one of the two com­mon serif type­faces that come with com­put­ers these days: Times (or Times New Roman) and Georgia.

Times is the old standby. Geor­gia is a type­face that’s been designed specif­i­cally for the web. There are huge num­bers of other type­faces out there, but if the reader’s com­puter doesn’t have the type­face installed, the dis­play will default to what­ever the browser decides is best. Stick with the com­mon­est ones.

There are mil­lions of blogs using these type­faces with the default let­ter, word and line spac­ing that your browser will use to dis­play the text. You wouldn’t look at them and say “old-fashioned.” What makes hand-set typog­ra­phy dis­tinc­tive is that it isn’t per­fectly uni­form. The type­set­ter may have done sub­tle, cre­ative things to make the text more read­able or attractive.

While it is pos­si­ble to make letter-by-letter mod­i­fi­ca­tions like this on your com­puter, the process would drive you crazy and you’d never blog another word. My idea for get­ting a dis­tinc­tive look is that you make changes to the default text dis­plays so your text dis­play on the com­puter screen just a lit­tle dif­fer­ently from the oth­ers. In the end it’s not really hand-set, but your reader will look at the text and say, hmmm, there’s some­thing dif­fer­ent (and hope­fully beau­ti­ful) going on here.

Another defin­ing char­ac­ter­is­tic of most older pub­li­ca­tions is that they don’t have ragged right mar­gins. All the text fits neatly into a rec­tan­gle. Switch­ing from left-justified text to jus­ti­fied mar­gins can con­tribute to your text look­ing more old­school. And lastly, most older pub­li­ca­tions use indented para­graphs. Indent and jus­tify and you’ll be a lot closer to your goal.

To make all this hap­pen, you need to get into your blog’s HTML, and your blog edi­tor will prob­a­bly have an option for you to work in HTML mode. Also, depend­ing on what soft­ware you’re using and what kind of ser­vice you’ve paid for (or not) you could have pow­er­ful access to the stylesheets that con­trol how your blog looks. (If you blog at WordPress.com, for instance, this stylesheet access is a pre­mium service.)

If you don’t have access to the stylesheets, you’d still be able to make local for­mat­ting changes to the text. But you’d have to make the changes every time you wanted some­thing other than the default that came with your theme. That’s where stylesheets (part of CSS, cas­cad­ing stylesheets) come in to save the day.

Below are some exam­ples on what your could do with the text. I’ve given the default dis­play of the type­face, fol­lowed by mod­i­fied ver­sions that at least to me look a lit­tle more old-fashioned, more hand-crafted. But be care­ful with all this. It’s incred­i­bly easy to make text that’s illeg­i­ble or painful for your read­ers to deci­pher. Less is more!

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

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat. Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in culpa qui offi­cia deserunt mol­lit anim id est laborum.

Times New Roman, mod­i­fied: 14 pixel text height, let­ter spac­ing -.2pt, word-spacing 2pt, line height .9, jus­ti­fied, 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, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat. Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in culpa qui offi­cia deserunt mol­lit anim id est laborum.

Geor­gia: out of the box, 14 pixel text height

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat. Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in culpa qui offi­cia deserunt mol­lit anim id est laborum.

Geor­gia, mod­i­fied: 14 pixel text height, let­ter spac­ing 1.4pt, word spac­ing 5pt, line height 1.3, jus­ti­fied, 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, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat. Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in culpa qui offi­cia deserunt mol­lit 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 visu­al­ize changes to how your text dis­plays. It may also eat up most of your wak­ing hours if you’re a typog­ra­phy geek like me!

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

Hey, it’s win­ter. You’re not gar­den­ing as much. What else will you do with all your free time?

January 26 2009 07:51 am | Categories: art • rambles | Tags: • • •

6 Responses to “blog typography”

  1. Philip on 26 Jan 2009 at 11:18 am #

    Hi James, I enjoyed this post, and thank you for the men­tion! In many books a note on the type­face is included. The date of its ori­gin and other inter­est­ing details are included. I am not a tech per­son, but I was able to fol­low your post quite eas­ily. The abil­ity to be read eas­ily is a qual­ity that I pre­fer in a type­face, but a qual­ity such as Palatino does have the look of an older type­face that I like aes­thet­i­cally. I enjoyed vis­it­ing CSStXt and play­ing with this there. Your blog is always a plea­sure to read and intel­lec­tu­ally stim­u­lat­ing on a win­ter morn­ing! Very best regards, Philip

  2. Philip on 26 Jan 2009 at 11:20 am #

    Ok James,
    You are so right about get­ting lost for hours at CSStxt.com. It is addic­tive!
    All the best,
    Philip

  3. Karen - An Artists Garden on 26 Jan 2009 at 11:47 am #

    (Groan) — I have been try­ing to avoid going to inter­est­ing sites that eat up my hours, enough hours van­ish by vis­it­ing blotan­i­cal.
    Inter­est­ing post James.
    K

  4. lostlandscape on 26 Jan 2009 at 8:55 pm #

    Philip and Karen, sorry for giv­ing you more ways to spend your wak­ing hours. It’s so hard for me to resist shar­ing some of the things I’m pas­sion­ate about!

    Philip, I’ve loved Palatino ever since I dis­cov­ered it. Design­ing for the web is always a lowest-common-denominator sort of thing, so I end up play­ing it safe. Palatino’s sat­u­ra­tion is increas­ing sharply: a study from May showed a sat­u­ra­tion that it was avail­able on 97.09% Win­dows machines and 78.86% of Macs. But that still leave a cer­tain per­cent­age of peo­ple who won’t be able to view your con­tent as intended…

  5. Jim/ArtofGardening on 27 Jan 2009 at 1:12 pm #

    I’m a 20= year vet­eran Art Direc­tor . And I fancy myself a typog­ra­pher, in an era where there are only a hand­ful around. I work in the print field and find the world of the web frus­trat­ing and lim­it­ing when it comes to fonts. I design web­sites for clients and always go with what ever default fonts I know will work across the broad­est spec­trum of computers/browsers. There are so few options. But I would sup­pose that as the web devel­ops, so will the tools for design­ers, one of which being fonts.

    My favorite font site is: http://www.identifont.com/

    If you don’t know the name of a font, it will help find it for you by ask­ing a series of ques­tions nar­row­ing down the selec­tion to the prob­a­ble you are search­ing for.

  6. lostlandscape on 27 Jan 2009 at 7:18 pm #

    Jim, frus­trat­ing isn’t it, the few num­ber of reli­able font choices? What they say about lim­i­ta­tions caus­ing a per­son to come up with a major break­through is over­rated if you ask me!

    Iden­ti­font is great! It’s really fun to answer the ques­tions and see the pos­si­ble num­ber of type­faces drop lower and lower. I tried it with a sam­ple of all-caps, and after 30 ques­tions it still had a ways to go. If only I’d had some lower-case e’s to evaluate!

Trackback URI | Comments RSS

Leave a Reply