This is it, then. A total redesign—that thing I had insisted I would never do.

My motivation? Basically, I’ve spent about nine months trying to get justified text to look good on the Web (mainly by adjusting the word-spacing, line-height and sometimes letter-spacing properties) and I have totally failed. As the old layout was basically designed around the single column of justified text, my only real option was a total redesign—the old site looked completely wrong with left-aligned type.

The other motivation was this new Internet thing called HTML5. While the old design had already been updated to use the new semantic elements, the HTML5 Outliner may as well have looked at me and said, “David, you are a complete idiot for even taking such a stupidly simplistic view of semantication. Go and sit in a hole.” Needless to say I took far too simple a view of how HTML5’s semantic elements work: they are incredibly complex but make a fantastic way for machines to determine the structure of a webpage. Finally, I think I’m almost there with a fully-semantic website—though there are clearly still areas where I am bound to my old XHTML1/Transitional ways of working.

The change to Helvetica was a no-brainer. It’s one of my favourite all-time fonts, obviously, (as is Gill Sans) but I was dissatisfied with Gill Sans because the bold weight included with OS X is way, way too heavy for my tastes. Gill Sans MT included with Windows doesn’t seem to have this problem, which is weird. No doubt I’ll one day load up this site on a Windows box, retch at Arial and decide to switch to something else.

The other interesting font choice is the new monospaced font, Inconsolata, recommended to me by Dan Benjamin. I wanted to roughly match the x-height of my body font with the monospaced font. My favourite programming font is Monaco,¹ which only really works well without anti-aliasing. Taking Monaco past 10pt to achieve a matching x-height ruined its look altogether. Inconsolata is designed for this sort of thing, so I linked it with an @font-face declaration and was done with it.

Things I Like

• Paragraphs. The new CSS3 x + y selector lets me properly indent paragraphs automatically, without applying indentation to the first paragraphs immediately following headers.
• Link Posts. Setting their headers inline reduces their prominence and calls them out as something completely different from the main articles.
• The headers of articles. Again, they are totally different from links. Setting them centered was inspired when a saw a copy of the Inverness Press and Journal whose practice is to set all headlines centered.
• The overall width of the page. The old design had a 550-pixel—-wide text column but because of the sidenotes, navigation and timestamps, the viewport had to be about 800 pixels wide to avoid horizontal scrolling.

Things I Don’t Like and/or Aren’t Done Yet

• Timestamps. Coming soon.
• The overall page header. Spacing is all wrong. Soon to be rectified.
• Marginal notes. I wanted to set them at 8pt but I couldn’t get the baselines to line up with the main body text. In the end I set them at 10pt Light weight and was done with it. I’ll sort them out some day.
• Basically, everything still needs a little polish to get it shiny.
• Someday I’ll get round to implementing syntax highlighting in my code blocks. (probably with JavaScript)
• Not all lines seem to have the same leading, depending on what’s on them. This is one of those annoying things about CSS which never fails to get me worked up, but I’ll sort it on a case-by-case basis over time.