
CSS3 promises flexible font choices
We start this week with a consideration of recent developments in website design for charities and nonprofits. This blog (along with, well, most every design blog out there) has often commented on the need for nonprofits, charities, and mission-based businesses to extend their web presence wherever possible. Much of the point of social networking applications (think: Facebook, Twitter, Buzz!, etc.) is to promote timely information in a quick and concise manner. The presentation of that information is largely dictated by the servers and software that run the various applications and sites (though some basic modification and theme installation is available). Visually, what much of the audience is looking for when plugging into these sites is pretty standardized – which is especially true for those looking at sites presented by businesses and charities, rather by 20-somethings and their friends’ bands. But when people are looking for the dedicated website of their favorite causes or projects, their expectations are higher, and organization needs to raise their presentation game accordingly.
We think one of the coolest developments currently, well, under development is CSS3 (Cascading Style Sheets, version/standardization 3) and its many sophisticated tools for precise and engaging (and manageable!) text. The gist of the web-text evolution goes thus:
Cascading Style Sheets allowed designers to put the pretty parts of a website in one file, and the text and images of a website in another file. Then the client (or designer) could easily update the text info to the site without worrying about sending the design all askew. The tradeoffs were the limited number of fonts available and the need to control the size of the ‘windows’ or ‘boxes’ the text was housed in.
CSS2 added a whole bunch of options to allow flexibility in design depending on the growing sizes of monitors, including easy adjustments to the sizes of fonts (a real boon for those with less-than-perfect eyesight) within those windows/boxes. Moreover, websites gave information via the CSS file to allow the computer to read text on the site to the blind. But through these two iterations, the font FACE (what the font looked like) was limited to the ubiquitous expectations of just about any computer made after 1990 (usually a subset of Arial, Times, Geneva, or Verdana).
CSS3 allows the website to call up any font available on the reader’s computer. If (and this is the cool part) the font is not available on the reader’s machine, the website can download a trim version of the needed font into the visitor’s browser. The download is unobtrusive and does not change the computer’s font collection or settings, only the font that the CSS3 file needs while viewing the site.
What does it all mean without the CSS blather?! If your organization wants or has a specific stylebook of fonts (from a logo, for example), your website not only will have those fonts, but search engines will see every word and link you to an ever wider audience – all while keeping a unified look across printed reports, business cards, and laptop-toting donors. For a great example/proof-of-concept site, check out this one by Ian Lynham and Craig Mod. Click anywhere on the page, then click Command+A on your Mac or Control+A on your PC. Notice that EVERYTHING on the page is a font and thus ‘visible’ to search engines and text readers. Also notice the uses of serif and sans serif fonts. Finally, notice the various kinds of paragraphs and columns on the page. Lovely.
Tomorrow we will look at some touted charity sites and take a moment to see why they are being touted by designers as great examples of what can be done to put personality into a website promoting good work.