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)
- Would this information be more useful if it contained dynamic information from Javascript or a server-side language?
- 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.
Conclusion
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.
References
Here are a few places to start in order to help your web typography shine.
- A List Apart – Great general HTML/CSS site
- Mezzoblue – Revised CSS Image Replacement
- sIFR – Flash replacement text tool
- Web Aim – Flash Accessibility Overview
27 Comments
Wow, this has really turned into a full-fledged discussion.
I think the lastest debate about the superiority of web type vs. print type really comes down to what you see as typography. If you feel that typography is as much art as it is communication and that the written word needs to communicate beyond the words themselves, print type is obviously the winner. If you look at typography as a tool for communication and the more ways you can interact, the better, then you’re probably going to side with web type.
As Pat stated, this is the age-old form vs. function debate… The more things that change, the more they stay the same. :) I think Matthijs brought up a very good point about something I was very unclear about – I think we as designers for the web need to try bring web type to the visual level of print. In terms of interaction, web type is far and away the leader.
The point of this article is that we should strive to bring web typography beyond the ‘drab’, but not at the expense of what makes the web so appealing. Nonetheless, with the constraints we deal with, we need to re-examine what is good typographic design for the web medium.
Indeed, this turned into a very interesting discussion. I’m glad I can/could add my 2 cts. Hope it’s clear I was a bit oversimplifying, but that was on purpose. I like a bit of discussion. And my point came across I think :)
As somerandomdude says, there is a need to bring the visual level of web typo up. I have felt the pain as well, when viewing a font which was nice to look at at 2em size get realy ugly at smaller sizes. I have experimented with sIFR to be able to use a nicer font. However, losing some functionality like right-click menus has been the reason to ditch it again.
As long as we don’t have monitors with 300dpi and systems with 100+ fonts it will be a compromise to render that header type visualy perfect. But looking at some of the sites you mention in the article or sites from Bowman for example, shows you can do a lot of interesting stuff with typography on the web. It might not be enough for the pro type setter or graphic designer, but it will be for the avarage visitor.
after reading many of the comments, i will admit that at times, print designers scrutinize every nuance of typography to the point of absurdity. That is the nature of the typical, Type-A, print designer! Only print designers care how far apart letters are spaced or whether the curve of a certain serif conveys a specific feeling. Matthjis said it best: “…you can do a lot of interesting stuff with typography on the web. It might not be enough for the pro type setter or graphic designer, but it will be for the avarage visitor.” I think we (print folks) need to keep that in mind when working on websites and look at the overall purpose of the project, where essential functionality won’t be compromised by a design element.
We seem to all agree that HTML text is insufficiently beautiful. But, are we not appreciating it’s visual quirks? Are we being too demanding?
I’m thinking back to the 1980′s when video game graphics were seriously lacking. Everyone dreamed of a time when the games would look more realistic, but now that they are, I find myself gravitating back towards the blocky visuals of the 80′s and finding their flaws to be quite appealing.
Another example would be letterpress printing, where the imperfections are really what makes the type look great.
What does everyone think? Is HTML type beautiful-ugly, or ugly-ugly?
i see your point, pat. oh the nostalgia of 80′s video graphics! i loved my atari set.
however, i see the imperfections of a letterpress as a completely different thing. This brings back my argument about typography having a human element. The flaws of certain type treatments breathes life into a piece. THAT is beautiful.
on the other hand, i see (most) web type as strangely rigid, symmetrical, and void of character. It doesn’t help that most HTML text is confined to a strict grid system, reminiscent of traditional swiss design. i feel web typography is neutral rather than ugly or beautiful. it rests somewhere safely in the middle…
True, true, Kellie Kat. They are both forms of imperfection. Do you think that only human imperfection is interesting, then? I might agree, but I’m not sure.
But I disagree about your last comment. Neutrality is safety, safety is cowardice, cowardice is ugliness. :) Dramatic enough?
safety is not always cowardice. i have many examples, but lets not get detracted from the topic here…
regarding the comment about the 80′s graphics, it seems you are speaking about finding beauty in nostalgia, which seems to be a common trend in design. Woodtype ornaments, edwardian scripts, and typewriter fonts are everywhere in the media. Perhaps in 50 years we will look back at HTML typefaces with the same reverence.
hey pj-
“Apple utilizes the fonts Lucida Grande and Apple Garamond as design elements”
Its actually Lucida Grande and Myriad Set. (Maybe they used Apple Garamond in the past?) i couldn’t resist making a comment. Apple fonts are permanently imprinted into my brain. ;-)
Wow, I have to catch up, there have been a plethora of great thoughts. Yeah, you’re right, they phased out Apple Garamond – my bad. :) Still, it has left an indelible mark on Apple branding.
I’ll respond to all these comments tonight or tomorrow.
The issue with images vs HTML text is definatley form vs function.
I believe that the HTML source documents should be as standard complient and semanticly meaningfull as possible, while visual formatting and layout can be applied as and when needed – that is when the “page” is “viewed” the browser interprets the CSS and manipulates the visual reperesentation of the document as the designer specified (hopefully). It is at this stage a script or other text -> image replacement technique can be used.
This way you can start with a “solid foundation” of standard low-tech but fully functional hyperlinked semanticly meaningful HTML validated pages, and build layers of presentation and behaviour on top of this.
However this is *not* a long-term solution for such a basic and important function of web browsers.
I’m a little late on these replies, sorry about that. Work has been busy.
-Matthijs,
“I have experimented with sIFR to be able to use a nicer font. However, losing some functionality like right-click menus has been the reason to ditch it again.”
Great point. That’s a serious downside to sIFR and one should be aware of the usability dropoff that goes along with it.
“As long as we don’t have monitors with 300dpi and systems with 100+ fonts it will be a compromise to render that header type visualy perfect. But looking at some of the sites you mention in the article or sites from Bowman for example, shows you can do a lot of interesting stuff with typography on the web. It might not be enough for the pro type setter or graphic designer, but it will be for the avarage visitor.”
Exactly. We need to accept the technical limitations and work within them instead of stubbornly trying to fit a square peg in the round hole.
-Pat
“I’m thinking back to the 1980’s when video game graphics were seriously lacking. Everyone dreamed of a time when the games would look more realistic, but now that they are, I find myself gravitating back towards the blocky visuals of the 80’s and finding their flaws to be quite appealing.”
Is this an example of ‘the grass is greener’? We push and push for more visual control and when we have it, we come to the conclusion that it’s not all it is cracked up to be. See, the problem is, when you have that added control, you have to produce something with it. I think a lot of people like working with less control as a means to cover up their own design inhibitions. For instance, Kellie’s example of imperfect letterpress type can help cover the imperfections of our own design. Compare that to a page full of Futura – you have nowhere to hide. I say this because I’ve seen myself do it a plethora of times with a degree in shame. Sure, it looked cool – but was it any of my doing or the object I used to create the imperfections. While I’ve gotten somewhat off subject, I think this brings up an interesting point. The web is currently pushing for more and more visual control – there will be a point where the Arials and Verdanas are adored once again. Just give it enough time.
-Kellie
“i feel web typography is neutral rather than ugly or beautiful. it rests somewhere safely in the middle…”
Interesting concept – although I’d say that three or four years ago it was just flat out ugly.
“safety is not always cowardice.”
I have to agree with you on that one. While we may not enjoy it, we can’t always go buck-wild on a design and have it be relevant to the subject at hand.
Ok, I think it´s a bit late, but as it´s my first time here, I can take your dare and respond to it! Check header here: http://jontangerine.com. It´s not my art piece, pal, but you have to admit hat it looks even better than the image wich you are daring us! Cheers.