Monocle, a magazine started by Tyler Brülé (of Wallpaper fame) in early 2007, is comprised of articles ranging from international culture to design, fashion, business, and other related topics. Since its inception, Monocle has received praise for its outstanding design, especially its online presence, The website makes use of an extremely well thought out grid, boasts exquisite typography, and most of all emulates its printed counterpart better than any other publication I know of.

Monocle online uses a six column grid, made most apparent at first glance by the main navigation, which is comprised of five different options: Sections, Programmes, Magazine, Services, and Search. Each menu option spans the length of one column, except for Search, which spans two columns as to include the necessary search bar.

Different types of content throughout the site are easily placed inside the six column grid in various different ways. The front page easily utilizes the grid by displaying various article headlines spanning two columns on the left, leaving room for corresponding photos and illustrations to be placed across the remaining four columns on the right. Specific articles display headlines and bylines across the left two columns as well, leaving the remaining four columns for the body of the article. To really see the grid in action, navigate to the Current Issue section, and you will see each column used for each section of the magazine.

The menu, along with headlines, use an approach many professional web designers usually steer away from: using images to display text. Plantin, a sophisticated serif typeface, is used throughout the print version and despite certain accessiblity problems, is also used throughout Monocle online. The end result is fantastic. I wonder, however, why they did not choose to use something like sIFR to produce the same results typographically. The designers most likely chose to use images as to perfect the kerning of each word, which is not possible with sIFR. The rest of the site is set in Arial, which complements the larger, serif headlines throughout the Site.

To best appreciate the design of the Monocle website, readers should pick up a copy of the printed magazine. The consistency is almost unbelievable. They both use an almost identical grid, use almost identical typography, and use similar colors. It is by far the best online companion to a printed publication available today.


Monocle online has hardly any flaws; it is beautifully designed. The only problem, which could easily be fixed, is the Subscription page. It lacks in elegance what every other page has. The text lacks the line-height used everywhere else, and the bulleted list seems out of place. The submit button, too, seems out of place. It simply doesn’t match anything used throughout the site. I imagine the subscription page is one of the more visited pages on Monocle online, therefore it should certainly look just as beautiful as the less viewed pages. This problem doesn’t seem too difficult to fix, which is why I hope it is updated sometime soon.

I honestly tried my best to find any problems with Monocle online, either typographically, layout, or usability wise, and with the exception of the Subscription page, I can’t find anything to complain about. In fact, I think Monocle is one of the most beautiful and engaging websites on the web.

What do you think?

  1. Henrik Pejer

    One reason not to use Sifr is that it slows down the load time of the page.

    I’d recommend using background images in header-tags and CSS to ‘push’ the text of the header out of sight leaving only the background image (with the same text as the heading of course). This is, of course, cumbersome if you do not let the server, or CMS, handle this for you.

    Those of you using Textpattern might check out zem-ir which does this perfectly.

  2. brad

    A big usability issue is that the navigation on the homepage seems to get overlapped by the flash video below it, although it does not seem to happen consistently.

    Browsing with Fx3 on a mac.

  3. Régis Kuckaertz

    Dan Hill, lead designer for, explains the whole design process and strategy that lead to the current version of the website. Genius!

  4. Leon P

    I like the overall look. The large picture on the home page works really well, and the black/yellow/white colour scheme is distinctive and classy.

    The images as text are a no-no for me: even some of the body text has been rendered as an image. Web typography is more restrictive than print, but that just makes it more of a challenge. Surely something could have been done with, say, Times to render the headings and navbar text. Arial could have been used in the paragraph text by the main image.

    Is that mystery meat top left?

    I thought the stories changed too quickly … I’m not a fan of long drop down menus, especially when the text is so small.

    My other problem is with the grid and colouring. Using six columns means that font sizes are quite small; combine this with a dullish grey on a black background and you’ve got some legibility issues (at least to my old eyes). The page did resize perfectly, though.

  5. Tor Løvskogen Bollingmo

    I don’t see how IR-methods should be a no-no in the interface, would you care to elaborate, Leon? One should not use IR in, say, article-text - since people will want to mark that text.

  6. Leon P

    Hi Tor - presumably you’d want to mark the headings as well? An HTML page is a document rather than an image: using IR fails to recognise this. I guess it just upsets the purist in me. Some of the sites reviewed here do manage to achieve subtle and interesting typography within this constraint.

  7. Tor Løvskogen Bollingmo

    No, not headers, but interface elements like the menu :)

  8. Craig

    I love this site, I need to point out a few things though - Dan Hill is not a designer! - He is a blogger, amature writer, architecture enthusiast, and generally doesn’t come up with any original things himself. This website has been crafted by talented, educated and experienced designers that care. I know Dan and I think he kind of hijacked this project by doing his post-rationalization blog on the site design/structure, which he couldn’t have designed, as the design had already long been in place when he was hired as Broadcast Manager/Director, not as a designer! - was designed by Tyler Brule’s team at Winkreative, full credit to them :)