On a New Design.
The redesign of this blog held one idea as a goal: to highlight and emphasize the content. Everything else is stripped away.
The header and footer are a lighter color until hovered over. The sidebar is revealed with a click of the mouse. The content is given plenty of room to breathe.
I am concerned that some parts are too light. The footnotes, for example, are both small and light, making them a little difficult to read.1 We’ll see how it goes. Otherwise, I like the stark, simple look.
The typeface is Adobe Garamond Pro from Typekit. I’ve wanted to try Typekit for a while,2 but never really had the opportunity. Using a font service like Typekit is the only way to get a EULA restricted font on a website.3 For other projects, I’ve leaned towards using open licensed fonts, hosted with the site for performance, but I love the usability and integration of Typekit. And I love the fact that they are always working to better optimize their fonts for the variety of contexts the font will encounter. Writing as expression and documentation has historic roots and Garamond nods respectfully towards that idea.4
The design is responsive,5, which is, in my opinion, a best practice in web design.
As you can see no images are used in the design, but rather typographic decoration like the drop cap and small caps give it texture. The sidebar icon, the closest thing to an image, is made with pure CSS.6
I’m sure I’ll make adjustments,7 but I’m happy with it, and I’m okay leaving it a little rough around the edges. Those edges will get smoothed out over time.
- UPDATE: Footnote font has been changed to PT Sans Caption for better legibility. ↩
- Though, less so now that they’ve been bought by Adobe. ↩
- Besides something like cufon or sIFR. But the web is happily moving away from needing such heavy-handed solutions. ↩
- I originally wanted to use Adobe Caslon Pro, but it wasn’t in the “trial” Typekit plan. ↩
- Responsive Web Design is a relatively new approach combining flexible grids, adaptive images, and media queries to achieve a design that works across multiple screen sizes. ↩
- Internet Explorer 8 and lower renders the circle as a square and doesn’t give the rotating animation. Their loss. ↩
- and dearly needed improvements ↩