Photo by Charlie Foster
December 27, 2013

Colophon

By Kevin Hale

Several years ago, I read a piece on The Secret Law of Page Harmony written by the most excellent Alex Charchar. The article alludes to the works of book designer, Jan Tschichold, who did his best to tell the world how to design "the perfect book." It describes a method where the height of the textblock is equal to the width of the page by using a 9×9 grid, with the textblock 1/9 from the top and inside, and 2/9 from the outside and bottom. That article basically jimmied my skull open and threw in what has turned out to be a very time consuming question: Could I implement Tschichold's ideas as a website?

Demo of Responsive Styles
Screencast showing how a block of HTML is automatically converted into a book layout design responsively.

I love books. The feel, smell and nostalgia of my three favorite things coming together--paper, glue and ink--delight me to no end. The challenge of taking a block of HTML text and wrestling it to look like a book that automatically conforms to Tschichold's Golden Canon Fig 1. felt like the perfect starting point for the design of a personal website.

The beauty of the textblock begins to soar through its position, size and the relationship it holds with the page upon which it rests. Not only does the (Tschichold) canon and its rules lead the textblock to having the same ratio of the page, but it also positions it in perfectly whole units.

The Secret Law of Page Harmony

After many iterations explored over several winter breaks, you have before you the first version of my answer. No doubt, I'll continue to tweak it, but it feels robust enough to start writing on its foundation. Because the site is responsive, you'll only see the effect if your browser's dimensions are large enough. Greater than 1024px2. In my opinion, the site is most glorious on large monitors.

Tschichold’s Golden Canon
Tschichold’s Golden Canon. Diagram by retinart.

For those of you who find an exercise like this ludicrous and impractically old school, I hear you. Let me be the first one to tell you that Tschichold's ideas have not culminated in the "perfect website." This is definitely an example of form over function, fo' sho'. I can live with that and I hope you'll at least appreciate it for what it is--a fun experiment. For something more traditional, you can resize your browser to less than 775px in height or less than 480px in width. If you really hate it, you can disable JavaScript on your browser and that will activate the nofun.css stylesheet. :P

The hardest part was accommodating the permutations of design and typographical edge cases I thought I might use throughout the site. The book binding script I wrote to make the magic happen can incorporate figures, tables, sidenotes, endnotes, lists and even code snippets without too much awkwardness.

More importantly, I've done my best to elevate these elements with proper web semantics and added functionality that I think only HTML, CSS and JavaScript can bring to the party. Endnote references are a decent example. 1. I've also tried to balance these "enhancements" with the modernist ideals for text treatment that I've learned from Tschichold, Dwiggins, Bringhurst, Lupton and Tufte.

Typography

The font I use on the site is New Caledonia. It's new because it is the digital version of the 1938 classic Caledonia typeface Fig 2. designed by my second favorite book designer, William Addison Dwiggins. 2. I license the web font version of New Caledonia from Fonts.com, because they let me host it locally.

There was a time after World War II when it was hard to find any magazine in the United States that was not set in New Caledonia. Just as Times New Roman was the most used Monotype text face, Caledonia was the staple of Linotype users.

Microsoft Typography : New Caledonia

I love this typeface because it's secretly popular. According to Wikipedia, Caledonia ranks with Times New Roman as one of the most used book text faces. Some of my favorite science books as a kid were owned by my grandfather and they were set in Caledonia.

Caledonia Typeface Specimen
Caledonia Typeface Specimen. Wikipedia.

Unfortunately, Caledonia was not the font that was brought over to the Mac and Windows operating systems when word processing was in its heyday. This is why I call it secretly popular. Bibliophiles easily recognize it, even if they can't recall it by name. A nostalgic font for a nostalgic design. Made sense to me.

For the sidenotes, I wanted to use the italic variant of New Caledonia, but legibility concerns lead me to use good ol' Helvetica Neue instead. The san-serif is also used for the figure and endnote reference links.

Concerning the text layout, I did my best to follow the rules laid down in The Form of the Book and The Elements of Typographic Style. You'll also find some influences from the latest edition of the Chicago Manual of Style. The body copy is probably too small and because of the constraints I laid for myself, I missed an opportunity to implement proportions to achieve Golden Ratio Typography.

Automating all the little things that book designers consciously do for their texts was tricky and, ultimately, not perfect. For improved ampersands, quotes, dashes, ellipses and the prevention of widonts, I pair up Typogr.js with Smartypants on my Redcarpet markdown implementation.

