Typographic Color

“The darkness of type as set in mass, which is not the same as the weight of the face itself. The spacing of words and letters, the leading of lines, and the incidence of capitals, not to mention the color (i.e., darkness) of the ink and of the paper it is printed on, all affect the color of the type.”

That’s how Robert Bringhurst defines color.

Obviously, on the web we’re not dealing with ink and paper; instead, we have CSS color and background-color, as well as a staggering lasagna of technologies that interpret our suggestions (including some that are entirely out of our control as designers, for good reason):

• The visitor’s OS antialiasing settings
• The visitor’s OS’s rendering engine (and any related settings, if different than general OS antialiasing settings)
• The visitor’s browser antialiasing settings
• The visitor’s browser’s rendering engine (and any related settings, if different than general browser antialiasing settings)
• Hinting instructions provided by the suggested typeface

For more on this, see the Interpretation and Suggestion tags in Nice Web Type’s bookmarks, as well as this April ’09 Typophile thread.

Visually awful cocktails of interpretation notwithstanding, the new Typographica is a brilliant example of how subtle typographic decisions about face, size, weight, leading, measure, and white space can at once summon centuries of measured harmony and challenge conventional visual hierarchy to which we web designers may unnecessarily cling.

Look more closely at our Typographica screenshot. What do you see?

I’ll tell you what I saw at first — a stark, striking page with no nav bar, no indication of “you are here,” and a type specimen with text set so large that it, though beautiful, was kind of overpowering compared to the site’s masthead. Although the content is clearly aligned on a grid, the different headings and text chunks seemed scattered.

Then I read the review.

Spending some time reading relieved me of my self-righteous initial reaction, and I began to see the composition for what it actually is: a wonderfully orchestrated hierarchy of content meant to envelop the reader at a particular moment in time: when the reader is reading.

Look at the same page again. This time, squint (or better yet, take a minute and enjoy reading the review). Notice how, either by squinting or by engaging in the act of reading, compositional pieces are forced into your periphery and the visual hierarchy becomes clear.

This hierarchical clarity isn’t achieved through the typeface choices for display or body text, nor is it due to sizing, weight, arrangement of the composition, or the balance of white space via leading and spacing.

Its success is the cumulative result of all of these small decisions.

Such clarity is rooted in a sensibility that one must develop firsthand. No one can tell you what the balance is – you must see it for yourself. Study Typographica. Look at the measurements in detail. Ponder the decisions made about CSS color and background-color, size, leading, measure, and other compositional spacing. Ride the grid.

So what about my initial reaction to the design – shall we brush it aside so easily? And what I said before about, “conventional visual hierarchy to which we web designers may unnecessarily cling;” what about that?

Outward from content

Max Kerning forbid that we should forget our Beatrice Ward; it’s easy to appreciate Typographica’s focus on its excellent writing. Not every website can make do with such recessed navigational cues, nor will every author honor his or her own voice with typographic soul to the extent that refuting convention looks this good, but the idea that content can bear focus to the exclusion of such traditional fixtures as a navigation bar and breadcrumbs is humbling. Will it work for you?

I do think the curve for orienting oneself among the once and future annals of type reviews, book reviews, and commentary is too steep for the passer-by. But the curb appeal is surely enough to coax even casual typophiles into staying long enough to learn the system.

Besides, everyone arrives via their RSS reader or shortened URLs. Right?

Encore: regarding the code

It takes both fortitude and a qualifying paragraph like this one to properly start examining the markup and style of others. While I often practice what I preach, my work is deserving of at least as scathing and shallow a once-over as I am about to provide.

A caveat: I’m only looking behind the scenes of the page that appears in this article’s screenshots. Typographica is an enormous website, and code will vary from page to page.

CSS-naked

With Cascading Style Sheets disabled, Typographica does pretty well. Headings, navigation bits, and actual review text are semantic; other text, on the whole, is not. I see a bunch of non-semantic and/or empty div and span elements. I also see inline styles, which aren’t technically a problem but don’t show very good form.

