Notes on the design of Nabokov’s Butterflies and blogs
Matthew Butterick:
Instead, let’s infuse the web with visual ideas from elsewhere. Books. Posters. Art. Software. Other designed objects. Of this era. Of earlier eras. It’s all fair game. If you like stealing the ideas of others, great! Steal from better sources. (That’s the secret to whatever success I have, certainly.) Anything but another hamburger button. Websites – Step outside the cargo cult
I thought I’d take a look at another medium – namely, book design – and see how it might influence the typography and layout of a blog. The best designed book I own is probably Nabokov’s Butterflies.
Nabokov’s Butterflies. A striking image, beautiful palette and mix of typefaces and fonts.
The contents page uses small caps for section titles and is centred.
Section titles are centred and have a rule beneath them. The font size is relatively large but the weight is only slightly heavier than the body text.
The book title appears on every left hand page, next to the page number, set in small caps. Note each line numbers 11-14 words and has a generous height.
The section title appears on every right hand page and is italicised. This is book navigation, perhaps suggesting a website breadcrumb. Also note the outer margin is wider than the inner, and the page heading is further from the section title than the section title is from the top of the page.
Blockquotes have a small left margin, smaller font size but the same line height as the rest of the text. All text is justified – you get far more control of spacing and hyphenation in print (although note that some words are broken at just two letters). Besides, I like ragged right text.
Notes look relatively messy – lots of parentheses, italics and short sentences and paragraphs.
Images are the same width as the text or laid out in a grid, while the caption is pulled into the outer margin. Like blockquotes, captions are set in a smaller size but retain the same line height as the rest of the text.
Subheadings have generous vertical margins. The top margin is bigger than the bottom margin. Secondary text is smaller than main body text, but the same colour.
Observations
The typography itself is minimalist – one typeface, two weights and a small range of sizes. White space is used efficiently – the text doesn’t feel cramped, but there aren’t huge spaces between page elements.
I could (and indeed have) used titles that appear at the top of every page to influence this site’s navigation, although not making all the top level pages available in the menu is probably fairly annoying for users. Or maybe they don’t care – they read a post, perhaps scan the home page and move on. I like the small caps/italic combination.
Decoration is saved for the cover. I’d love to i) be able to create these kind of illustrations ii) find a use for the red/blue/black palette and iii) write content that fitted such a beautiful design. There’s probably some work that could be done on the home page, but I’ve plumped for a fairly simple table of contents.
A serif feels right, mainly because of the italics it offers, but that’s not to say you couldn’t use a sans. In fact, my second most glamorous book does use a sans.
- Written byLeon Paternoster
Previous post Integrating the Nord colour scheme into a Jekyll site using custom properties
Next post Setting responsive font sizes in CSS