I picked the fspring WordPress theme by Fredrik Fahlstad for its beauty, not its function. The two main problems I’ve discovered so far with this theme are (1) it’s not very legible, especially on a Mac or for readers without super-sharp vision and (2) the font size is set to an absolute pixel value. So I’ve made a few changes that don’t compromise the look too much but offer better reading for users.
To make the article bodies more readable, I did this:
- Changed from justified text to left-aligned. Though justified text might look good from a strictly visual perspective, it’s very hard to read. Your eye has to jump over irregular spaces and it’s harder to remember where you are vertically, because every line looks the same.
- Darkened the body text color. I went from a medium-dark gray (#666666) to a dark, almost black gray (#333333). This is especially important for readers using Macs. Macs do gamma correction to fix the brightness of an image to make it as realistic as possible, but PCs generally don’t. The result is that text that looks fine on a PC may be too light on a Mac. I knew this intellectually before using a Mac myself, but didn’t realize what a vast difference exists between the two platforms until I saw it.
- Upped the font size by 1px from 11px to 12px. Not much of a change, but just a stopgap until I address the bigger problem…
Absolute Pixel Sizes Can’t Be Resized in Internet Explorer
I consulted Bulletproof Web Design by Dan Cederholm because I remembered that there was a browser that wouldn’t allow text sized in pixels to be resized by the user. Oh, which browser could it be? Perhaps Internet Explorer for Windows? Yes. If you use pixels to specify font size, then your users can’t resize it. If you decide you want something pretty and smallish, say 11 pixels, then your readers are stuck with that. This is unacceptable, I think. Though most users probably never change the text size setting in their browsers, there will be some for whom this is an absolute necessity. Cederholm’s bulletproof approach calls for setting the body text size to some keyword such as “small” and then using percentage values for headings, captions, and other styles relative to the body text.
According to Cederholm, even after using his strategy you still need to correct for two issues. First, Netscape 4.x tends to display very small text. If you are still catering to users with that browser, Cederholm suggests you consult this article on A List Apart. Second, IE5 for Windows displays keyword-sized text a size larger than the other standards-compliant browsers. You can use Edwardson Tan’s Simplified Box Model Hack to get around that.
Tips
- You can make your Mac display look like a PC with respect to gamma correction by going to System Preferences > Displays > Color > Calibrate.
- Want to see what your web pages will look like on a different browser and/or platform, but don’t want to (or can’t) set up the other platform yourself? The BrowserCam service will take screenshots of the pages you submit, for a pretty price. If you just want to see it in Safari, check out Dan Vine’s iCapture site.
