I have yet to see a more thoroughly literary-looking website than theparisreview.org. (Sure, nytimes.com is literary, but it’s also newsy and crowded. Yes, newyorker.com is literary, but it’s also quirky in a special way.)
Just look, and you’ll see what I mean. Here’s an article in The Paris Review:
The page is white, and the text is black, except when it’s blue and gray. These choices are made exceptionally well. Notice that everything not-so-critical is in pale gray: the social icons at the top of the page and to the right of the article, the “last/next article” toggle, the pub dates, the copy in the footer. The blue is subdued enough to be eye-catching yet not eye-snatching. The sidebar area shows the tasteful color handling in a tiny space:
The asymmetrical grid layout is an elegant solution for reading. There is generous white space. The tabs of the menu bar neatly align with the area for the main copy. The main copy is all on the left-portion of the page, with a narrow margin, but still comfortable enough for reading—we don’t need to have room for our thumbs holding up a sheet of paper here, after all.
And when you scroll, the header menu morphs into a condensed bar resting on top. (The transition is sudden, though, unlike the smooth zooming of The New Yorker‘s site.) You can see it where I’ve scrolled midway down in this portion of the site that links to previous issues. Notice the very subtle gray issue date that appears when you hover over a cover (I’m over Winter 1989, below).
The hairline rules that sandwich the menu items are the same width apart as the rules sandwiching the article details (byline, date, and subject category) and the sidebar categories. It annoys me a little that the rules in the menu are broken to separate the types of menu items. I think I’d prefer tiny dots or vertical bars to separate the types, with unbroken rules. But I think the broken-line-technique works very well in this other context, with the two columns of info about these interviews. Maybe I think it looks more fitting here because all of the text is obviously left-aligned, unlike the menu items:
And the overall typography is so very easy on the eyes. When you hover over the menu items, they turn blue and italic. (What’s the UX term for this type of helpful confirmation?) The main text is in Garamond Premiere Pro (they use oldstyle numbers in the copy—classy!—and look at the Q’s…it’s daring to have such swashy tails in body copy, but there’s enough leading to allow this), and the sans serif is Proxima Nova Condensed. Garamond is scholarly, with a long history in body copy. Proxima Nova Condensed is clean, strong, and unobtrusive; it makes a good complement.
Classy, nuanced, literary design…for an elegant and smart publication. Explore and read.