How far can you push a single typeface? What can you produce without a single graphic? Coudal has managed to to create a beautiful one page site that accomplishes both aforementioned feats. It’s like Swiss typography, with Times.
The mention of the typeface puts a grimace on the face of most designers, and rightfully so. Times, as the default typeface on Windows 95 through XP, and Microsoft Word, has become associated with the mass production of paperwork produced by non-designers. One could argue that it is probably more well known by non-designers than Helvetica. Yet somehow, when twisted and shaped through all its variant fonts, you completely forget that what you’re viewing is such a nondescript typeface.
Bold, italic, small-caps, uppercase, title case, they’re all present. Rag right, justified, centered, they’re all there as well. What makes this site beautiful is the color that all of this seemingly anarchic recipe creates. If you’re unfamiliar with color in the typographical sense, it doesn’t refer to the hex color, but rather the visual weight created by the positive and negative space of the blocks of type as a whole. You can see it better perhaps if you squint.
trust in the details
Going beyond the big picture if you pay careful attention to each sentence you’ll find visual interest created in the mixing of fonts is enjoyable down to single phrases. I particularly like the contrasting oblique articles in the phrase Reception on the lawn of Crown Hall.
…reminds me of a print ad you might see somewhere.
You’ll also notice that the site is wide enough for the justified type to be relatively safe from rivers within it. This also works beautifully to help give the page it’s shape, which reminds me of a print ad you might see somewhere.
A small detail in the markup intrigued me, rather than use the standard CSS method of
font-variant: small-caps;, the small-caps are accomplished by using a span around them and lowering the size of the font to 88%. This creates a more flexible small-cap that can be sized appropriately for optimal appearance and leave nothing up to the browser. Granted they are not true small-caps, but rather just smaller capitals. However, the CSS method performs in the same way with less cross browser assurance.
It’s a design that’s hard to criticize. The one thing that I was disappointed by were the hover colors on the links. The light gray didn’t quite feel right to me, perhaps a darker, richer shade of the rust color used on the normal state.
However, the markup could use some attention, line breaks are created with
<div class="break" /> and there isn’t a single heading tag to be found. Some polish here could help with SEO for the conference, as well as making the site more accessible to the impaired.
But those are my thoughts, what are yours?Want more? Check out the archives for previous reviews, and don’t forget to subscribe for future reviews, posted weekly.