So about this design, I’ve always loved looking through magazines because there’s something fascinating about print media in an age when there are so many who feel it’s obsolete. I’ve also thought a lot of blogs in terms of their periodical publication being just like a magazine. Some even take the form of a book, which is the direction I took with this theme.

Last summer after I completed the “CSS Reboot](http://cssreboot.com, I became quickly disillusioned with the blogosphere after seeing so many beautiful blogs being rated 2 stars or less and some really graphically appealing but otherwise barely standards-compliant being rated 4 and up. I realized no matter how stunning my site could potentially be, none of it really mattered. All that mattered was that I do my best with what I have and I don’t concern myself with what others think of my blog.

So I started a new design, this one focused more on what I want from my blog instead of what would please critics. However, I got busy and couldn’t complete the design to my liking and kept putting it off. It took a few different forms behind the scenes but I never felt it was good enough. After I found the right shade of blue, it just felt right, but there was still some tweaking to do.

Typography Choices

First, there was the typography. My original versions used a Georgia/Arial combo which was decent but well overdone. So, knowing I wanted a readable serif, I set went through my serifs. Pictured here, you’ll see the following:

• Adobe Caslon Pro
• Century
• Lucida Bright
• Adobe Garamond Pro
• Minion Pro
• Georgia
• Times New Roman

Before going on, why don’t you see if you can tell (without source peeking) which types I used (of course yours may look different if you don’t have the font I used).

!/images/45.jpg)

I’m no expert in typography and may be wrong in going about this in this way, but being an extremely visual person, I go with what my eyes feel most comfortable with. For reading, I chose Lucida Bright for the body text for its squared off edges and over all blocked shape to the letters which make it more easily read compared to typical serifs with their rounded, flipping ends.

!/images/46.jpg)

For titles, since they’re much bigger, the more delicate, feminine curves on Adobe Caslon Pro just almost right. There were a few places where I wanted to see a more blocked, symmetrical look but didn’t want to use Lucida Bright, so capitalizing did the trick. You’ll see the uppercase Adobe Caslon Pro in the side headers and main menu.

Table of Contents

Going with a book/magazine theme, a numerical menu made sense, but it also helps when styles are turned off, for those who are reading the site in its raw form. I could be off there too, but I find it easier to skim an ordered list than unordered, and much better than no list at all.

My inspiration came from “Cameron Moll](http://cameronmoll.com/ and his fictitious “Tuscany Resort](http://tuscany.cssmastery.com/. When I saw that I wondered why other people weren’t making use of the upper-roman option for list styles, but then I found that Cameron didn’t even use this, probably because of the right-positioning of the numbers. For my purposes, though, the plain ordered list worked fine (with some spans to get the links and dotted lines to work). For the categories it’s the same, but with regular numbers.

Icons

For a long time I’ve been looking longingly at the “Icon Buffet](http://www.iconbuffet.com/ icons called Oslo. There’s a small set for $5 and then the “blog/CMS icons](http://www.iconbuffet.com/categories/blog for $79. I bought the cheap ones first and I loved them, but the more I looked at the blog icons the more I could see using them for many blog projects I work on. They’re clean and classy (you know how I love that), but they have a sort of web2.0 feel that’s not totally shiny and tacky the way I see a lot of web2.0 labeled things today.

Minimal Images

Another thing I try to do in designing is to use as few images as possible, or at least very small images. If you have the “developer toolbar](http://chrispederick.com/work/webdeveloper/ for firefox, you can click Images –> View Image Information and you’ll see about 7kb total and I think my default gravatar image is the largest in size. I’m a big believer in minimalism for myself, though I have done some “bigger” graphical designs for others. It just makes things easier the fewer the “baggage” your site has to carry, and images are baggage most of the time.