I'm all about readable fonts, though mikeyanderson is going a bit overboard in the <i>too big</i> direction.<p>He's also committing the fatal sin of mixing ems (for his h1 title font size) and px (for his h1 line height). The result is overlapping characters: <a href="http://i.imgur.com/tEplJmv.png" rel="nofollow">http://i.imgur.com/tEplJmv.png</a><p>I've griped on HN (and elsewhere) more than once about small fonts, low contrast (<a href="http://www.contrastrebellion.com/" rel="nofollow">http://www.contrastrebellion.com/</a> can't get enough good words from me), and the reading-friendly tools such as Readability.com (despite some recent updates I'm not entirely happy with), InstaPaper, Pocket, etc. The latter are a great way to avoid this pain with minimal effort, and "read now" bookmarklets make this pretty near instant for most users. The styles presented by any of these services would do well as a default for virtually all content-rich sites.<p>I also have become all but obsessive in restyling sites whose CSS fails me. Which is to say, most of them (including Hacker News: <a href="http://stylebot.me/styles/2945" rel="nofollow">http://stylebot.me/styles/2945</a>). Using the Stylebot Chrome plugin, I've created, as of this writing, 819 stylesheets (some applied to multiple sites, some the same basic "unstyled.css" sometimes lightly modified). I think I've reached the point where I can make some fairly definitive statements, at least as far as UI/UX goes:<p>⚫ Use ems. Do not use px (graphics positioning excepted). <i>NEVER</i> mix ems and px.<p>⚫ Provide a high contrast between foreground and background. No, you're not limited to black on white (though it's a safe choice). Brad Frost's website illustrates a styled but very clear example (and it's what he does): <a href="http://bradfrostweb.com/" rel="nofollow">http://bradfrostweb.com/</a> (It's also a beautifully fluid site).<p>⚫ While we're talking about contrast: take your "but black on white is too much contrast" talk and bin it. The guidance for brown type on an off-white page is for paper. Which is a reflective medium. Screens are, almost always, emissive. Which is to say, they have a maximum brightness, a <i>much</i> lower native contrast ratio than paper, and their display properties get markedly worse as ambient light levels increase. Most displays have a brightness/contrast control which can <i>reduce</i> the maximum brightness, and on many devices this is either automatic or easily accessed by the user (Fn+PgUp/PgDn on my Thinkpad, Macs have similar controls). However they cannot be pushed <i>over</i> their maximums, and in many cases, that's going to be insufficient to read your tiny low-contrast font. In my experience, any text at #333 or lighter is already <i>too light</i>.<p>⚫ Single-column designs are almost always preferable to multi-column. With an adaptive width, this will frequently address the needs of both desktop and mobile users with very few additional adaptations.<p>⚫ Respect your user's font choices. There are two classes of user: those who've selected font sizes to address their reading comfort and/or visual needs, and those who have no idea or clue. By forcing a specification on them, you're frustrating both. Using relative sizes "medium", "smaller", "larger" is a better bet.<p>⚫ Break the zoom button and you may not die, but your page is dead to me.<p>⚫ Don't include iframes with their own stylesheets. These <i>cannot</i> be overridden by the user. And yes, I'm talking to you, Amazon. Given the visual discomfort these elements present, I've simply set them to "display: none".<p>⚫ Don't explicitly scale HTML elements (p, a, li, tr, td, ol, ul, dt, dd, blockquote, pre). Style classes or IDs instead. One of my quick-and-dirty fixes is to apply an "important!" inherit property to each of these elments. CSS hackers will know about reset.css stylesheets, these can be useful to users as well.<p>⚫ Don't push your text to the edge of the screen. Another style I apply to virtually all sites is a "padding: 0 2em 2em 2em;" to the main text block. Generally padding at the top isn't necessary, but keeping the text from running straight into the gutter greatly improves readability.<p>⚫ It's hard to go wrong with a 45-55em max-width, auto width, and auto left and right margins.<p>⚫ Put some fucking padding and/or margins around images and other inline elements. 0.5 - 1em at a minimum.<p>⚫ CSS columns (a trick I picked up recently here on HN) are a good way for presenting your navigation / sidebar elements. Not supported in all browsers (what is), but the good ones do. You can see them used in the article below.<p>⚫ And if I sound fucking grumpy, it's because I <i>am</i> fucking grumpy. My first response to opening your goddamned webpage shouldn't be "fuck it, do I really want to spend time fixing this?" Because usually the answer is "no."<p>I recently posted to reddit with several specific examples of sites converted from multi-column to single-column:<p><a href="http://www.reddit.com/r/webdev/comments/1tm4ox/user_site_restyling_multicolumn_vs_fullwidth/" rel="nofollow">http://www.reddit.com/r/webdev/comments/1tm4ox/user_site_res...</a>