Design, uninterrupted #146

February 22nd, 2011

Today’s post highlights the design of Layout, colors and typography recreate a vintage look of an old flyer combined with a few modern design elements. Using extra-large slab-serif Clarendon is a nod to the wood typeface used on the Old West “Wanted”posters, and a simple color scheme of faded orange and strong black further adds to the retro style (with extra splashes of white for highlights and hyperlinks). And for the extra typographical treatment, check the white section “numbers” in the left gutter.

The design alternates between three and two columns, with a translucent hatched texture superimposed on the full-size grid. This is where the typography starts falling apart a little. It begins perfectly with the oversized logo starting on a vertical line and anchored on both the baseline and the ascender line. While this strong alignment is maintained for all section headers and subheaders, the text sections are floating across the grid lines, both horizontal and vertical (tested on the latest versions of Firefox, Chrome and Safari). I know that the current state of web typography, even with recent advances in embeddable fonts and CSS3, is not ideal – and this is why adding such a visible grid might need to be revisited until all text elements are perfectly aligned with it.