Resources: CSS for Readability
In design, some things should jump out at you while others should fall to the background. The readability of your site (or any copy) is probably the best example of something that should go unnoticed at the conscious level. Why? Because text is a medium for conveying information. It should get the word across while being invisible itself. Great readable text does this seamlessly, almost pulling the reader through the content. Good content in readable text will cause a reader to sigh and relax, or stand up with a smile and raise their arms in the air or even sometimes pause for a moment as if something has just whispered in their ear to find their life's problems and hardships unraveling toward a wondrous future.
Below are some sources for readable typesetting (fonts, lines spacing, color, etc..), some tutorials on how to design readable text and the occasional neat tool or site that is relavant in some other way.
Here's the best statement of style, including readability standards, I've found on the web. Yes, it's from http://www.alistapart.com. A must read anyone producing content - http://www.alistapart.com/contribute/styleguide/
Here are some other random ones: (I will add to this list as time goes on)
- http://www.legistyles.com/ has three nice styles to choose from.
- If you're just getting into CSS, here is a very clear and straightforward tutorial for CSS readability.
- The folks at http://readable-app.appspot.com/setup.html have a pretty neat idea. They put together a tool that allows you to decide upon a typeset that you like, then make a bookmark in your toolbar that will convert any page to that typeset. I don't forsee myself using the bookmark much but next time I'm trying to figure a font for something clicking through the style element may come in handy.
If you know of any resources, please leave them as comments. Thanks!
Exciting advancements in CSS from lesscss.org
CSS has always been a strangely beautiful but notoriously static and redundant language. LESS CSS has tackled this problem head on introducing a variety of programing concepts that will vastly improve the experience of writing and maintaining css. They also have a great logo.
The main ideas include:
- variables,
- 'mixins' (embedding definitions in other definitions as variables),
- embedding (explicitly declaring definitions in definitions) and
- mathematical operations.
Introducing these concepts into css would vastly improve the css experience. Unfortunately, Less has ony implemented them as a Ruby Gem, which is not useful to me and my PHP ways. I applaud them none the less and hope that the PHP community will respond with a solution.
For large or complex sites, there's not been any straight forward way of getting around writing huge or many .css files each of which repeats colors, styles and properties for many similar but different classes and page elements. Sure, semantics goes a long way but raises problems sometimes, as does thoughtful nesting and clean use of classes, but, lets face it, reality doesn't allow for optimized css. This is one of those things where you have to compromise any ideals you may be harboring or consine yourself to non-productive insanity.
Another interesting angle on Less is that it sidesteps the biggest barrier to the advancement of css: browser compatibility. The pre-processing, in effect, is a compiler for a meta-css language. So, more kudos to Less for finding a way around the beast of multi-browser issues (aka: ie 6 should have been shipped with an auto-updater.)