gapers block

gapers block

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.

hidden gems

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!

criticisms

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?

  1. Josh

    Cripes, that’s a lovely site. I would go so far as to say that it’s better than the New York Times, in my humble opinion. Though I agree with you that it’s more than a bit inconsistent—-it seems a bit shabby in that respect.

  2. Alfonso

    Is that really Georgia in those article titles? The eye-sore bold titles are definitely Georgia, but the article title on that third screenshot is definitely not Georgia.

    OK, I just took a quick look at the CSS and found that it’s Lucida Fax, which —in all honesty— I had never even heard of. I think it looks gorgeous!

  3. Cavan

    On first click I wasn’t a big fan. It has issues issues creating dominance and nothing immediately draws me in. However, the real problem I discovered is that while most of the website is center aligned or at least spans the full width, the top navigation is left aligned and only spans a bit over half the width. This puts too much weight on that left side and throws off the balance of the design.

    However, looking at the site in bits and pieces through your article, there are lots of great details.

  4. Joey

    Thanks for the heads up, Alfonso. When writing this review, I wasn’t aware that the headlines were set in Lucida Fax. I don’t have it installed on my Mac, which is why I mentioned Georgia in the article. I can see why they chose Lucida Fax over Georgia, though. It looks great!

  5. Geoff

    Gapers Block is a shining example of imaginative web typography. A well deserved profile, indeed.

    Love the site by the way (typesites, not GB). I just found it via Smashing Magazine, and have already added you to my feed. Keep up the great work.

  6. Heartburn Home Remedy

    Not that I’m impressed a lot, but this is more than I expected when I found a link on Furl telling that the info here is quite decent. Thanks.