the design of void a.e.

I'd like to take a few moments to detail the design of my website for everyone who is as much of a design and typography nerd as myself. Also since it makes for an easy obligatory first blog post.

The site design is motivated by what I want in a website, personally, which is for it to get out of my way. The content should be up front and center. So, when designing my website, I had two goals in mind: one, simplicity first and above all; and two, the final design had to be excellent for both reading blog posts (sometimes with code snippets), and viewing high-resolution photography in a distraction-free environment.

First things first, the website layout is based off of the Wells template, the demo for which you can find here. Squarespace has donzens of good alterantives, any one of which I might have chosen (it seems like, as of early 2017, the trends in website design continue to become ever simpler -- Native comes to mind for begin equally simplistic as Wells). However, the deciding factor was the ability to fix the title and navgation positions on the left-hand column, which seems to be a rarity among other templates. What can I say? I like fixed a navigation bar.

There are two fonts employed. All titles, navigation, and headers are set in 400 weight, 20pt Neuzeit Grotesk with 0.2em letter spacing and varyying line height from 1.2em to 1.4em. All content is set in 400 weight, 12pt Anonymous Pro with no letter spacing and a line height of 1.8em to allow the relatively tall characters sufficent room to breathe. I chose Neuzeit Grotesk for its clarity and ability to hold a decently large letter spacing when text is formatted as all-uppercase (a consistent theme for all of the titles and navigation on the site), and Anonymous Pro because it's an excellent monospace serif good for displaying both normal text and code snippets (it also happens to be my font of choice on the command line and in my text editor, so I may have been baised in my choice). I very nearly chose Inconsolata for my content copy, another excellent monospace font for both text and programming, but decided against it since the font lacks support for italics.

I also can't help but love a black-and-white theme, so I picked out three shades to work with: 0%, 30%, and 60% luminosity gray, corresponding to pure black, dark gray, and light gray respectively. All titles, headers, and metadata are set in pure black, with the exception of the site subtitle as dark gray. Navigation is set in dark gray with active navigation in pure black and with light gray on hover. Mirroring this, text is set in dark grey, while links are in pure black with light gray on hover.