Colophon

Jekyll Static Site Generator

This site is built using the Jekyll blog-aware static site engine, which allows me to maintain a directory full of .markdown files with all the posts and content, and generate a directory full of static files that can then be hosted anywhere. I highly recommend Jekyll, it’s easy to use (if a bit geeky) and deceptively powerful.

I use several Jekyll plug-ins: - jekyll-pagination - jekyll-redirection - jekyll-tag-cloud

I’ve also created a few of my own, which I may release at some point (mostly around category and tag handling, wordpress import clean-up, and CDN friendliness.)

The entire source tree is available on GitHub so you can take a look at how things are set up for yourself. I’m also documenting the dev and hosting environments, tools and procedures, and roadmap in detail on the jrjblog github wiki.

“Feeling Responsive” Template

The current layout/template is a slightly customized version of Feeling Responsive theme by Phlow (with more customizations on the way.) I chose this theme because it was simple and typography-centric, optimized for performance, and provided the hooks I needed for more advanced customizations. (Once I have a few of my customizations stabilized, I’ll be doing a pull request to offer them back to the original theme creator– especially the specialized post types that I use.)

Hosting

The static pages generated by Jekyll are then hosted in an Amazon S3 container as origin, and served using Amazon’s CloudFront CDN for performance across geographies.

The site’s content was migrated from an old WordPress installation, which itself included posts migrated from a variety of blog platforms dating back to 2002. Hence, the newer the post the more likely it is to match what was originally posted. I’ve tried to pull forward images and other assets, but most of the non-textual content that’s more than 5 years old or so is gone.

Typography

I use Adobe TypeKit for font distribution, and have selected fonts that I enjoy for the site. For headlines I’ve optimized for beauty, and for running text I’ve selected based mostly on readability.

Headlines: Garamond Premier Pro Display

Garamond Premier Pro Display is a fine-tuned version of Adobe Garamond (released in 1989) which was a useful design suited to modern publishing. Slimbach started planning an entirely new interpretation of Garamond’s designs based on the large range of unique sizes he had seen at the Plantin-Moretus, and on the comparable italics cut by Robert Granjon, Garamond’s contemporary. By modeling Garamond Premier Pro on these hand-cut type sizes, Slimbach has retained the varied optical size characteristics and freshness of the original designs, while creating a practical 21st-century type family.

Garamond Premier Pro Display
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0
The quick brown fox jumped over the lazy dog
The five boxing wizards jump quickly.

Body text: JAF FacitWeb (sans serif)

FacitWeb FacitWeb evolved out of Facit, and was redesigned specifically for screen display. Compared to the original design, the x-height was increased and the descenders shortened. The bold version in particular is somewhat lighter and wider – the increased counters aid legibility particularly on screen. All fonts are manually hinted, making FacitWeb a real workhorse and a strong candidate as a more refined replacement of Verdana.

JAF FacitWeb
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0
The quick brown fox jumped over the lazy dog
The five boxing wizards jump quickly.

Code: Adobe Source Code Pro (monospace)

For code (and other monospace usage) I’m using the same typeface I use in my code editor and terminal application on Mac and PC: Adobe Source Code Pro. For monospace fonts, I want a balance of readability and an appropriate differentiation between similar characters, and this does a great job.

Adobe Source Code Pro
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0
The quick brown fox jumped over the lazy dog
The five boxing wizards jump quickly.

Modular Scale

I have been playing a bit with relative sizes and the responsive layouts and scale. The site’s base template, Feeling Responsive, explores the 2:3 perfect fifth modular scale created with [www.modular-scale.com][7]. This is the modular scale of Feeling Responsive which I have made only minor modifications to because it works so well.;

44px @ 1:1.5 – Ideal text size
16px @ 1:1.5 – Important number

Modular Scale      
44.000 1 2.75 338.462
36.000 0.818 2.25 276.923
29.333 0.667 1.833 225.638
24.000 0.545 1.5 184.615
19.555 0.444 1.222 150.423
16.000 0.364 1 123.077