Words without thoughts never to heaven go.
To the Beginning and Back Again
I know this is going to ruffle more than a few people’s feathers, so let me take a step back and explain how I came to this opinion. Before the web, print was the only show in town for graphic designers. The written word had one main purpose – to be read. While typographic design obviously took the visual into account, other factors came into play such as informational hierarchy and legibility. No matter how strong the visual composition, if half of the people could not read the content or discern the hierarchy quickly enough, it could not be considered strong typographic design.
Fast forward to the internet generation. Reading the written word on the internet was only one of many ways to interact with type. The written word took on a whole other dimension. Words could now automatically be cataloged, searched upon, compared, indexed, copied and pasted, translated and saved. For those who were not very interested in any of the technical aspects of the internet, this did not matter very much. All that mattered was that HTML text was a pretty horrid sight to behold. Honestly, not many people would argue with them. HTML text was frankly not enjoyable to read. There were only a handful of safe fonts, while large text was horribly mutilated by pixelization. Kerning, tracking and leading were only a dream.
Now jump to today when CSS is widely(ish) supported, more fonts are (becoming) available and major operating systems render system text with a little more grace. That being said, visual control of typography on the web still is not remotely close to that of print. Nonetheless, the pill is a little easier to swallow. In my opinion, there are enough tools and options available to make the use of images for text, rather than HTML, a poor choice in most circumstances. Strong typographic print design must always address readability. When thinking about typography on the internet, one should strongly consider how the typographic design takes into consideration usability, Section 508 specifications, readability for visually impaired and SEO. Visual appearance, while arguably the most important aspect of typographic design, is still only one piece of the puzzle.
A “Web Page” is not a Page
Many designers I speak with compare a web page to a poster or a page of a book. Unfortunately, this is a poor analogy for many reasons. While the same methods for layout design can be used on the web, comparing books and poster design to web design does not take into consideration the functional and interactive attributes of nearly all web sites. The written word and the “page” it is contained on is much more than words on a piece of paper. Basic typographic interactions on a web site include finding text, copying text on the screen, and behind the scenes indexing that goes on with search engines that spider through the site. For example, imagine if Gmail decided all of the sudden to render all your emails as perfectly kerned GIF images in your favorite font. Even the most fervent typophile would be furious. At this point we take for granted the new dimension of web text. Users expect certain aspects of type functionality and become frustrated when it is missing. A web designer must be careful not to strip away valuable interactive and usability typographic elements to satisfy only the visual attributes of a web site.
Something I try to do is to look at the purpose of each typographical element on a “page”.
- Is this word/phrase important enough to be useful for search engines?
- Do I want the user to have the functionality to be able to search, find, and select text?
- Is this text important to understanding the page? If so, how does this impact barriers such as visual (blind users) and language (non-English users)
- How strong is the typographic branding of the company/organization/institution this site is being developed for? For instance, Apple utilizes the fonts Lucida Grande and Apple Garamond as design elements that would most likely be necessary to use in a web site to keep visual consistency with the company’s other marketing divisions (print, TV, etc.).
Designing the Cart before the Horse?
As designers in the web medium, we are responsible to design the function and form of a web site. We need to accept the fact that with typography on the web, function and form are attached at the hip. Designers who only consider the aesthetic aspect of typography while disregarding all other aspects are cheapening the power of the written word and the full potential it holds on the internet. They hold the appearance of the words higher than the meaning they contain – which, in many circles, is completely backwards. Strong typographic design should bring the written word to its greatest potential. To ignore the voluminous advantages words receive by being in HTML shows a lack of regard for the author of those words and for those who read it (or potentially do not read it). I think a good question to ask is, does the visual appearance of the subject communicate more than the words themselves and aid the user’s experience more than the inherent functionality of HTML text. In my opinion, that would be the one of the few reasons to use non-HTML text, such as a logo. Even in these situations, leveraging CSS techniques can provide the best of both worlds – allowing for the image you want your viewer to see while having HTML text conspicuously hidden when viewed with modern browsers.
What about Flash?
Being a Flash developer, I am well aware how this article may seem hypocritical as I am aiding in the propagation of less usable type. However, as I stated earlier, if the visual appearance of the typography on a web site holds more weight than the meaning, in my opinion, all bets are off. As we all know, some sites rely less on what they are saying and more on how they are saying it. For example, take one of Nike’s experience sites – the interaction and visual facets of the site far outweigh any narrative content they are trying to communicate to the user.
When it comes to Flash, I do not think it is a question of what you want your site to look like. In my opinion, it is much more of what you want to communicate with your site and how you want the user to interact with it. There are best practices which should be followed to make Flash sites much more usable, such as allowing your as text to be selectable. Will it make type in Flash as usable as HTML text? Definitely not, but it will help.
Making web type look good is a design challenge, not a roadblock. To avoid it by strictly using images or by recklessly throwing system text in with no regard for visual aspects are both examples of bad design. There are a plethora of ways to improve your typography on the web while keeping the text in HTML. However, you are still not going to get the same control as when designing for print. In addition, it can definitely be a challenge for those who are not exactly technically savvy. That is what makes the web what it is though, you either love it or hate it. A more standard design today will more easily be able to use tomorrow’s stronger typographical controls for the web. I can speak for myself when I say that day cannot come soon enough.
Here are a few places to start in order to help your web typography shine.