CSS @ Ten: The Next Big Thing

by Håkon Wium Lie

117 Reader Comments

Back to the Article
  1. As someone who despises being forced to be a box-stacker and “Arial, Verdana, sans-serif” fanatic, I love the possibilities of web-based font displaying becoming more universally-available.

    Of course as a professional in the design world I will always prepare for the out of date and stubborn viewers. But this is like a light coming on in the very free and diverse world of web design.

    And with regards to the worry that mom-and-pop people will use this poorly, it’s going to be such an industry-deep function, it’ll be off their radar.

    I’ve tried it with some standard and some foofoo fonts, and the only major issue I can see is tweaking with the sizes to eliminate the harsh pixelization. “Point” size is far better than “pixel” size declarations for text. And anti-aliasing is not gonna happen for a long time. if ever.

    But I will enjoy this and share it with my peers in the biz!

    Copy & paste the code below to embed this comment.
  2. This sounds unbelievably helpful, and yet I can see where concerns could be founded; I myself am doing a redesign of a website (the original pages were created by the client) which had the exact problem mentioned in the article. The old page’s body text was Papyrus. Ouch. Not only ugly, but not everybody has it installed, causing the page text to default.

    All the same, the pro’s outweigh the con’s. I would really like to see this implemented, and am willing to help!

    Copy & paste the code below to embed this comment.
  3. As much as I’d like to play with fonts isn’t it quicker to design an image graphic – and it seems like you’d have more options as to how to arrange the text if designing an image. I guess it’s another arrow in the quiver for web design but when I really think about it – I’d probably just stick to making images.

    Copy & paste the code below to embed this comment.
  4. True, some people will screw it up (I may be on that list once or twice, my page’s while never myspace-horrid, have been called “ugly” before). However, I agree that content will be just as important. One thing I have noticed though… When the content’s worth it… An ugly page will get better. Even mine improve over time, because I, and the very small number of people who frequent the page, want two things:

    Good content: Already there in most of our opinions…

    A easy and (in some cases) pleasing way to see that content:

    I have a mind that says “Don’t make a web page you won’t use yourself”. I don’t know how well that goes over for people who make a living in web design, but as a amateur designer, I think its important. If its a blog, fan site, or creativity [removed]like a web comic or story writing or art gallery) site, why make it if you won’t go back to it yourself. True you’re going to be putting it together for others to see, but there are several reasons to go yourself.
    If its a fan site, it should have reference information to what its dedicated to.
    If its a blog, blogs are like journals, and few journal keepers I know NEVER go back and read.
    If its a creativity expression site, at least at the beginning you’re showing it to your friends, and is a great alternate storage place as well. Its a great way simply to access the images/stories/comics/whatever when you aren’t near the originals. Any build-on-itself creativity can benefit from the creator having a simple access to previous material when on the road, or even at the coffee shop.

    So why make a site you can’t stand to look at? However, I’m constantly by friend, acquaintance, and enemy described as having The Crazy but hey.

    It makes sense to me. I’m by far on the geek and logic side of computer and web use, but even I feel the need for the occasional aesthetic. This is a simple way.

    As for Joseph Lundeens bit:

    I don’t see how it wouldn’t be quicker. Providing images means sitting at Photoshop or The Gimp and tweaking and tweaking, then using the image in the draft page design, and if it doesn’t fit or behave when you test other resolutions… you have to go back into your image manipulator and tweak some more. As a font, simple applications of the text become no harder than when using a basic font on the “general” list. Your tweaking is restrained to your favorite text editor, and a couple web browsers for preview.

    Some applications of artistic text are different. They really have to be in places and styles related to an image, those should go in the image. However, If I can make my Header, and Headings stand out without cramming my web server full of images. I don’t want to.

    I see this as making page loading faster, and another step towards “keeping the pretty screen without molesting the printer”. If your fancy text is an image, even putting it in the CSS as a background image for a div means that TEXT isn’t there when you build a simple image less print format css, or you’re slamming people who print section of your pages with images that take lots of ink, and on a black and white or low dpi printer maybe unreadable anyway.

    Copy & paste the code below to embed this comment.
  5. I noticed the main argument was aesthetics.  This is the first thing I thought about when the idea of web fonts first found my interest.  I thought about it a bit differently though.  I thought about all those individuals out there with Frontpage who wanted a website and used a combination of primary colors and animated clip-art to make it happen.  But instead of thinking of this as a bad thing I thought, as a designer, it would create a higher demand for good design.  With all these schmoes out there using Papyrus for their body copy well designed sites would be a high commodity. I can hardly wait for web fonts.  Especially for those people that pay for bandwidth on a per kilobyte basis.  This would save people in the UK using their mobile phone for surfing a whole lot of money while enabling them to see your beautiful site.

    Copy & paste the code below to embed this comment.
  6. If you increase the design tools available, you increase the number of bad designs available for people to try, yes. But you also increase the number of good designs people can create as well. And individual bad designs don’t survive, even if bad design in general does.  Individual good designs, on the other hand, continue on.  So who cares how many corporate websites could end up out there?  If someone makes a bad design, do what people have done throughout history and vote with your eyes (or wallow in kitsch, if appropriate).

    In a way it doesn’t matter whether or not the web ‘needs’ more typefaces – we’re going to get them (eventually).  More and more people read on the web – eventually the web will be the primary place in which contemporary postmodern society gains its information.  Are we going to express the bulk of human experience through a few typefaces?  Are we going to expect people to limit themselves in this one aspect of web design while widening field in other directions?  And how the heck would type foundries continue to make money if print designers (who buy typefaces from time to time) are replaced by web designers (who don’t)?  This is an eventually-inevitable change, no doubt of it.

    The trick is that someone has to find a way through the copyright law jungle.  Most likely some forward-thinking type foundry in combination with a type-friendly software company.  But someone’s got to put the legal pressure on – hopefully that’s what Apple’s up to by adding @font-family to Safari through Web Kit . . ..

    Copy & paste the code below to embed this comment.
  7. I am not able to put music on this site I am working on. I have never done it before. I have followed all the instructions. The player shows up, but the file cannot be found? I do not know what to do and need help. Please advise.

    Copy & paste the code below to embed this comment.
  8. I appreciate that fonts are protected by copyright law, but so are images and music, yet they’ve managed to make their way through the web to users.

    The only reason I can see why imported fonts aren’t supported is, unlike images and music, the only people who know enough to explicitly want non-standard fonts (designers) don’t represent enough of a voice to make the feature hit the browser development road map.

    That, or the font manufacturers are just that god-like powerful. :\

    Copy & paste the code below to embed this comment.
  9. Actually, there is another alternative now. You can use True Font Family to render images through 100% CSS. It works on all major browsers (IE/Firefox/Opera/Safari) and when TrueType fonts are finally available you do not need to make any adjustments to your stylesheets.

    I have taken the liberty to add True Font Family to these examples. You can check them out online over at:

    http://www.truefontfamily.com/?p=alistapart

    No modifications have been made other than adding the required JavaScript. And the imported stylesheet with the @font-face rules had to be moved to the same domain in order to allow JavaScript to read it.

    Copy & paste the code below to embed this comment.
  10. SIFR is indeed a good way of using your favourite fonts on a web page. However, I feel that it is only a stop gap until the real problem of using fonts online is rectified. Have you ever tried copy and pasting a mixture of normal and sifr text from a page? As far as I can tell, it can’t be done.

    I think there is high probability that opening up web fonts will be abused, but that’s why people like us have a job, to ensure that it doesn’t. Personally I can’t wait for a proper solution to this problem.

    Copy & paste the code below to embed this comment.
  11. 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.

    Copy & paste the code below to embed this comment.
  12. “¦ 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.

    Copy & paste the code below to embed this comment.
  13. 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.

    Copy & paste the code below to embed this comment.
  14. 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.

    Copy & paste the code below to embed this comment.
  15. 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.

    Copy & paste the code below to embed this comment.
  16. @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.

    Copy & paste the code below to embed this comment.
  17. 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:
    <p style=“text-rendering: optimizeLegibility; font-family: Palatino Linotype; font-size: 60px;”> 

    OpenType is also useful for Small Capitals, OldStyle Figures, Stacking Fractions, and Super/subscripts.

    Copy & paste the code below to embed this comment.
  18. 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 —

    Copy & paste the code below to embed this comment.
  19. 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

    Copy & paste the code below to embed this comment.
  20. firefox 3.5+ and safari are now supporting opentype web fonts. Yay – come on microsoft – we’re waiting!

    Copy & paste the code below to embed this comment.
  21. 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!

    Copy & paste the code below to embed this comment.
  22. 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.

    Copy & paste the code below to embed this comment.
  23. 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

    Copy & paste the code below to embed this comment.
  24. as a professional, I am using EOT fonts since the “last century”.
    (www.hyphenator.com/examples/ROSETTA STONE.htm
    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>
    <H2>prova font</H2>
    ..
    Copy & paste the code below to embed this comment.
  25. 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?

    Copy & paste the code below to embed this comment.
  26. Thanks for the insightful article, we are just starting to use them and are happy with the flexibility they offer.

    Copy & paste the code below to embed this comment.
  27. 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!

    Copy & paste the code below to embed this comment.