It would also make sense to reorganize the source content such that <h2>Archer</h2> lives above the image sample, because it’s the heading for that too. Adjusting CSS accordingly is feasible.

Between the sheets

The site’s stylesheet gets the job done. There are no fancy techniques to reveal, but because the markup is clean where it counts, the site’s h1 has visual elbow room, and the plan is that the masthead will continue to change often, Typographica is a great candidate for experimentation with new techniques as they develop.

Regarding well-formedness, I wish every stylesheet were hand-crafted like Doug’s. Comment flags … math notation directly next to each measurement … ahhh.

Hey, you’re not done reading

Do not skim this fairly critical encore and assume that Typographica is “another one of those designery websites that doesn’t care about web standards.” Care is obvious. Take a look. I’m merely suggesting a few improvements for the sake of critique and educational value.

Soon I realized that I’ve seen that powerful image of two crossed barefoot child legs somewhere else, and sure enough I rediscovered them on another site that impressed me just days before GAG did, it was the site for the Care For Kids Farm project.

Constant Metamorphosis

Both sites have undergone numerous reincarnations since I first laid my eyes on them. Fortunately, all previous GAG versions have been preserved and you can see them in all their August, September, October and November glories.

When September’s version of GAG was released and once again featured in numerous galleries, I could not sustain my curiosity any longer and embarked on a private investigation to find the designer of those humble pieces of art. I got lucky and landed an interview (that was soon followed by many friendly chats) with Ronny Jander, the creative genius behind GAG and Care For Kids Farm web sites.

The Care for Kids Farm is a non-profit organization in Zambia, founded in 2001. What started as a small orphanage with three children has since grown into a big family with forty children. Ronny has joined the Farm four years ago, leaving his native Germany behind. About a year ago he got interested in Web Design, and already last August he decided to start the GAG project, where he would be designing new versions of the GAG web site every month in hopes of building up his portfolio and attracting some clients, thus generating more revenue for the Care for Kids project. What a simple, yet such a powerful, idea for the world to think about: get a web site and give to kids in the orphanage.

With a background in traditional art, Ronny brings a fresh look to the world of Web design. With just a few well-chosen photos, colours and typography, as a true artist, he pours his heart and soul into his work, culminating into web sites filled with raw emotions, genuine love for the craft and painstaking attention to details.

While all the previous versions of GAG and the Care For Kids Farm were designed as single page sites the latest re-designs were built with Wordpress, Ronny’s new venture in advancing his web design skills.

Magic revealed

The very first thing that catches the eye on the new GAG site is the right alignment of its main content, something that we don’t see very often on the Web. The surprises continue as you start resizing the browser window: the site’s title, tagline and the GAG huge lettering in the background, all scale concurrently, following your mouse moves. Being the curious person I am, I immediately launched Firebug to uncover the secrets to those alterations:

Both images are embedded with img tags, not as background images. The big GAG lettering is inserted right after the body tag, with 1648x519px image dimension and styled with CSS:

#backimg {
    left:-15px;
    margin-top:4%;
    position:fixed;
    width:100%;
    z-index:-1;
}

The CSS class .logopic, set with width:100%; keeps the 940x330px image of the logotype and tagline constrained and under control of the parent div.logo-top:

.logo-top {
    left:0;
    position:fixed;
    top:12%;
    width:35%;
    z-index:13;
}

The site’s content is floated to the right and each post is wrapped within a div element with a transparent PNG image in the background, allowing us to see the GAG lettering underneath while keeping the content unobstructed and legible.

Obviously, IE6 users won’t see any of those alluring features (neither the scalable images, nor the transparent backgrounds), but rather than compromising with the design, Ronny gives up the support of the ancient browser with a polite note in the footer.

The site’s typography is simple yet understated. The main copy is set in Arial, while all headings and supporting text are set in elegant Georgia. Plenty of white space, delicate dotted lines, post titles aligned to the right of the article, restrained image styling and the see-through backgrounds give the site an airy feel, while the earthy colour scheme of harmonious browns and greys is brightened with a tangy orange on link hovers. Even the social bookmarking icons have been retouched to go in unison with the site’s subdued style.

