I love typography. Unfortunately, the internet doesn't- at least not in that printy way. Because most people don't have many font files already installed on their computers, there is actually a very limited number of web-friendly fonts available (in general, it's under 10). If you specify that a line of content on a website should display in Bodoni, each user out there would need to have the Bodoni typeface files stored on their computer in order to see your content as you intend. Otherwise, their browser will revert to whatever its standard typeface is. That means that your beloved Bodoni is much more likely to be your nemesis, Verdana. However, there are a few techniques that can open up your options for web typography.
Type Substitution Techniques
One simple approach is to use CSS to define various font family options, which allow the users' browsers and/or operating systems to supply the specific typeface. An example of this would be to specify "sans-serif" rather than "Arial." This is not the approach I would recommend, though. Most designers justifiably care what particular typeface is used, and would prefer a method that ensures that their choice is what everyone sees.
Another approach is to "cloak" particular text, such as page titles, headlines, or sub-headlines, and substitute them with images or flash files that contain the specific font the designer has selected. There are a couple of variations on this approach that are worth looking at. The first uses a script that cloaks the text and then converts it to a GIF image file using the specific typeface chosen (some people call this FLIR, not to be confused with "Forward looking infrared"). The advantage to this method is that it's pretty quick to load and makes the list of available font options limitless. However, one disadvantage is that, because the text is actually an image file, it won't be able to wrap. This could be a problem for long titles displaying in narrow content areas. In fact, below is an example of that exact issue:
The second method is called Scalable Inman Flash Replacement (sIFR). sIFR uses javascript to cloak the text, and then swaps it with a Flash element that contains the specific typeface the design has chosen. When compared to the text/image option I described above, the obvious benefit is that the text will indeed wrap since it has not been converted to an image file. However, the use of sIFR isn't always going to guarantee that the correct font appears. If a user has disabled javascript or does not have the Flash plugin installed on their browser, the text element will display in whatever default CSS styling has been set up for the website. Additionally, this approach will increase the load time for the page- the larger the amount of text, the slower the page will load. Below are some examples of sIFR in action:
This is a great resource to have on the NF site. Nearly every project I've worked on in the past year could benefit from one of the points made in this article.
Another point is that designers often create custom interface tools (internal page scrollbars, dropdowns) and don't take into account how each browser treats these differently. Yet another point to add!
I like your analogy of Jazz. I do feel that it's more of an ensemble. There are several concerns out there. One, you need to make the site attractive while not making it look cluttered. Two, when you get the traffic, if your website is purely graphics and no copy writing, you might be losing god traffic.
Thirdly if you have too much of the widgets and gadgets like Mybloglog, Digg, Twitter...yes it does add traffic but sometimes the website could look pretty messed up with so much plugins.
That's why there's a fair bit of strategizing to be done before launching a site.
Seo Singapore, I agree- you're describing the "Frankensteinization" effect, which is a risk to any site that has both a client controlled CMS, and one that grows in functionality over time. That's also why design is not a one-time event. Over time, as new functionality is introduced, it's great to have a designer on hand to adjust the overall design to accommodate new elements.
Dennis | June 9, 2009 10:22 PM
Chris,
This is one of my favorite Newfangled newsletters so far this year. (1) I love the use of more images. They really help to get your points across and also to keep the momentum going in the article. (2) I love the content in general. You should definitely write more about design. Many of your recent newsletters have been primarily about marketing concepts- they've all been good stuff- but I'd like to hear more about design and I bet so would many of your agency clients. Maybe a series that deals with tools, a critical approach to quality in design, etc. that kind of thing? With your RISD background I'm sure you have much more to say about that kind of thing... Keep up the great work!
Thanks for the compliments! I agree that the images are important- you've probably noticed that the last few newsletters have had many more images. Many people look to the images to get a quick understanding of what the story is.
I'll take your suggestion on writing more about design. I have a few ideas for future newsletters that will be more design related.
I like your jazz analogy also, it's brilliant. Designing an effective web site requires more than just gathering relevant information and posting it on the web. Like a good paper or research presentation, a quality web project demands as much attention to the selection, organization, and presentation of material as to the underlying research itself. You should strive, above all, to be both clear and engaging in every aspect of site design. Without the first, you will quickly lose your audience. Without the second, you'll never catch their attention in the first place.
I also like your jazz analogy. I have two tips to begin a web: * Consider your audience and your goals. You should have a clear sense of who will be using your site (mostly college undergraduates) and what kind of experience you are hoping to provide. What exactly are you trying to accomplish here? Why is this important? * Plan your site on paper first. You can draw a "family tree" of pages with arrows indicating links. Or you can make a hierarchical outline. Either way, it is essential to organize your information and lay out the architecture of your site before attempting to implement your vision.
Ed | April 1, 2010 3:58 PM
Chris,
When you talk about "identifying rules" for the image sizes, are you meaning a particular pixel size that you use every time? Would that be something you do in advance or couldn't you just use the wysiwyg editor to crop/resize your images? Also, is it really best to set hard rules, I mean, might that not get boring or too predictable?
This is a great resource to have on the NF site. Nearly every project I've worked on in the past year could benefit from one of the points made in this article.
Another point is that designers often create custom interface tools (internal page scrollbars, dropdowns) and don't take into account how each browser treats these differently. Yet another point to add!
Katie
Katie,
That's definitely true! We could probably have an entire newsletter just on browser-related issues.
Chris
Chris,
Great post. Could have easily developed into a whole series but you definitely covered the majors. Can't wait to see this in print. ;)
Justin
Great article Chris. Nice work.
You write with a good voice.
Cheers, Ed
Ed,
Thanks for reading, and for your kind words!
Chris
I just saw this blog post from Viget Labs about another approach - the Cufón technique- for font replacement. Check it out.
I like your analogy of Jazz. I do feel that it's more of an ensemble. There are several concerns out there. One, you need to make the site attractive while not making it look cluttered. Two, when you get the traffic, if your website is purely graphics and no copy writing, you might be losing god traffic.
Thirdly if you have too much of the widgets and gadgets like Mybloglog, Digg, Twitter...yes it does add traffic but sometimes the website could look pretty messed up with so much plugins.
That's why there's a fair bit of strategizing to be done before launching a site.
Seo Singapore, I agree- you're describing the "Frankensteinization" effect, which is a risk to any site that has both a client controlled CMS, and one that grows in functionality over time. That's also why design is not a one-time event. Over time, as new functionality is introduced, it's great to have a designer on hand to adjust the overall design to accommodate new elements.
Chris,
This is one of my favorite Newfangled newsletters so far this year. (1) I love the use of more images. They really help to get your points across and also to keep the momentum going in the article. (2) I love the content in general. You should definitely write more about design. Many of your recent newsletters have been primarily about marketing concepts- they've all been good stuff- but I'd like to hear more about design and I bet so would many of your agency clients. Maybe a series that deals with tools, a critical approach to quality in design, etc. that kind of thing? With your RISD background I'm sure you have much more to say about that kind of thing... Keep up the great work!
Dennis
Dennis,
Thanks for the compliments! I agree that the images are important- you've probably noticed that the last few newsletters have had many more images. Many people look to the images to get a quick understanding of what the story is.
I'll take your suggestion on writing more about design. I have a few ideas for future newsletters that will be more design related.
Chris
I like your jazz analogy also, it's brilliant. Designing an effective web site requires more than just gathering relevant information and posting it on the web. Like a good paper or research presentation, a quality web project demands as much attention to the selection, organization, and presentation of material as to the underlying research itself. You should strive, above all, to be both clear and engaging in every aspect of site design. Without the first, you will quickly lose your audience. Without the second, you'll never catch their attention in the first place.
Aron
Kayu Jati | Wheatgrass Grow | Kefir Grains
I also like your jazz analogy. I have two tips to begin a web:
* Consider your audience and your goals. You should have a clear sense of who will be using your site (mostly college undergraduates) and what kind of experience you are hoping to provide. What exactly are you trying to accomplish here? Why is this important?
* Plan your site on paper first. You can draw a "family tree" of pages with arrows indicating links. Or you can make a hierarchical outline. Either way, it is essential to organize your information and lay out the architecture of your site before attempting to implement your vision.
Chris,
When you talk about "identifying rules" for the image sizes, are you meaning a particular pixel size that you use every time? Would that be something you do in advance or couldn't you just use the wysiwyg editor to crop/resize your images? Also, is it really best to set hard rules, I mean, might that not get boring or too predictable?
Cheers,
Ed