Dec 15
Fonts and the Web
Guest Post By: Juul Coolen
The web, and consequently its visual appearance, is dynamic by nature. For one, browsers interpret pages and show them accordingly. In a standards-compliant world every browser would adhere to the standards as set out by the W3C so pages look the same in any browser, but we all know the actual state of affairs. Granted, things have significantly changed over the last couple of years. ‘Bad’ browsers are phasing out (albeit slowly), handing over control to the designers by means of CSS. Which doesn’t mean total control, though. Especially when (enviously) looking at the area of print, there is one facet in particular we would love to be able to borrow: typography in all its glory. Or the way Jeffrey Zeldman puts it:
"The less sophisticated lament on our behalf that we are stuck with ugly fonts."
Image Replacement
Web typography is different from printing typography in that a CSS font rule is merely a request to the browser and therefore open to interpretation. Which poses a problem when the specified font is not available on the client’s computer. In such case the browser software is more or less free to pick a substitute font. Even so, font rendering varies across browsers and platforms, and user-defined style sheets can overrule any font specifications. Web standards have yet to be developed for hyphenation, multi-column text layouts, embedding of custom fonts… and the list goes on. To bridge this gap between print and web, and the time it takes for the W3C and eventually browser vendors to support these standards, people have come up with their own ways of getting in typographic control.
Image replacement is probably the most straightforward way of realising (some of) this control. In a nutshell, image replacement is about using CSS to hide HTML text and displaying an image instead, maintaining SEO. Therefore useful for branding purposes, giving the ability to have for example headers with distinguishing fonts and, possibly, effects. Several image replacement techniques have emerged over the course of the years, each one trying to overcome the downsides of others. However, none of these techniques have proven to be without their own share of flaws.
Fahrner Image Replacement (FIR)
The original image replacement technique by Todd Fahrner. Below the CSS implementation:
h3 {
background: url(header-replacement.gif) no-repeat;
width: 200px;
height: 40px;
}
h3 span {
display: none;
}
<h3>
<span>Replaced header</span>
</h3>As easy as image replacement gets. The CSS hides the text wrapped inside the span tag and subsequently replaced by the background image of the h3 tag. Problems with this method however are the inaccessibility for screenreaders, the inaccessibility with images turned off (and CSS on), and the loss of typical text behaviour (i.e. selecting/copying/resizing).
The screenreader problem got resolved by Mike Rundle who used a large, negative text-indentation in substitution of hiding the text. Making the text invisible for human readers because of the position outside of the viewport, but visible for any automated source readers. Still, the problem when images were turned off remained. The latter was finally adressed in the so-called Gilder/Levin method, by layering an image on top of the text instead of behind it. That way there is no need for CSS to hide text (getting around the screenreader problem), plus when images are turned off the text underneath it simply becomes visible (remaining accessibility).
h3 {
position: relative;
width: 200px;
height: 40px;
}
h3 span {
background: url(header-replacement.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
<h3>
<span></span>Replaced header
</h3>
Although the Gilder/Levin method works like a charm and hence looks like a viable image replacement option, some other issues remain (besides the non-semantic span tag). The most important ones not being able to select, copy and resize the text and secondly the inability to easily alter the text, which is now enclosed in an image.
(Scalable) Inman Flash Replacement (sIFR)
While the above methods replace text with images, IFR and its successor sIFR do so by using Flash. IFR is a product of both Shaun Inman and Mike Davidson, the latter continued development (together with Mark Wubben) on sIFR. sIFR is essentially a hybrid image replacement technique since it uses Flash, JavaScript, as well as CSS to perform the replacement. The JavaScript grabs assigned elements in the HTML document and swaps these out with a Flash file, which contains a pre-defined, embedded font. CSS can be used to further style the text.
The power of the technique lies in the ability of Flash to include fonts in its files. The text is also selectable and degrades gracefully when the replacement for whatever reason fails. sIFR is quite easy to implement and I would like to suggest this tutorial at Nettuts for a quick and to-the-point introduction. Downsides of the sIFR technique are increased load times, possible processor strain and its reliance on the Flash Player.
Facelift Image Replacement (FLIR)
Quite similar to sIFR, but with a twist, is the PHP-based FLIR. Image replacement is performed by server-side scripts in conjuction with JavaScript and CSS. The general advantage of FLIR over sIFR is that it is not platform or software (Flash) dependent. From that point of view FLIR offers a different approach by using regular images generated server-side. However, as with simple FIR, the property of text selection is lost.
The Future of Web Fonts: CSS3
We have been using CSS2 for quite some time now, actually it was published by the W3C as early as May 1998. To frustration of most, we are even today experiencing its anomalies in browser implementation. CSS level 3 seems to be around the corner as the W3C is actively working on its roadmap, but full software support will probably take some iterations. That doesn’t mean though we can’t have a look at what lies ahead.
Most noteworthy new feature is what the W3C dubbed the Web Fonts module. And in particular its @font-face rule. This rule lets you specify a custom font like so:
@font-face { font-family: "Rockwell"; src: url(rockwell.otf) format("opentype"); }
h2 { font-family: "Rockwell", serif; }Two different contentions have arisen though: which font file format to support (TrueType versus OpenType) and a rights management subject. A more elaborate discussion regarding this can be read at Ars Technica. Once again different interests are involved, such as the proprietary formats and implementations of the main browser vendors. Thankfully though, the parties seem to be more and more converging towards standards. Something that is needed to hand over even more control to the designer in the future.
Conclusions & Best Practices
The dynamic nature of the web makes it unpredictable. People use a plethora of operating systems, browsers, screen sizes, etc. This is why it is unlike print, especially with regard to typography, where type setters have a lot more control over appearance.
The above image replacement techniques have emerged because of this seemingly ‘holdup’. While all of these techniques have their own merits, ideally we want the CSS3 implementation. It would free us from using all kinds of hacks, tricks, work-arounds and prevent overall overhead. And we would be in less of a risk of harming accessibility and SEO—assuming there is well implemented CSS3 browser support.
At this time though, sIFR seems to be the most popular and robust alternative. All of the currently available techniques have to fall back on degradation when images, JavaScript or Flash is turned off. So while we designers get some control, hopefully CSS3 will add to it.
A good practice when using image replacement is only applying it to non-body text. Multi-line support (although available with sIFR) is rigid and results in extraneous code and/or load. And inaccessibility becomes a much bigger threat here, since body text generally contains the most important bits of the content. Also, one could wonder if all of it is worth the hassle, considering body text is more about readability, not so much decoration.
Other potential CSS standards such as those for hyphenation and multi-column text layouts will likely one day become part of the specification. However, regarding its use, when you think of multi-column text for example, that’s a typical print phenomenon. A newspaper or magazine is scrolled horizontally, while web pages are vertically scrolled. Reading a tall column of text in a browser would inevitably result in several up- and downward scroll movements. Therefore the question remains to what extent we should want to duplicate print behaviour. The web is different from print for a reason, and that is what makes it such an unique and useful medium.
This article is concluded with some examples of great font use on the web. While many of them have made their appearance in all kinds of showcase galleries for more than one reason, the focus this time is on typography. When you look closely you will spot several of the image replacement techniques discussed.
Best of Typographic Sites
The Big Noob
Big and bold.
A List Apart
Well executed combination of serif and sans-serif fonts and elegant letter-spacing.
Hot Meteor
Great choice of fonts.
Jon Tangerine
Passionate blog about typography, using an experimental logotype.
Jason Santa Maria
Experimental magazine-style design.
Monocle
Gapers Block
Visually interesting newspaper style laid out across a nice grid.
Seed Conference
100% Times (New Roman), unfortunately aesthetics take a hit on XP with ClearType off.
J.R. Velasco
Bold choices of fonts and positioning, nevertheless an amazing looking compostion.
Shaun Inman
One of the guys behind sIFR.
Forty Seven Media
I Love Typography
A leading blog about everything typographic, has a well executed design itself.
Are you a Virgin?
Bearskinrug
Kevin Cornell is not only a great illustrator, but also a talented designer.
Rob Goodlatte
Bart-Jan Verhoef
Grungy design with nice touches of handwritten fonts.
HUGE
HUGE font.
Erratic Wisdom
A Working Library
Elegant minimalism.
The Old State
Amazing classy typography.
Author’s Bio
Juul Coolen is a young, aspiring web designer slash developer. He is into clean and minimalistic design and thinks usability is important. You can find him as well at Shift (px).
Best of CSS Design 2008 3D Spiral Component Giveaways
Comments
Pages: 14 13 12 11 10 9 8 7 6 5 4 … 1 » Show All
There are 131 comments (+Add)
Pages: 14 13 12 11 10 9 8 7 6 5 4 … 1 » Show All
Loading ...
131 ijjal http://umy.ac.id/
March 10th, 2010 at 11:16 pm
woaahaaa…..cool….
130 vincentdresses http://www.hibridal.com
January 6th, 2010 at 1:40 am
喜欢你们的设计与技术，常来看看
129 enjektör tabancası http://www.vetelsanmedikal.com
November 25th, 2009 at 4:41 am
thanks you
128 dead sea premier http://magicspa.net
November 20th, 2009 at 4:04 pm
very helpful article
127 dead sea premier http://magicspa.net
November 20th, 2009 at 4:03 pm
very interesting article
126 Cyrus
September 21st, 2009 at 9:24 am
Great , Fonts and the Web
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com
125 bagsin http://handbagsurf.com
September 10th, 2009 at 8:00 pm
I have seen a site just using compo and fonts
124 jako http://fashionow.net
September 4th, 2009 at 7:20 pm
I would freaking love to do that with my picture gallery!
Thanks!
123 jatropha, jatropha seeds http://www.bulkagro.com/
August 18th, 2009 at 8:45 am
good article thanks for info
122 cennetevi http://www.cennetevi.gen.tr
August 8th, 2009 at 6:19 am
Thank =)=)=) you http://www.cennet.gen.tr