GAG’s footer deserves a special mention. I love the delicate type treatment and how Ronny uses photos to enforce site messages. In the footer it’s a girl looking down at her bare feet. In the header it’s a boy, leaning on a giant G, clearly needing our support, or else he’ll slide down. The girl on the welcoming image looks up with a bashful smile, the illuminating light of hope behind her is a sign for her brighter future, supported by GAG.

Criticisms

I have only a few comments and wishes. First and foremost, the Get and Give image title needs to be linked to the homepage: habitually, to go back to the homepage, the majority of users click on the logo/large site title rather than on the Home link. I would separate About and Contact sections into individual pages. I would also add categories or tags to make the content more digestable. Lastly, I just wish Ronny and his team would find more time updating the blog with fascinating photos and longer posts.

What are your thoughts on GAG and its designs?

The entire website is displayed in one long, easy to navigate page. The content is organized into a six column grid; although it is more staggered than organized—but that is why this site is so much fun!

Although it is a very long page, finding your way through the site is not difficult at all. The navigation occupies the left-most column, however it stays in place no matter how far down a user is scrolled. When menu items are clicked, the page automatically scrolls in a quick but smooth motion, which is a nice touch that’s been seen somewhat recently on other sites, but works exceptionally well here.

The entire page is set to a dark gray background; however, the readability is not affected due to the wonderful type and color treatment. Starting at the top, visitors are greeted with a big, beautiful title set in Adobe Jenson, along with a photo of the wonderfully designed bottle on the right.

Each section of the website is dominated by large titles, also set in Adobe Jenson, through the use of CSS image replacement. The rest of the copy is set in either Times New Roman or Georgia, which once gain goes to show how accessible and elegant Times New Roman can be when used properly.

Moving down the page, bright and colorful photos are intertwined with each section. This is done superbly. The photos contrast nicely with the light text and the dark background, which makes for a nice change of pace while staring at a mostly dark design. Also notice how most of the photos have a green and yellow color to them. This reinforces a strong color scheme, but is also a sign of very good art direction. Too many random colors, especially in photographs, can be distracting—which this design definitely avoids.

Speaking of color, there is an additional color thrown in occasionally throughout the site: dark red. I can’t get over how perfect this color is for the design. It is used sparsely, mainly for a few small headings, but most notably is used as the background color for the pop-up section of the site called “Stockists.” The white text on an ever-so-slightly transparent dark red, all on top of dark gray, is lovely. Once again, the text is still readable despite the fact that white text on a red background typically brings a big strain to the eyes.

What I am most impressed with is the use of the grid. Text and photos are staggered throughout the entire site, but the placement of the content is so unconventional and unpredictable that one almost forgets that their is some sort of underlying structure. Pull quotes and photos of all sizes are located all over, whereas the actual copy is usually located in the second, third, fourth, and fifth columns. Whoever designed the site did an excellent job of designing around the content rather than copying and pasting the copy into a pre-defined column.

Criticisms

If anything, I’d like to see the wine bottles throughout the page photographed under better light. I’m also not a fan of the random gradient found in the section called “A Brief History of Wine.” The gradient doesn’t fit into the minimal design at all. Other than these few qualms, I don’t have anything negative to add.

Conclusion

The Black Estate Vineyard website is unique, interesting and beautiful. It’s certainly unlike anything I’ve seen in quite a long time. What do you think?

His new website—which includes both his blog and portfolio—is inspired by a concert poster designed by Swiss designer Joseph Müller-Brockmann. The way Wilson translated the idea of the poster into digital form is astonishing. If Joseph Müller-Brockmann were alive today (and designing websites), this is what they would look like—trust me.

Wilson’s use of type, color, and most of all, structure, not only keeps the Swiss style of graphic design alive (print withstanding), but also breathes a breath of fresh air into the world of web design and what is typically found on the Internet today.

Type

Among other things, typography plays the largest part in holding the design together. On the home page, which lists his various blog posts, photos, links, and other “ephemera”, every letter is typeset in Helvetica—from the navigation to the headings to the body copy.

