Starting to feel right
Sat down tonight for an hour, by the glow of my freshly cut Christmas tree, and made a handful of extremely subtle adjustments to the Nice Web Type redesign that feel to me like they’ve made a big difference. Here’s what I did. You can toggle between these before and after screenshots if you like.
Black text, rather than gray
For as long as I can remember, I’ve used an off-black color for text to decrease the contrast and make the type look a bit more smooth. For some reason, I wasn’t feeling it this time. Maybe it’s the typeface (Scala Sans), which feels more slender than others I’ve used on the web. Switching to black text really strengthened it, made it easier to read.
Green links, rather than a mix of red and gray
I wanted to bring another color into this mix. Going beyond monochromatic schemes is tough for me, so I almost always use a tool to help me find colors that look nice together. Tonight I used Adobe’s Kuler web app, and plugged in the header area rust color as my base. Then I tried a variety of colors for link text, most of which felt either too vibrant or the opposite — not bright enough to stand out in a block of black text. Ended up going with this green, which is a nice tonal match for the rust. It’s funny, I never would have paired red and green like this unless I had tried colors this tool suggested.
Oh, and I decided to make this the color for all links at the moment because it felt like an important thing to do. I guess this is an example of art direction over time. Because the layout is so spare, the complexity of multiple text colors really felt confusing.
Larger bookmark titles
Bumped up the font-size on bookmark headers. This change was so weird! Before, when titles were the same size as bookmark text (both 14px), it felt like the titles were too small. I couldn’t believe it. Like an optical illusion or something. It really felt like they were almost smaller than the bookmark descriptions. Between bumping the titles up in size (to 16px), making them green, and the next change I’ll mention (below, about margins) they seem to fit much better.
Adjusted several margins
Now there’s less room (about 3px less) between bookmark titles and descriptions, and more room above post titles (1.416em instead of 1em). I think the vertical rhythm among bookmarks feels right, and the same goes for the space above full posts. I’m not as happy (nor have I paid attention to) the space below full posts. And depending on the amount of metadata I want to add to full posts (and possibly bookmarks), these spatial relationships might change.
Added 20px more width in the gutter
Whereas before there was only 14px of space to the right of the about text, there is now ~36px. Brought the overall layout to slightly above 960, but that’s okay. We’ll flex down later responsively.
