First I read this. Then I read the follow up. And finally I found myself at this page, remembering, yet again, that the key to usability is readability.
Now, if what you do every day has little to do with usability, design, or typography, you might think this stuff doesn’t really matter to you. If you do something that has anything to do with the internet, software, or computers, you’re wrong. These articles say that “Web Design is 95% Typography,” but I think that all desktop computer Interface Design is greater than 95% typography. Read the articles, they’re succinct, simple, and act as a great typography tutorial.
I put some of the “100e2r” (100 Percent Easy to Read) Standards into practice on my blog. I’m still letting them sink in…but weigh in with your opinions in the comments. Here’s a record of some of the changes, as applied to the 100e2r Standard:
- Standard font size for long texts – Default text size was changed from 0.8 ems to .95 ems. The 100e2r calls for a 1em standard…but it just didn’t look right in my layout, at least on my screen. We’ll see once I get a chance to look at it on bigger screens.
- Active white space – I think my text already has an acceptable amount of active white space, so no change here.
- Reader friendly line height – My line-height (leading) is set now at a little below 200%. That’s a little above the 140% recommendation, but I think it’s acceptable on my page. In fact, on my page I don’t think 140% is enough.
- Clear color contrast – I changed the color contrast on my page a bit. The recommendation is #333 on #fff. My design features light text on a dark background, which I believe offers fine readability (but if I’m wrong, it’s your responsibility to let me know!), but the contrast was too harsh before, with white text on a #333 (deep gray) background. The white text has been changed to a slightly gray color (#ccc).
- No text in images – No text in images was easy…I don’t do that anyway.
So the bad news is that I don’t play by the rules to the letter. The good news is that I think that’s alright. Design isn’t about sticking to hard rules, but bending them to make things work. I think my design is quite readable. I’m always hungry for feedback though, so let me know if you disagree. For now, I’m 40e2r, but that’s just fine by me…as long as you can still comfortably read the content.
4 responses to “The Basis of Web Design = Typography”
This will be a very useful post for me to revisit over Winter Break, when I plan to finish my site upgrade. I picked/adapted a WordPress blog template that had some of the characteristics I was looking for, namely shorter, predictable page size with multiple blog posts. I don’t like the typeface and some of the clutter, but still have other issues of content and browser support to deal with. And, once the blog part is all fixed, I still have a wiki to open up and integrate.
I’m probably going to be in a similar boat. I doubt I’ll comply with all of the suggestions, but I’m also very OK with that.
Excellent blog Josh. The challenge is arguing these great points against the page aesthetic that the designer is out to achieve. Even more challenging when you are up against a “brand police” who are slave to brand guidelines, probably defined for print media rather than the web.
Oh, btw, I check out your contrast – I think it fails. Check out http://del.icio.us/search/?fr=del_icio_us&p=contrast&type=all
Josh,
Also we had a directive in a place I worked. They disliked calling a link ‘this’ ‘that page’ instead have the link text say ‘Web Design is 95% Typography (1)’ in your case for example. That gets people interested in reading it.
Sudhindra
Those are good guidelines, but 100%??? What about narrow columns of text, whitespace between paragraphs, different type for different info, etc…
Following those guidelines might get people to 50% easy to read if they’re lucky.