One thing I’d like to point out is his use of Helvetica instead of Arial for body copy. It’s understandable why many designers use Arial at small sizes because of the horrid rendering of Helvetica on the Windows operating system; but the fact is, Helvetica looks great on Macs. I have yet to understand why some designers don’t use Helvetica instead of Arial on their personal websites, considering their target audience are Mac users (Khoi, I’m looking at you!).

The typography veers into a new direction when one digs deeper into the site. Blog entry pages are typeset in big, very readable Palatino. Despite the fact that this use of typography, in a way, disagrees with most of Brockmann’s work, the result here is positive. The type is easy to read, and is a nice change of pace.

In keeping with the consistent style of the home page, Wilson manages to use large, tightly letter spaced, bold titles set in Helvetica throughout most other pages. The contrast between the sans-serifs and the serifs is very comfortable on the eyes and makes for good hierarchy.

Color

When Wilson introduced his new design, he noted:

“The color is the only purely visual accent, but it only adds character to an impact that’s already there. I wanted to see if I could get that across on the web. First of all, that scale and contrast, but also that play between color and content. I’ve never been much as a purely visual designer, and I’m worthless as an illustrator. So I try to stick to the tools I have left: type, spacing and color. Especially color.”

And boy did he utilize those tools very, very well. His use of color is really what separates his site from most other Swiss inspired sites. White seems to be the popular color for most Swiss design, especially on the Web. When Wilson’s new site debuted, the background color of his site was green. It was memorable, and in addition to the type, it really made the design his. Within months, Wilson changed the background color from green to a cross between yellow and orange—once again: very memorable. I actually kind of hope he changes the color every month. He’s two for two, so far.

When a user clicks through to an interior page of his site, the background of the main content is changed to white (I’m assuming this was done for readability), while the header and footer remain unchanged.

Links are set in a blueish-turquoise color that looks great in contrast with both the white background and the colored background of both the header and footer.

Structure

And now, the finale. The typography and and color are merely accessories to the structure of the website. Every piece of content is staggered across a grid. Some columns remain empty for the sake of whitespace and readability, while others are used for either meta data, comments, or other important information.

The list of recent blog posts on the home page seems to be an almost exact replica of Brockmann’s orchestra poster. Most evident is the title (bold and larger than the surrounding text), which occupies the second column, which is very similar to Brockmann’s design.

One of the great things about Wilson’s design is the transformation of static, permanent content to dynamic, interactive content. The Photos section, for instance (found on the home page), is staggered across the grid, while the information (including titles and dates) is set against various columns of the grid in a readable and attractive way.

Conclusion

As hard as I try, I cannot criticize Wilson Miner’s website. Dare I say it: Wilson Miner’s website may be perfect. But then again, what else would one expect from one of the folks responsible for the Apple.com redesign?
—
This is just an idea, but I think it might be interesting if Wilson were to experiment with sIFR and attempt to replicate the Akzidenz Grotesk found on Brockmann’s concert poster.

The first impression everyone gets from Jason Santa Maria’s latest site incarnation is how original and groundbreaking it is. But after some careful thinking and designer’s explanations we realize that no, we are not witnessing a revolution in web design but rather an experiment in what blogs can look like if we start treating them as a typical web site (especially the one from the old times) where every page looks different, or as one of the magazines we like to read where every article is laid out slightly different from the other, with design supporting the content.

After all, why should every blog post fit the same template? Just because this is how the majority of blogging platforms are built to work, it doesn’t mean that we shouldn’t think outside of that typical blogging box and turn to media for inspiration. That’s why Jason Santa Maria’s radical approach to laying out every blog post differently is so praiseworthy.

Technicalities

When every page of the site comes with a different layout and style, it’s important to keep certain elements unchanged to let the visitors know that they didn’t end up on someone’s else site after clicking on a post title. Jason achieves that by keeping the same header, comments and footer structure, changing only their colour scheme and leaving the middle content area of the site to all the experiments in style and layout.

Of course, adhering to a strict grid (8 columns 100px wide, 10px gutters, 20px margins) helps to keep the site pages and all the elements within in a perfect harmony.

