inamidst.com · patterns

Style is Content

When you present information, you're forced to choose a style for the presentation: there's no such thing as a neutral style. When doing something as simple as writing a webpage, for example, you're forced to choose between many factors such as whether to use a serif or sans-serif font. Most people don't put any consideration behind such matters, which means that they're lacking a valuable tool much like understanding how to spell or how to write strong sentences.

A serif font is one which uses small decorative curls at the ends of the letters. It's the traditional kind of font that's been used since the earliest days of movable type, and is still the standard for printed text. Because it looks traditional, when you use a common serif font on a webpage you automatically make it look traditional and classic. When you choose a common sans-serif on the other hand, you're choosing to put forward a more contemporary slant on things, with cleaner lines and a less cluttered feel.

The decoration on serif fonts often comes over as baroque and useless to people start to think about fonts, but it actually serves the purpose of making the characters easier to distinguish and flow into one another easier, with the result that serif printed text is easier to read. On a screen, however, the serifs tend to clatter because of low screen resolution compared to paper, so sans-serifs are more common on the web, especially at small font sizes. In other words, the decorative style of the characters has a very noticable impact on the performance of the font, as well as its feel.

This principle transfers to every aspect of design. Well designed pages are very distinctive, so as to orient the reader (which page am I on?), and yet consistent thematically (is this page talking about the same thing as the other page?). Part of the value of design for orientation can be seen from the emergence of favicons on the web: the little icons that get associated with each site so that you can see which tab is from which site in your browser.

Horizontal rules make good skimming cues, blue and underlined font generally means a hyperlink, big and bold runs of short text mean headings, the list of structural design idoms is endless. And yet in the web formats world, there has long been a move to separate semantics from structure and structure from style. To some extent this is warranted, because it lets the designer experiment with lots of different styles to see which one best accentuates the content involved as well as providing orientation and themeing along with all the other benefits that good style has. To some extent it is bad, because it makes us think that style is different to content, rather than a different kind of content, and so it's often neglected and the domain of good design is reserved for design professionals, whilst everyone is taught how to write a good sentence (even if not many succeed in learning!).

On inamidst.com, I keep the styles very simple, sometimes to the point of almost appearing to have no style. These DesignPattern pages, for example, look black and white with no style. But in fact the choice of black and white, a serif font, lots of right margin, the careful arrow in the header, all conspire together to accentuate the content, to say "what's being concentrated on here is the idea of the words, but the style is set up to let you receive those ideas with as little distractions as possible". In other words, it's been designed as much as my more baroque creations, such as my homepage.

But I do in general keep my styles simple, partly because good design is very hard, especially when you factor in technical limitations. Browsers are very inconsistent in their handling of CSS, the styling language for the web, and as a result it takes a lot of experience to make a good webpage; this is a bad sitation, and a definite consequence of style as a second class citizen. Since style is content, you can very simply boost the power and reception of what you're saying by paying attention to it!


Sean B. Palmer, inamidst.com