This post will focus on a few more typography resources but it will also address some of the problems surrounding using interesting type on the web. First off, I think most people creating web sites realize that only a few fonts are widely supported by most browsers; fancy fonts that are not installed on a user's computer are simply converted to one of the standards. Using only these standard fonts is a sure way to guarantee that you are controlling the look of your web page, but unfortunately it can also make your web page a little boring. This is where using specialized fonts for headings is important to add interest while leaving most of the textual content in a more universal form.
This brings up some interesting issues related to how, exactly, you can get the heading text to render appropriately.
Use CSS to get creative:
Digital Web Magazine has a 2005 article by Garret Dimon that suggests various ways to apply CSS to text in order to achieve good design and readability. Some of the techniques are aimed at tweaking body text by adjusting line heights and employing bolding or italics to make text easily scannable. The article also suggests trying "some headings in all caps, rich colors, or with tighter word or letter spacing" as a way to set them apart. It goes on to list a few examples of well-designed websites that use only CSS to create differentiated and readable text. Truthfully, this simple advice has a point; adjusting the letter spacing to create a wider or narrower than normal heading can look cool, and requires very little effort. Using only CSS to alter text also has the advantage of being compliant with usability standards as screen readers should have no trouble with the text.
Check out the Dimon article here:
http://www.digital-web.com/articles/css_typography/
Stick an image in place of the headings:
Sometimes working with the standard web fonts is just not enough, no matter how many fancy colors or letter spacing tricks you try. There is a reason so many great fonts exist; we LIKE variety. Sometimes the structure of a specialty font communicates a clear message or emotion that one of the web fonts just doesn't. This is important not to overlook since communication through design is more complex than just having clearly readable text. Font styles can invoke meaning. In order to use a particular unsupported font for one or more headings, the easiest thing to do is just create a jpeg or gif image of that type and insert the graphic where the headings belong. This process is quick and can be accomplished by anyone, and has been my personal method of choice. However, there are a few downsides to this method, including accessibility issues. Screen readers will not handle images like regular text, so technically your site is not easily accessible to those using such technologies, or to anyone that has image display disabled. The other issue is that jpegs and gifs, depending on file size, can take longer to load. This might actually be noticeable on slower computers, especially if a lot of text is replaced by imagery.
Replace the text using sIFR:
Plain browser text can be replaced by small Flash movies that display fancier fonts. A javascript function controls this behind the scenes so users don't realize the replacement technique is happening. If Flash is disabled the font still displays, it just appears in the default text. The upside here is that the sIFR movies are small, taking up only around 20k, unlike the image text solution above. Also, since the default text is still there, screen readers have no trouble with recognizing the heading font as text.
To read more specifics about sIFR visit:
http://www.mikeindustries.com/blog/sifr/
Other possibilities exist, such as replacing text using javascript or image replacement techniques, but I won't cover them here because, quite frankly, I am too much of a novice to fully understand how to implement them.
Typography and web design articles:
A List Apart is an online resource geared towards web designers and covers all kinds of related topics. Not surprisingly, typography is covered in a number of articles. First off, the design of the web site is quite appealing. The text is black on a white background while the header and logo are a subtle beige. The article titles are set apart in a blue font, the color of which is repeated in a thin strip at the top of the page. Linked text appears in orange, creating a good visual contrast. The navigation structure is perfect. Main links appear across the top while a sub navigation system reveals main topics of interest such as design, code, and process.
The articles on this site are quite useful. For instance, Web Fonts at the Crossing by Richard Fink provides a good overview of the changes and future direction of web fonts. As part of his article he notes that the aforementioned sIFR technique is probably a relic already given the lack of Flash support in key parts of the market (iPhones, iPad). I love reading stuff like this as it gives me some perspective about what is in and what is out in terms of techniques. Another great find from this article is the @font-face css rule. This apparently downloads a font from your server if an end user doesn't have it, so the correct font appears on the page. This seems to have some issues associated with copyright since I guess users can grab the font from the CSS and only a limited number of fonts are available using this method because of this issue. I'm not sure I understand how the fonts can get grabbed, but with every new system comes the potential for abuse.
Anyway, read more about it and check out some of the articles here:
http://www.alistapart
Abc Typography: A Virtual Museum of Typography was a website assigned this week, and it bears a mention here. The site is divided into four sections of type and upon clicking a typeface it gives a brief description. Navigation tabs in the header area offer access to resources such as historical accounts of typography and links to some good free font downloads. The typography museum section of the website was, sadly, useless. Clicking a category such as modern or atypical opens a page with a drop down menu from which you are supposed to select a font; none of the links work, however, in any of the categories. Instead error message after error message confronts viewers. This is obviously enough to eclipse the other useful contents of the site, and frankly the good content can be found elsewhere on more functional sites, so why bother browsing here?
If you want to check out the Abc Typography: A Virtual Museum of Typography, click here:
http://abc.planet-typography.com/index.html
I'll close today with one other resource, the Typographic website. This resource has lots of useful information, including a gallery. Beyond simply showing what the featured typefaces look like, the gallery shows artwork created to express the feeling of the type; some of the work is extremely inspiring and reinforces the use of type as an art in itself. Also noteworthy is the timeline. It scrolls horizontally, but it looks so cool that this is completely forgivable. Also, since the layout is a classic horizontal timeline structure it is actually easier to read and underscores the linearity of the material. This part alone is worth checking out. In fact, the timeline is so cool I might forgive them for having a header "logo" graphic that doesn't link to the home page. Additionally, the glossary of typographic terms is quite extensive, so this web site would also be worth bookmarking as a quick reference guide.
Check it out here:
http://www.rsub.com/typographic/
No comments:
Post a Comment