He also separated CSS styles into different files: site’s foundation and all default styles are set in master.css, while every page is calling its own CSS file with the same name as the title of the page/post (e.g. on-the-subject-of-design.css) that precedes and thus overwrites the default styles in master.css.

Obviously it takes lots of careful planning to organize CSS styles efficiently. I highly recommend everyone to study CSS code on Jason Santa Maria’s site: you’ll be surprised to rediscover the power of cascades and CSS code so exquisite in its simplicity that will make you to rethink your approach to CSS logic.

For instance, let’s take a look at the tactics employed to indent the content on A New Day article (where, by the way, you see the default format of the site): rather than re-position DIVs that contain the indented screenshots, it’s the paragraphs in the content that are set with horisontal margins, while DIVs appear where they should – at the beginning of the main content DIV:

<-- HTML -->
<p class="lead">I like my old site design; it feels distinct even now....</p>

<div class="illo two left"><img alt="Designer Teaser" src="/i/entry/a-new-day/tease-1.jpg"/></div>

/*CSS*/
#content p, #comments p {
   margin: 0 120px 20px 230px;
}
.two {
  width:210px;
}
.left {
 float:left;
 padding-right:20px;
}

And as a quick homework for you all: check out and compare the code used in styling categories and tags on Jason Santa Maria’s site vs. categories on Subtraction.com.

Attention to details

A painstakingly meticulous attention to details is what adds the inscription “great” to a rather general title of “designer”. There are plenty of examples of such greatness on Jason’s site: from a simple but an eye-catching change of comments ‘speech’ icon to a ‘skull’ icon to celebrate Halloween, to occasional treats with delicious drop caps set in the background, to a superb sIFR treatment of titles and navigation in Trade Gothic, or a poem set in a stunning Franklin Caslon Italic, to gorgeous background images, to an exquisitely crafted rich footer.

Typography

Even though the default font on the site is set to Lucida Sans Unicode/Lucida Grande, we see it used mainly for the auxiliary data and in the footer. The main content is usually displayed in Georgia. Then there’s also Trebuchet MS used for post’s meta data like category and tag names, navigation between posts, headings in articles. And of course, how can we forget the almighty Trade Gothic, Jason’s favourite typeface, that’s generously used throughout the site, including the logo type.

That brings us to four different fonts used on one site, plus Monaco is used for CODE and PRE tags. But wait, there are also additional typefaces that are used on different occasions: Omnes Italic, Soho, Franklin Caslon Italic, Auto Black Italic, Freight Sans Book… Yet despite such a typographic concoction Jason’s site doesn’t appear amateurish, on the opposite, only a highly skilled professional can pull it off by seamlessly blending all these typefaces so well that they become an integral part of the overall design without going overboard.

Critique

I would’ve criticized Jason’s decision to tag articles by colour and list them above more intuitive lists by categories and topics, but thankfully he changed the structure of his archives page. I especially like the full page screenshots of each article that appear when I browse archives by category, month or tags.

So all is left now to criticize is the image replacement techniques that are used once in awhile for article titles instead of sIFR, though I do understand that sometimes it’s hard to get sIFR play along nicely. Still I think that readers should always be able to select, copy and resize any text on the site that is part of the content.

Oh, and I wonder why is he mistreating his logo so badly and displaying it chopped out on the left side?

Conclusion

Whether or not Jason Santa Maria started a blog design revolution is too early to tell. Personally, I doubt we’ll see that many blogs following Jason’s footsteps, due to various reasons: not everybody welcomes the idea of having their blogs look like magazines, very few of us can dedicate time and resources to carefully plan out the structure of a blog that would accommodate those style variations, and of course not everyone is as creative as Jason. But he definitely started a new direction in web design that’s very inspiring and refreshing.

