seed conference

seed conference

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.

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.

font-variant

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.

criticism

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?

  1. Kevin Zak

    It’s a fairly bland page, to be perfectly honest. The rust colored text is used so sparingly that I barely noticed it at first glance. In terms of typography, it does a very thorough job of representing the text, and the technique of differentiating sizes, styles, and capitalization makes for an interesting effect.

    That being said, it is not intended to be a very exciting page. It is meant to be informative, and in terms of representing information, it does so superbly. Then again, I would expect no less from Coudal.

    While the type and the effects thereof are well portrayed, I feel the information itself could have been better displayed. Nothing really grabs my attention nor does it direct my eye. An interesting border or a splash of color could really improve the page.

    It accomplishes what it sets out to do and does so while maintaining a very precise typographical hierarchy. I must say, I wish I had the money to attend the conference. Alas, thus is the downfall of being a poor high school student.

  2. coudal

    Thanks for the nice review. One quick note. I didn’t use any automated justification. I broke each line by hand. In general I find that “text-align: justify” does an unattractive job of the task. So there was quite a bit of rewriting the copy to fit the line lengths. Sometimes it helps to be the writer and the art director on a project. And um, yeah, I should have done a better job with the headers etc…

  3. elyse

    I saw this site a while back, and it’s beautiful. It’s awesome to see something as “generic” as Times used in this way. I also love the p class names - eyebrow! Cute. I’d like to see em’s instead of i tags for the italics, and some better hierarchy when the CSS is off. It still works just fine though. Awesome design - really creative!

  4. Jeff

    I’ve been a fan of Coudal for some time and have always admired the use of Times in their design. Even in their “About” page, they make note to emphasize their use of the font — Like it was a challenge they had set for themselves.

    A sound design here, more the most part. The “and” in “Much DISCUSSION and INTERACTION” annoys me a bit, and I’d like to see a little color in the topmost headlines. I love the 3 column look and the type modifications noted within your article.

    Wish I could attend the Seed Conference …

  5. Adrian L

    While I think the type is lovely, and while I have some very serious respect for the amount of work it would take to hand-break text the way it is, I just found the leading too tight. It felt oppressive, closed in.

    Nonetheless, and markup comments aside, I think it looks great.

  6. johno

    It is very well done. I’m not usually a fan of Tines for the screen (and still not for extended text on screen), but on this site it works, and works very well.

    The span is a great idea. It’s something that can be easily achieved with the typogrify plugin. They’ll always be ersatz small caps, but depending on the % size one uses, they’ll generally look better.

    Great review of a beautiful web site.

  7. Leon P

    It’s a print poster put on the screen: interesting to look at with some lovely typographical details, but it doesn’t work (for me) as a screen text. Too much information, measure too wide. It’s structured extremely poorly: no headings! It’s very visual rather than semantic.

    The details are well worth looking at, though, as they can be adapted for use in other sites. And this is very creative for a text-only site.

    I still don’t think Times works as body copy (I altered the paragraphs to Georgia using the Firefox Stylish extension, and they’re far more readable. Actually, changing the paragraphs changes everything - what’s wrong with using headings?), but at larger font sizes it’s very elegant. Having said that, most fonts - especially serif fonts - look good at large sizes.

    A good example of how print is different from the screen?

  8. Mikael

    I love it! As an old school graphic designer who got thought a lot about typography I think a lot of people uses to much fancy graphics when they dont need to. The one page website is a great way to use a font. I wish I had a blog page that did that! Its good to see that people are using more and more minimalistic blogs and is not afraid of the empty space on their website :)

    just my 2 san-serif cents

  9. Herr Klaus

    I agree totally on the overall look and the strict times-only policy - lovley! But then again, there’s some details that can’t seem to keep up with the overall beauty: Some headlines seem rather crammed (Learn about …). For me, this way of creating small caps creates the same problem as the false small-caps do in print. And while the justified paragraph after “discussion and interaction” works really nicely, the last one (“various details”) seems to be just a little off, especially on the left.
    There’s plenty of great detail in the site, of course, and so it leaves me wondering if it’s maybe times that is not the right typeface after all …

  10. Kevin Cannon

    One thing I noticed about this site is how radically different it appears on different systems.

    In Safari and/or OSX with it’s anti-aliasing technique it looks beautiful. On a standards Windows XP which only applies minimal anti-aliasing it looks awful. With anti-aliasing turn off completely it looks amateurish. With IE7 or with clear-type turned on it looks somewhere in between.

    Seems like it was designed on a Mac, and while it looks beautiful on that platform, I think it would’ve been much better had the focus been on what most visitors will be using.

  11. K. Smith

    Really great article, love the site. And the template is really nice - is this designed just for this site or is it a template you bought. I’m looking for a good one for one of my blogs (I have several).

  12. Kyle Meyer

    @K. Smith The template here was designed only for typesites.com, sorry!

  13. Dan C

    The hand justification, while a nice idea, falls down completely on Linux where the Times used differs quite a lot in spacing from whatever version of Times is installed on Macs. Instead all the full-width paras appear centred, which gives a very bizarre appearance. (Does it even appear properly justified on WIndows?)

    I think this is another good example of how designing for the web with a print mentality is not a good idea ..