Sure, it’s not The New York Times, but Naz Hamid and Andrew Huff’s Chicago-based web publication Gapers Block looks just as good. More than the well-crafted layout, it is the typography in this gorgeous site that truly makes it a winner.
At first glance, there are three main typefaces in use on Gapers Block. The majority of the sites copy is set in Georgia while both Gill Sans and Arial are used for other headings, menu items, and links.
It seems that Coudal may have pioneered the use of Gill Sans on news style sites – set in bold with extra letter spacing – but Gapers Block does a fabulous job using this style to introduce several of the main sections of the site.
Arial is used sparingly throughout various portions of the site as well. The reversed out menu located on the top of every page contains links to the most prominent sections of the site. To differentiate these links from the secondary navigation located directly above the logo, they have been set in Arial. Both menus are set in sans-serifs, but the difference between Arial and Gill Sans bold is enough to separate the two.
Georgia is the most popular typeface used throughout the many pages of Gapers Block. It is used for headlines, story titles, and story text. In my experience, an overzealous use of Georgia in both headlines and copy tend to make reading more difficult. However the site makes very good use of horizontal rules on both the front page as well as individual article pages to separate headlines from content, giving pages enough white space to increase readability.
What has most impressed me is the fantastic use of sIFR throughout the main sections: Arts/Culture, Book Club, Food, Music, and Sports. Web typography today is still in its beginnings. There are few fonts that designers can choose to really separate their designs from the rest. The designer chose to implement the Hoefler & Frere-Jones typeface Archer, a recently released, eccentric slab serif. In these main sections, Archer is used for certain sub menus, headlines, bylines, and article previews. Full article text is set in Arial, rather than Georgia (which is used for body copy throughout the rest of the site). By using Archer, a typeface not commonly seen online, the visual style is both memorable and pretty!
I don’t have many complaints about Gapers Block, but a few things found throughout the site are a little distracting. As you can see on the home page, the smaller headlines found under the section Merge are set in Georgia bold. Under the section Detour, however, the main article headline is set in a larger size Georgia, but not set in bold. Now, if a reader was to navigate to the Arts & Culture section, they would find that the main headlines are set in large, dark, and bold Georgia. The heaviness of these headlines compared to the other articles located on the site seem out of place and detract from the design.
Despite some visual quirks that I wouldn’t mind seeing changed, Gapers Block as a whole is a design success, both typographically and in layout. What do you think?Want more? Check out the archives for previous reviews, and don’t forget to subscribe for future reviews, posted weekly.