Recently, I made some design changes to this site, updating the WordPress theme I use and changing some typography. Here’s the TL;DR:
- updated the WordPress theme I use, X, to version 3.2
- changed the theme stack to one much more minimal called Icon
- changed the menus to uniform capitalization
- changed the typefaces:
- standardized some of the featured images of the posts
- added a link to my Tumblr to the set of social media icons at the bottom of the page
- made the social media icons a muted grey
- added a very subtle pattern in the background, Cream Dust
I hesitate to call this a redesign. There are no paradigm shifts in this set of changes, mostly a bunch of small tweaks. I debated switching to Ghost as a platform instead of WordPress, and have been experimenting with it on one of my servers. Ultimately, I found it less stable and robust than WordPress, and I don’t think it’s worth switching yet. Maybe in the future, but for now, I’m sticking with WordPress.
I’ve used WordPress for my websites since 2008, and during that time I’ve used dozens of themes, both free and paid. By far the best is X. theonesean.com has used X since the first few weeks of its inception, and I love everything about it. The genesis of this design refresh was the update from version 2 to version 3.2. Theme.co, the developer of X, made a video about the changes in version 3.0 here, so I’ll let that speak for itself. If you have the funds, I would strongly suggest that you use X for your WordPress sites. It’s incredibly versatile, packed with features, and beautifully and thoughtfully designed.
One of the things I love about X is that it contains four “stacks” — themes-within-a-theme, essentially — of varying design and functionality. Originally, I used the “Integrity” stack, which is the default. It’s an elegant, stately theme designed to work for most uses. I liked it when trying it out and didn’t feel the need to change it. However, it makes use of shadow to create dimension, and I’m trying for a more minimal, flat feel.
For the refresh, I chose Icon. The dev describes it as a “minimal design that allows the written word to take center stage.” It’s incredibly flexible, layout and style wise, and I want to be able to customize the design extensively. It also makes good typography incredibly important.
I’m not a designer. I think I have a good eye for design, but I’m a developer at my core. However, I am a total geek about typography. I follow a bunch of typographers on Twitter (Erik Spiekermann and Matthew Butterick coming to mind), and my favorite part of my Creative Cloud membership is definitely Typekit. So, when it came to choosing typefaces for the design refresh, I agonized about it and eventually came up with a list of things I needed:
- I need a heavy sans-serif font for headers to add a modern, sleek flair.
- I need a chunky, but not slab, serif font for display, with an high x-height. Ideally, I wanted to use Expo Serif Pro, but integrating Typekit into this theme would take too much time and energy.
- If at all possible, I’d prefer to use Google Fonts, as it’s already built into X.
- For the logo, my only requirement was that I got rid of the ugly, cliché script font Allura.
These are the fonts I ended up picking:
- for the logo, Arvo: it’s a beautifully designed slab serif that fits with the new design of the website. I’ve used Arvo in a few projects before, and it’s consistently been one of my favorites from among the Google Fonts library.
- for headers, Lato: it’s an humanist sans-serif in both Google Fonts and Typekit. By far my favorite free sans-serif font, it looks good in the heavy weight and large size that I use it for headers as well as at smaller heights for menus and the “Recent Posts” display on the home page.
- for display, Lora: I’ve never used Lora before, but I was reading articles on the best Google Fonts, took a look at it, and it worked extremely well. I especially like the italics, which have such an elegance about them.
In addition to picking great fonts, I wanted to create a reading experience similar to that of Rolling Stone and Medium, which have the best typography on the web currently. I didn’t want an article space cluttered with sidebars and recommended articles, so I got rid of all of that stuff.
Medium’s beautiful typography
I also reduced the line length and upped the font size. As a designer, one of the worst things to do is to have extremely long lines and small text. The display is currently at 18pt, which I think is large but not obnoxious, but I’ve seen up to 28pt. The lines are around 40-60 characters apiece, which is in the sweet spot for readability.
So, that’s about it. This is really the first design for my website that I put a lot of thought and time into. I’m incredibly happy with the result. There’s still things to do: I might try 20pt instead of 18pt for the display, and there are always minutiae to tweak, but for now, I’m going to let it be.