CSS is ten years old this year. Such an anniversary is an
opportunity to revisit the past and chart the future. CSS
has fundamentally changed web design by separating style from structure. It has provided designers with a set of properties that can be tweaked to make marked-up pages look right—and CSS3 proposes additional properties requested by designers.
Many CSS properties, both old and new, deal with text: they describe text
color, position, style, and direction. This is all very
good—after all, text fills most of our screens. But in order for
properties to reach their full potential, we need a good
selection of fonts. And fonts are sorely missing from the web.
Consider the fine designs in the CSS Zen Garden. What makes them so
exciting to look at? In part, it is the variety of fonts. Fonts convey design messages and create effect, and while in
traditional print design there are a plethora of fonts available, fonts have been in limited supply on the web. Web designers
depend on ten or so universally available fonts for their designs, and are reduced in large part to using Verdana and Arial over and over again. A typical CSS Zen Garden design, on the other hand, uses a hand-picked
font to render text and aligns the glyphs to a pixel-perfect degree…and then uses that text as a background image.
A background image!
There are many reasons why background images should not be used to convey text. Images are expensive to transmit and hard to make. Imagine trying to translate a web page into 15 languages and having to produce a set of images for each language. Additionally, the quality of printed web pages suffers as images don’t scale to the resolutions offered by modern printers. Using background images is currently the only way designers can use their favorite fonts on the web. But shouldn’t web designers have access to a wider selection of fonts and be able to use them without having to resort to creating background images?
There is a way: web fonts. Instead of making pictures of fonts, the actual font files can be linked to and retrieved from the web. This way, designers can use TrueType fonts without having to freeze the text as background images.
A brief history of web fonts#section2
This is not a new idea. In 1998, CSS2 described a way to link to fonts from style sheets, and both Microsoft and Netscape added support for web fonts in their browsers. However, neither vendor supported the most widely used font format, TrueType. Instead, they each picked a different, little-used format with few tools to support it (EOT and TrueDoc, respectively). And so web fonts disappeared from the designer’s toolbox.
Better news#section3
It’s a pleasure for me to announce that web fonts are back! Here
are some recently generated examples that show how a familiar document
can be rendered when TrueType web fonts are available:
The PDF (and image) examples shown in this article have been produced by Prince 6, a
web-to-PDF-through-CSS renderer. (The Macintosh version must be installed via Terminal. Instructions are included in a ReadMe file. —Ed.) Prince is currently the only program
that supports TrueType web fonts, but it provides the proof of concept we need to begin thinking seriously about web fonts—and to begin advocating for their implementation in common web browsers. Before we get to that, though, let’s take a look at the code beneath these examples.
(Disclosure: I’m on the board
of YesLogic, the company behind Prince. Being on the board is a neat way of pushing for your favorite
features to be implemented.)
The examples are coded in HTML and CSS only; no images are
involved. CSS3 multi-column layouts and rounded borders have been
added for good measure, but they are not essential to the designs.
Each example uses four different web fonts. The style sheets point to
web font files which are fetched before the documents are rendered.
Web fonts: the code you’ll use#section4
Here is a simple example of how to use web fonts (Line wraps marked » —Ed.):
@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/ »
kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }
Those familiar with CSS syntax will recognize the last line. The@font-face construct may not be familiar, however it’s easy to
explain: as the “Kimberley” font is requested, the font file
is fetched from the specified URL. The syntax is described in the
CSS2 specification.
To avoid long lists of @font-face declarations in the style sheet,
they can be hidden using @import (Line wraps marked » —Ed.):
@import url(http://www.princexml.com/fonts/ »
larabie/index.css) all;
h1 { font-family: Goodfish, serif }
The TrueType files used in the examples above are designed by Ray Larabie. He is a renowned
font designer who has made hundreds of interesting TrueType fonts
freely available for use on the web. His fonts are elegant,
decorative, and playful.
Dieter
Steffmann is another great font designer. He, too, has made many beautiful fonts available for anyone
to use. Below are some examples that use his fonts:
Getting more complicated#section5
When browsers start supporting web fonts, designers will be tempted
to adjust more properties than just font-family. In the examples shown
above, line-height, letter-spacing, word-spacing, and absolute
positioning have been tweaked.
This adjustment of other properties works well when the specified
fonts are fetched from the web. However, it may have unexpected
results in browsers that don’t support web fonts, and web designers should always
be make sure their pages degrade gracefully.
The most obvious way to ensure graceful degradation is to
specify a list of similar font families. For example, Ray Larabie’s “Primer Apples” is a charming, stitched font. You can see it
used in this example:
“Primer Apples” has no obvious replacement in the list
of fonts normally used on the web. However, the font metrics are quite
similar to the ubiquitous “Trebuchet” font which can be specified as an
alternative (Line wraps marked » —Ed.):
font-family: "Primer Apples", "Trebuchet MS", » sans-serif;
In a legacy browser without support for web fonts (or multi-column
layouts or rounded borders), the second example will look like this:
Screenshot of web page without support for web fonts.
The stitching is gone, but the degradation is graceful.
A proposal to the W3C: a media query for web fonts#section6
To further limit degradation, it would be useful to have a media query for web
fonts. Consider this example:
h1 {
font-family: "Trebuchet MS", sans-serif;
letter-spacing: 0.1em;
}@media all and (web-fonts: "truetype") {
h1 {
font-family: "Primer Apples", sans-serif;
letter-spacing: 0.2em;
}
}
As a result of the media query in the example above, the actual
letter-spacing will depend on whether web fonts are supported or not.
It is also necessary to specify, in the media query, that support for
TrueType is required. The “web-fonts” media query is not in the W3C’s
current Media
Queries specification and it has not been implemented by anyone.
But it’s a great idea, and very doable.
What does this mean in the real world?#section7
While Prince offers a neat proof-of-concept, common web browsers must
also add support for web fonts in order for them to become the next
big thing. So why haven’t they done so already?
The arguments against web fonts are mostly legal. Fonts are
intellectual property and therefore, the argument goes, cannot be
published on the web. Although the legal status of font shapes is
uncertain, font names are probably covered by copyright law. As such,
fonts are similar to copyrighted images and text. To publish
copyrighted material on the web, you need permission from the
copyright holder. There is a lot of text and images on the web because
copyright holders allow it, even encourage it. Likewise, many font
designers (including Ray
Larabie and Dieter Steffmann, whose fonts I use as examples in this article) allow
their fonts to be freely used on the web.
The best argument against web fonts, however, isn’t legalities—it’s aesthetics. Do we want to wade through web pages displayed in
third-rate fonts put together by designers who once used the
<blink> tag and created backgrounds with animated GIFs? Probably not. Once web fonts are available, make sure you use a browser in which author style sheets can be turned off. (Another disclosure: That would be Shift+G in Opera.)
Aesthetics also provide a strong argument for web fonts. There
are many beautiful and interesting fonts that can improve aesthetics
and increase visual variety on the web. Just as I am sometimes stunned
by beautiful book designs, I want to be overwhelmed by beautiful web
pages. And, I don’t want those beautiful pages to be made up of
background images.
You can help!#section8
Two things must happen before web fonts can take web design to the
next level. First, we must ensure the validity of the approach. Is the
subset of CSS2 that has been implemented sufficient? Do we like the
CSS code? The best way to help is to play with the
existing implementation and report back on your experience.
Second, we must convince browser makers to add support for web
fonts. This can be difficult. Browser vendors have lots of
specifications and well-intended improvement proposals to choose from.
Some of them are also busy fixing bugs. In order for new functionality
to make it onto the roadmaps, a compelling story must be told, and a
critical mass of developers must voice their support. We can make it happen.
CSS has been around for ten years, and is likely to be around for
another decade. Let’s finally give it some fonts to work with!
Your suggestion to change letter spacing in @media rules is interesting, and not a feature I would oppose, but I feel it falls short of solving certain problems.
For example, if the user has the desired font but their browser doesn’t support fonts downloading, they won’t receive the rendering even though they potentially could. Why not integrate all font properties into @font-face, such that each font-family can be given suitable modifications? This idea came to me years ago when I stumbled upon a (now non-existent) page detailing the horrors of spacing and other rules designed for Verdana when viewed on Linux systems without the font. The details should be tied to the font itself, and only separable from it at the designers discretion.
This framework could also be extended to point to different files for italics and various weights if necessary, again each featuring their own font declarations.
However far we might go in this direction, it believe that @font-face is the more logical location for this kind of information.
“¦ the occasional Mozilla Firefox/IE/Safari/Opera updates also installed a few decent free fonts like Gentium? It wouldn’t be a final solution though.
The name of a font is certainly not copyrightable. On the other hand the font name may be trademarked. However, the font itself is almost certainly protected by copyright as it is a series of instructions of how to create each particular glyph.
Whenever I discover people saying or writing amazingly wrong things about intellectual property rights I am reminded of a friend of mine who believes that all of the chinese restaurants in the anglosphere could have their menus in written in correct English for the cost of an eggroll if they would run it by a fourth grader before sending it to the printer. There really is no good reason for such wrong-headedness regarding intellectual property issues in a world with Wikipedia.
For those that haven’t noticed yet, “Apple just released Safari 3.1”:http://docs.info.apple.com/article.html?artnum=307467 with support for @font-face embedding. This whole issue makes me think of the “open letter to Adobe, Apple, and Microsoft on Design by Fire a few years ago”:http://www.designbyfire.com/?p=30 . And really it makes me think about the future of typography, especially that which is released in the public domain. I even wonder how personal typography might become, if it might become more practical for individuals to create typefaces based on their handwriting or unique style. With OCR technology and tactile interfaces, it might become possible to handwrite text on a tablet interface, have the computer convert that to digital characters, but then render them using the “typeface” it has learned from you.
Copyright is completely irrelevant to this discussion. If you can use Zapfino in Photoshop to create an image for the Web brower, you can write “Zapfino” into CSS to create some text for the Web browser.
When a type foundry sells a font to a computer user, that is for the user to use in their own publications and designs when they are authoring documents, it has nothing to do with reading documents. For example, I can pick up today’s New York Times and if it is printed in a typeface that I haven’t purchased and don’t have the right to use in my documents that is just fine … I’m reading the NY Times, not writing or publishing it. If a user’s Web browser downloads a font to show them someone else’s publication or design, that is reading, not authoring, and there has never, ever, in human history, been a precendent for the reader licensing fonts before they can read a document.
When the Web first went mainstream, there was a bugaboo about the fact that technically, a person’s computer was making a copy of the content of a website in order for them to read it. Downloading a font that will be used to render the current Web page is the same thing.
@Fred: copyright on fonts is sketchy at best anyway. The US courts in particular have consistently struck down any claim of copyright in a typeface, as they consider type to be a functional work, but not sufficiently novel to patent either. In effect, they’re saying that all typefaces are derivative works of the original Greek alphabet and hence not deserving of copyright protection.
For this reason foundries don’t actually claim copyright in the typefaces themselves. Instead they claim copyright on the .ttf file (or whatever) as a piece of software. Then, when you buy the right to use the software, they make you click “Agree” to an EULA which prohibits you from uploading the file to your website. If you want your users to see your font over the web, then you need to send them that file, and the EULA says you can’t.
Australian copyright law doesn’t mention typefaces at all, and the FAQs from our copyright office advise us to treat it as software. I think that characterising a bunch of declarative code that executes nothing and merely describes the shape of a non-copyrightable typeface as software is a stretch, but there you go. In practice, it’s simpler to avoid getting shouted at by the old foundries and work with the new ones on more equitable terms.
I develop my own fonts, and would be more inclined to add OpenType features if there was more support for them from applications like Opera and OpenOffice.
I would like to see support for OpenType Features in Opera. Firefox 3 already supports ligatures by using code like this:
[code]
[/code]
OpenType is also useful for Small Capitals, OldStyle Figures, Stacking Fractions, and Super/subscripts.
While I was reading up on browser’s fonts resolution algorithms (not really finding much to read) wanting to improve my story on “font resolution and glyph substitution in browsers”:http://www.undermyhat.org/blog/2009/09/understanding-font-substitution-in-browsers/ I came across this post which proved an excellent read on the side of “what can be done if…”.
10th anniversary is gone, enter the 12th anniversary: Safari and Firefox 3.5 now support font embedding through type-face. It isn’t perfect (glitching), but it’s a start. Perhaps a good time for an update? The “if”-part of the story has become reality, it seems 🙂
What I missed or overlooked in your story: CSS 2 allows the browser to automatically locate an online source for a font (based on the font-family). However, so far I haven’t seen any browser doing that. Obviously, when it comes to legal issues, this requires the font to be freely available or part of the browser’s legacy.
_— Abel —_
I’m very new to web design. Still attending CC for my certificate. I have an html doc that dreamweaver was used to create & has some inline css for the fonts chosen. Font in a red suit for 1st choice in size 36 no headings, 2nd choice is papyrus bold no headings for the title. I have a small amount of text that I only want to be in papyrus bold. I can’t seem to figure out where to place the @font-face code etc. or what exactly it should be, even after reading & re-reading every single piece of info on the web. I think I might need someone if at all possible to look at my code. I used the drag & drop features of dreamweaver to create it, because I am just not good enough at writing the html yet. I can’t use external style sheets because this is for en ebay template. eBays system is copy & paste for html. So once again my css is inline. I’ve tried dropping the font files into the font generator from fontsquirrel , but just keep getting an error with a red X in a box. Some of my text was done in photoshop because that text wont ever change so I made it part of the images. But some text will need to change on a reqular basis, & also needs to be searchable through tags in eBays system so it can’t be an image. How can I find out what the exact code should be & where to place it in the html doc? Thank you for any assistance! Stacey
firefox 3.5+ and safari are now supporting opentype web fonts. Yay – come on microsoft – we’re waiting!
I think I’m a little late in my discussion, but in case of someone read it, I would like to know which browsers support web fonts.
Thanks!
I definitely agree with the new “wave” of web fonts, however I am sure this will happen in time, easy and steady, but will 100% happen.
It’s nature, things evolve, from animals to,well yes, web fonts. 🙂
Anyway, awesome article.
as a designer i would definitely love to use some ttfs but I would keep it minimal perhaps on the website tagline and maybe headers but i would stick to the web safe fonts on the content and stuff just to keep it readable for most people.
since this article is from the person who originally proposed css then it is given that this argument is legit and comes from experience.
fonts are truely part of the aesthetics of a website but the concern for readers and browsers that dont support the technique should be prioritized over the aesthetics. . .
all in all, we web designers must balance these factors and try to always have a semantically structured mark up while having a browser compatible and readable website content and a beautiful website
create websites that are important and usable and if it is important and usable dont hesitate to make it beautiful
as a professional, I am using EOT fonts since the “last century”.
(www.hyphenator.com/examples/ROSETTA STONE.htm
http://www.astrotime.org/Creando_AstroTime_IE_.htm)
.. but today I cannot obtain this basic idea to work, both in FF.3.6.9 and IE6
the default fonts only are layed out by the browsers.
What’s wrong?
..
@font-face { font-family: “ledboard”;
src: url( “http://www.astrotime.org/LEDBDREV.TTF” ) format( “truetype” );}
H2 { font-family: ledboard; font-size:30px; }
</style>
</HEAD><BODY>
prova font
..
As on 19th of March 2011, I am thinking about to implement the @font-face rule in the relaunch of my website, just to learn that internet explorer 8 (tested on win xp) still does not support downloading fonts? Is there some workaround, e. g. that I use another font-format than WOFF for Internet Explorer?
Thanks for the insightful article, we are just starting to use them and are happy with the flexibility they offer.
As a primarily print-oriented graphic design student coming fresh into the field of web design, it is a relief to know that there is a simple way of having beautiful typefaces on the screen. It is quite a chore to go through the trouble of creating an image or background to have the font you want on the page. It is so much more comforting to know that the text is simply editable without having to pull out image-editing programs every time. Although the web is slowly becoming a much more visually appealing place to be because of the refined typography and better design in general, I do believe that there should be rules as to which ones are able to be used. The web is primarily used for sharing information, and so readability and other basic rules of good typography should still be the most important. The last thing anyone wants is to be flooded on the web by gross fonts that are too over the top or simply illegible. In print, it is not so much of an issue as people are already accustomed to seeing printed work as “art”; however on the web it is less practical to have such artistic pieces.
Thank you for the great article!