Numerous articles were written on topics of how to encourage readers to visit our blogs rather than simply scanning the posts in RSS feeds. One sure-fire way to achieve this is to write a content that would compel subscribers to leave a comment and participate in discussions. Another option is to design such a stunning site that would incentivize the fans to read the original version of the article on the beautiful site rather than its bland version in the RSS reader. However the latter method would not last for too long. Jason took it to the next step and by laying out all published articles differently he can be sure that every reader would click away on that RSS link just to see the post in all its glory on the site, and then perhaps fill out the comment form to sing another praise to its creator.

To conclude I’d like to quote Leon Paternoster on two different approaches to web design:

Nielsenify (verb, trans.): to make a website functional and ugly. Antonyms: tannify, santa-mariafy.

Which approach do you prefer?

GOOD Magazine was founded in 2006, and covers social issues, politics and enviromental issues. Its tagline is ‘for people who give a damn’. Remarkably, the site donates all subscription fees to charity (over $800.000 so far).

The design itself is very clean and minimalist, an impressive feat given the amount of content on the site. The site really seems to have brought a lot of the design feel from the print edition to the website, without feeling as though they were trying too hard.

The main typeface on the site is Arial. The serif details sprinkled across the site are Georgia, and mainly its italic family member. There are also some Trade Gothic and Vista Sans appearing in graphics on the site, as well as the logo, which is a hand drawn design by Arnaud Mercier.

One of the things I love most about the type selection is the way the Arial family is used to its full extent. By varying the size and style of one typeface, GOOD is able to keep a consistent and clean look, while still differentiating parts of the page.

Where the site really shines, though, is getting the typographic elements to play off of each other, in addition to the wonderful graphics and near-perfect element spacing.

From having some of the most tasteful drop shadows I’ve seen in a long time (and there are a lot of drop shadows out there) to another great example of balancing borders and wonderful iconography, the site gets a lot of details right.

A few of the problems I have with the site, stem from GOOD being too good.

Two of the magazine’s greatest assets are their awesome videos and amazing infographics. Unfortunately, their infographics tend to be a bit on the large size, and with no way to zoom out, you end up with a quite a bit of scrolling. While the videos are of great quality, they do tend to be a bit difficult to navigate between.

It’s a common misconception of typography that the job of a modern day typesetter starts and stops with choosing the correct typeface. That same misconception on the web is that typography starts and stops with the font stack. GOOD Magazine puts both of those misconceptions to shame.

Actually, the font stacks on the site are pretty poor. Arial falls back on Helvetica and Verdana, and Georgia falls back on Times New Roman or Times. Why anyone would choose Arial over Helvetica for headlines is beyond me. One could argue that Arial has some advantages at smaller sizes, but I won’t go into that discussion here.

While Georgia is a great and web-safe typeface, there are still far superior italics out there, and on the machines of millions. So when the typography on the site really works, I’d say it’s despite the font stack, not because of it.

But, truth is, the site works. The design is really thought through, and the details are just right. True, we can bicker on and on about the slanted ends of the Arial glyphs, and the boringness of not choosing something fresher than Georgia italics, but really – typography is about more than choosing a typeface.

AIGA.org includes an eclectic variety of typefaces, colors, and styles, but before I talk about the site’s typography, I’d like to point out some major features that really bring the site together.

First, and foremost, is the banner located near the top of every page on the site, which displays a random image from the AIGA Design Archives. This is a brilliant idea for both functionality and aesthetics. First, it helps separate the two different menus (one above and one below), and it literally makes every single page unique to the visitor.

Second is the navigation and the home page presentation. When you first visit AIGA.org, you’re presented with two menus: the first consisting of specific links that most visitors want to see on every page (About and News come to mind). The second menu, located below the Design Archives banner, consists of the site’s six main sections. These menu items are important in holding the site together through the apparent 6-column grid.

Located on the sidebar of the home page is a short but insightful description of the AIGA, with a link to finding out more about the organization. This in addition to the usable navigation makes the homepage extremely easy to digest.

Now on to the typography: Three main fonts are used throughout the site. Interstate (which is used for the navigation and also for headings through the use of sIFR); Georgia, used mainly for headlines, bylines, and body text; and Verdana, which is used throughout the site to separate the important content from the less important.

