Call it an experiment gone wrong, or an overzealous symphony of clashing font properties; I’ve had more than one person complain that this blog’s text isn’t that readable, and that while the styles are certainly exotic{{1}}, they defeat the point if techni-literary euphoria comes with retinal hemorrhage.
So I made a few adjustments – bigger, slightly dark fonts, replacing Cantarell for the more mundane but readable Arimo, and axing blurry text shadow. I’m lucky that I decided to use the font-size% pattern this time around, since it made adjusting all the sizes trivially easy. The pattern looks like:
[code lang=”html”]
body { font-size: 12px; }
h1 { font-size: 150%; }
p { font-size: 90%; }
[/code]
So changing the base size (I prefer working with px over ems, and the difference is minimal in current browsers as explained here) will resize all the fonts on the page instantly, which was exactly the effect I wanted. Then it’s just a matter of tweaking each element’s new font size and margin/padding for a better fit.
And if it’s still unbearable on the ol’ spectacles, I’ll defer to Readability; the content is what’s important, after all.
[[1]]As one commenter has listed, the “enhancements” included using the Cantarell font, a bright white color for contrast, and a light text-shadow.[[1]]