CSS @ Ten: The Next Big Thing

by Håkon Wium Lie

117 Reader Comments

Back to the Article
  1. 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.
  2. “¦ 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.
  3. 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.
  4. 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.
  5. 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.
  6. @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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.


    Copy & paste the code below to embed this comment.
  12. 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.
  13. 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.
  14. as a professional, I am using EOT fonts since the “last century”.
    (www.hyphenator.com/examples/ROSETTA STONE.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; }
    <H2>prova font</H2>
    Copy & paste the code below to embed this comment.
  15. 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.
  16. 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.
  17. 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.