Along with this wide variety of typefaces is a wide variety of type styles and colors. On the homepage I counted at least seven different types of combinations of type styles and at least five different colors. I’m usually one to criticize designs that utilize so many different styles and colors in one layout, but for some reason this is the exact reason why I love this website so much. It’s spontaneous, random and fun, but at the same time organized.

Some have argued that the AIGA website is too hectic, but I disagree. The website is eccentric in its use of typography, styles, and colors; and what better representation of an organization that represents so many different areas of the design spectrum.

Typetweets does have quite a few bugs left in it (in fact, I haven’t looked at it in Internet Explorer yet!), so pardon the occasional rogue non-typographic tweet, display bug, etc. To be completely honest, this is what they call an alpha version or a proof of concept. But it’s still good fun to play with in my humble opinion, even in its rough form.

I apologize for the lack of recent reviews (moving tends to destroy any semblance of a schedule), but rest assured things will be back to normal very quickly. I’ll be posting more about Typetweets on Astheria in the near future, but for now, feel free to voice your thoughts on it here. Enjoy!

Appropriately titled Diaroogle, this human-powered toilet search engine was launched in the first week of August, but it’s already generating a buzz on the Web. Some are bashing it as a disappointing application while others find it very promising.

What makes this site different from other washroom search engines (yes, believe me, there are others) is that each submission is accompanied with the poster’s personal experience and insider information which you won’t find anywhere else. Some toilet descriptions on Diaroogle are nothing short of mini-odes: some praise, others criticize while managing to pique your curiosity into try how bad the place is in real. Often they will give you a complete run down of what can be expected at that particular location, including the quality of food served, or the weird behaviour of people working there. You owe it to yourself to check out some of the listings there. If not because of the nature calls, then at least to get a few laughs.

However, I’m not here to talk about the technical side of Diaroogle, nor about the practicality of its application. I’d like to sing a bit of praise to its creators (designer Kevin Burg and developer Evan Cooney) for designing such a pleasingly looking site for not so pleasant calls of nature.

singing greys

The first thing that catches the eye is a gorgeous colour palette with dark and light greys and pinches of red that give the site a surprisingly classy look. It’s nice to see that despite shaping the site in a form of a toilet paper roll, (a paper fold in the top corner and a zigzag border in the footer) Kevin didn’t choose a brown & white colour scheme. The contrast between the foreground and background colours on the homepage is just perfect, though the small font-size of descriptions in the listings make them a bit harder to read.

the power of gotham

The choice of typography on this site could have not been more appropriate: the masculinity of the type Gotham (that was elected to represent Barack Obama’s Change campaign) appeals to male users of the site, while the femininity of Kuenstler Script Bold strikes a chord with its female users.

It’s interesting to note that Georgia was chosen to represent the promotional text on the site, (we can see it on the homepage and in the footer of the About and Press pages) while the rest of the text is handled with Arial.

There are also a few headings with image replacement techniques here and there, but they’re executed so tastefully that I don’t mind seeing them on the site.

criticisms

Even though I really like the use of Kuenstler Script Bold for the text in the search bar, unfortunately the CSS technique implemented by Kevin doesn’t work in Internet Explorer, so IE users miss out on that interesting feature.

Currently the CSS code that displays the background image in the search field is the following:

#search form input[type="text"] {
background:#FFFFFF url(/images/search_bg.gif) no-repeat scroll left top;
...
width:600px;
}

IE6 doesn’t support input[type=”text”] in CSS, so all we see is a short regular HTML text field instead. IE7 does display the background image, however after focusing and clicking on the search field to enter the keywords, the background image is replaced with the one without “Search toilets”, in IE7 it doesn’t disappear, so the search keywords appear on a busy text background:

#search form input[type="text"]:focus {
background:#FFFFFF url(/images/search_bg_focus.gif) no-repeat scroll left top;
}

This can be solved either with the use of CSS classes, rather than selectors or with JavaScript.

Other than this, the small font-size in the listings and a wish to see the links to the sites in the Press & Praise page, I don’t have any more critical remarks about Diaroogle. It is one beautiful site for a rather peculiar project. What do you think?

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?