Where I've had to compromise the most is on establishing a sound vertical rhythm. kerning. It's always been an issue on the web and while I am aware of the excellent Kerning.js, the idea of manually kerning every single post did not seem like a low maintenance affair. This is also the result of writing a script that will never be as smart as a professional book designer using Adobe InDesign. and wanting things like being able to dynamically handle images with as little effort as possible.

Hyphenations

Full justification can only be done properly with the help of hyphenation. To do it without, is to do something awful. It's why most designers on the web just left justify paragraphs and call it a day. Most books, however, are full justified and so I would be damned if the body copy on this site wasn't going to be flush left and flush right.

p, aside, figcaption, caption, cite{
  -webkit-hyphens:auto;
  -moz-hyphens:auto;
  -ms-hyphens:auto;
  hyphens:auto;
}

Ideally, I would just use CSS, throw in some hyphens:auto; and be done with it, but browser support is piss poor. This is where Hyphenator.js saves the day. It's pretty fast and deliciously powerful. I don't really understand why more online publications don't use it. They're probably scared of the JS size. 33kb gzipped I think it's totally worth it.

Nitty Gritty

I use Middleman to statically generate and deploy this web site to a Rackspace Cloud instance. I like using Middleman because it lets me work the way my brain wants to work. It lets me use Slim for templating, SASS for CSS, and CoffeeScript when I need it. It makes modern asset handling a breeze by including extensions for Uglifier, ImageOptim, asset hashing and custom deployment scripts. Plus, I love not having to deal with a fucking database. j/k. 3.

It's also very easy to develop locally with Middleman thanks to a built in web server and LiveReload support. As far as desktop software goes, I use Sublime Text for writing code, Gitbox for committing code, Kaleidoscope for comparing diffs, Hues for color picking, and Safari's Web Inspector for figuring out where I've gone wrong.

The only reason I don't use something like Github Pages or S3 to host the content is because I wanted to learn more server stuff. Cloudkick had some of the best docs I ever read for setting up servers from scratch and since they were acquired by Rackspace, I decided to go where the good documentation went. The CDN is powered by Amazon's CloudFront, which is completely unnecessary for a site this size. Speeeeed!

JavaScript

I've written a few scripts to handle moving between figures and endnote references, lightboxing the images and code snippets, and putting fancy pants on the contact form. I also made some styles for creating this x-ray effect when you resize the browser that I thought would improve responsive rendering performance by hiding the images, but just ended up looking cool. I know, story of this web site.

For syntax highlighting, I use a custom build of Highlight.js with the Solarized color palette. Fig 3. I did try using Pygments, but I never could get it to work exactly the way I wanted in regards to the markup it generated. I think I gave up too easily. I might try again later.

Solarized Color Palette
Solarized Color Palette by Ethan Schoonover.

As far as what actually converts and breaks up the block of HTML text to look and flow like a book:

  • 15% of it is the CSS I wrote to approximate Tschichold's Golden Canon and intelligently handle cross page styles like paragraph indenting, split list items and headline spacing.

  • 25% of it is based on a Columnizer jQuery plugin by Adam Wulf that I heavily modified for my own nefarious purposes.

  • 60% is a fairly ghetto script I cobbled together to make them all dance.

And for those of you wondering, don't worry. Once I feel comfortable with the stability of it all and get some time to document everything, I'll package it all up and upload it to Github so everyone can make fun of me. :) Seriously, though, I very much want to open source as much as I can, because 1.) JavaScript is not my forte and 2.) I know there are people who can improve on what I've done and I would really love to see what you guys do with it.

Contact Form

It should be no surprise that the Dispatch page is powered by Wufoo. I use the external post capabilities so I can use my own form markup on the site. The label interaction you see as you type was inspired by Brad Frost's float label pattern. Jury is still out on whether I think that's actually useful on such a small form. Since I'll probably forgo implementing a commenting system on the site, please do use it to say, "heyhayhay."

Notes

This is the way I've always wanted endnotes / footnotes to work. They should easily, gracefully and obviously take you to the writer's tangent and quickly guide you back. Also, as much as I loved Gruber's thoughts on his footnotes, I've always felt the return arrow should be pointing towards the original reference, which, on most web sites, is up.

The first is Jan Tschichold, silly.

Not really.