Absolute minimal styles for your unstyled site

Matthew Nuzum —  — 2 Comments

Among the elite hacker community it is sometimes considered cool to have an unstyled website. I’m not certain what makes this cool, but I respect it none-the-less. However a few absolutely minimal styles can make your site easier to read. Here they are:

body {
font-family: sans-serif;
line-height: 130%;
font-size: 91%;

First, this helps improve readability by switching to a sans-serif font. Even the highest resolution screens (iPhone and similar) max out at 160dpi. More commonly screens are 96 to 120dpi. This is far less than a printer which is more like 600dpi on the low end. Therefore the curly tips to serif fonts do not get well defined and are essentially blurred (interpolated) by the screen to make them look smooth. This completely negates the benefits serifs enjoy in the print world.

Secondly, it increases the line-height, effectively putting a bit more space between the lines of text. This makes it easier for people to read your content because they can more quickly refocus their eye on the next line of text as they move their eyes from the far right side of the column back to the left.

Lastly, it drops the font-size by 1pt from the browser default which allows more condensed type. Since sans-serif fonts are much easier to read on-screen this does not undo any of the improvements on screen. 11pt sans-serif is easier to read than 12pt serif.

Some people don’t think this matters. If you are one of these types of people let me assure you that you that it does matter to many of your site’s visitors, even though many would have a hard time quantifying or describing why the styles above improve things.

We’ll use the site of my friend and colleague Barry Warsaw as an example. I’ve adjusted his site’s styles using firebug and the two images below demonstrate the change:

before styles
after styles

Note that the newly styled page actually fits more content in before you have to scroll. Also note the links in the navigation at the top of the page, how the under-lined links have more space between the underline and the text below it.

So very little work is done on your part, your site’s general appearance hasn’t changed dramatically (though some people will notice it) and your site has gotten easier to read.

Please don’t omit the line-height, it is essential to the end result.

If it helped, please share!Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Matthew Nuzum

Posts Twitter Facebook

Web guy, big thinker, loves to talk and write. Front end web, mobile and UX developer for John Deere ISG. My projects: @dsmwebgeeks @tekrs @squaretap ✝
  • LaserJock

    Can we get some more “how to make your site look sweet” nuggets like this? This is easy and fantastic. I’m sure you’ve got a lot of great tips for the amateur website maintainer.