Paul Hayes

For the default FofR Online theme, the first of many, I have cho­sen a sim­ple appear­ance that focuses on the beauty of fonts and typog­ra­phy. The header uses a sans-serif font, on OS X this will be Hel­vetica Neue, on Win­dows the CSS font stack allows the design to fall back to the more com­mon Arial, plain old Hel­vetica isn’t used because some Win­dows machines have a ter­ri­ble low qual­ity ver­sion installed. The con­tent area is dis­tin­guished with a serif font, for the time being (no pun intended — where would I be if I started mak­ing type­face puns?), this is Times New Roman. I may exper­i­ment fur­ther with less com­mon serif fonts that are installed on a good major­ity of machines (e.g. with MS Office or Adobe CS4), falling back to Times New Roman if nec­es­sary.

Update: I have slightly altered the content’s stack to begin with Apple’s Times font rather than Times New Roman, mainly for the supe­rior glyphs that it offers, take for instance ‘fi’ in this post’s title. I’m attempt­ing to research the dif­fer­ences between Times and Times New Roman beyond a sim­ple com­par­i­son though inter­net sleuthing has not proved fruitful.

I’ve spent a short amount of time research­ing lead­ing, kern­ing, the mea­sure, et al to improve the leg­i­bil­ity of the con­tent region (e.g. The Design Cubi­cle). I’ve increased the CSS line-spacing and slightly upped the word-spacing to make the con­tent area more read­able. The design’s hor­i­zon­tal dimen­sions are all defined in ems, so the page scales cor­rectly with changes in font size — always main­tain­ing an appro­pri­ate mea­sure in the region of 78 char­ac­ters, ‘a cou­ple of alpha­bets’ — a good rule of thumb for leg­i­bil­ity. The ver­ti­cal align­ment in the header uses pix­els to keep the desired appear­ance. The header image uses the text-indent text replace­ment tech­nique and a trans­par­ent PNG that uses Hel­vetica Neue to achieve a con­sis­tent brand­ing style across platforms.

Mark Boul­ton states that the lead­ing should increase pro­por­tion­ately with the mea­sure. I am tempted to cre­ate a small JavaScript project for a fluid web lay­out that dynam­i­cally alters the CSS line-spacing of the con­tent based on the width of the win­dow and hence the mea­sure; just to see how things change. I think the first prob­lem may be decid­ing the scal­ing fac­tor to apply to the line-spacing.

One of the biggest caveats of cre­at­ing a design that strongly relies on the beauty of fonts is the dif­fer­ence in Win­dows and Apple font ren­der­ing. Take for instance the screen cap­ture below which com­pares Win­dows XP (Left, IE7) with OSX (Right, Fire­fox 3). My pref­er­ence is towards Apple’s styl­ish approach that attempts to match print, ver­sus Microsoft’s pixel jam­ming but eas­ier to read prag­matic ren­der­ing. By using fonts as the pre­dom­i­nant styling force on the page it is clear that in this case the Apple approach is supe­rior. Joel on Soft­ware has a very nice arti­cle that makes a good com­par­i­son between the two.

Areas still left to develop include the right hand columns, a proper grid lay­out and the footer, I have put these aside until next week.