CSS @ Ten: The Next Big Thing

by Håkon Wium Lie

117 Reader Comments

Back to the Article
  1. http://www.lalit.org/lab/fontdetect.php

    Copy & paste the code below to embed this comment.
  2. I liked the article very much, but there is one thing I’d like to correct.

    • A typeface is the actual design & spacing of a family of characters.
    • A font is mechanism for recreating a typeface—This can be a digital file, molded letters, stencils etc.

    People who design Type are called Type designers. A completed family of characters they create is called a typeface . To recreate their typefaces, other designers use fonts.

    So it is accurate to say:
    In the future, designers will have the option to use more typefaces by allowing web browsers to download fonts used in their websites.

    Copy & paste the code below to embed this comment.
  3. With regard to the font-face and name copyright issue, those of us who have designed fonts which are available freely should have an option to make them available in a webfont format.  I think it appears to be quite the cop-out by the browser makers that this would be an issue.  Take for example another product, freely available (like most modern browsers), OpenOffice suite.  There is very little that can be done by M$ to thwart the use of said product, due to the fact that there is no profit except by those using the product.  Let us apply this to the use of a font from some foundry, which the designer of some website uses, whether purchased or pirated.  This is the designer’s responsibility, or in the case of someone rifling the font from his site, the end-user’s responsibility.  Legal BS by companies only goes so far, and they should accept the fact that there is always some bit of piracy for the larger portion of good citizens.  This should not stifle the improvement of the web experience by restricting the use of technologies over simple copyright, they only the provider of the translator, not the fonts themselves.

    Copy & paste the code below to embed this comment.
  4. “”“
    I am absolutely bummed by the amount of people who think this is a bad idea. I thought more designers read this zine/blog/site whatever you want to call it. The lack of foresight and fear of change by many of you is astounding. I’m truly disappointed in the so called “designer”? community here.
    “”“

    You said it.

    These arguments of “people will make ugly pages” are completely absurd.  They already DO.  It’s a good thing people with this mindset never prevailed or we’d all still be sitting around using “gopher”:http://en.wikipedia.org/wiki/Gopher_(protocol) and such.

    Very very disappointing crowd here for the most part these days.

    Copy & paste the code below to embed this comment.
  5. Rather than having fonts scattered all over the web at multiple URL’s which invites anyone to post and use a pirated font (and opens up security concerns), what we probably need is some sort of body to oversee the “web fonts” with a centralized font server.

    I’d hate to add more bureaucracy to the mix, but I think this is a solution worth investigating.

    That way all fonts are centralized, and can have some sort of authentication and review process. Font designers could submit their fonts for inclusion to the web fonts library, and a community could be built around the concept.

    Recommendations could be made on minimum font sizes for the busier fonts (doesn’t mean people will heed them, but they will be warned)

    This potentially would eliminate the need for the extra css code, as the css would first check on the local system, then check in with the font server. (seems like a minor update would take care of this on the browser side, too)

    As I said, this adds a layer of bureaucracy, but perhaps the w3c or some other organization could extend itself to take care of this.

    Of course, you can’t please all of the people all of the time, so some people wouldn’t like this setup, but it’s much better than what we currently have!

    Copy & paste the code below to embed this comment.
  6. As a developer who often gets involved in design issues, I often find myself torn.

    While having access to a multitude of fonts would be nice, being restricted in the way we currently are does focus things on clear and elegant design – which I think is a good thing.

    You only have to look at MySpace profiles to see what could happen if the floodgates were ever opened…

    Copy & paste the code below to embed this comment.
  7. Well not format – but something that would be encrypted that says “free for use” or not..

    Of course that would be a DRM thing.. And that just makes things more complicated….

    Of course it would all get hacked..

    Copy & paste the code below to embed this comment.
  8. Why would we have a central font server system? That’s plain ignorant. The load would be such as to make it financially insane to build and maintain. Not to mention that the custom font option would be rendered useless to designers, simply due to the fact that including even one custom font that had to come from a central font server system would slow down the page load to a crawl worse than dial up. Simply put, there is NO WAY that ANY centralized font serving system, EVEN without doing any processing that would add protections for copyright owners or whatever, would EVER be able to handle the load, NO MATTER HOW BIG IT WAS SCALED, to serve even a fraction of the entire web. PERIOD. Never mind that no matter how many users download a font and store it on their computer, there are a ZILLION fonts and a central server system would never shrink its workload due to this fact alone. People will continue to create new fonts, more fonts will get added to the registry, more fonts will be used by designers, and no matter how many fonts a user installs, they will hit the font servers every time some designer specifies a new font. There is no way to wrap a business model around that that could even come close to covering the usage scenarios. Never mind the startup capital just to keep the system from crashing and burning the very second it comes online. Sorry, bad idea.

    Copy & paste the code below to embed this comment.
  9. The only way I can think of that would work and protect font creators would be to require licenses on the server for the font in question that could be verified by a standard scheme, like SSL certificates. Font downloads would not happen if the license “certificate” is expired or fraudulent. The license could be simply signed using public/private keys that could be validated by the browser with the font designer’s public key.

    The only way I can think of to handle the demand in a secure way would be to use a decentralized registry of public keys for various font creators. The browser would cache the key data, so that verifying the next site’s authorized use of the font would be faster and not have to hit the registry system to look up the key.

    The registry system itself would be split into many trusted registries hosted around the world, much as the way in which DNS works. The browser would simply need to be able to query a root registry system once that doled out a geographically local list of trusted registry IP’s and then the browser could use the registries on that list to verify the public keys and download the font from the website they are visiting.

    I’ll grant, it’s not necessarily the most simple thing in the world, but it’s feasible and allows ample protections for both web designers/site owners and font creators.

    Such a system wouldn’t necessarily be limited to managing fonts, either.

    Though I think the whole DRM issue is moot, I figured I’d share what seems to me to be the obvious way to deal with it if the devil has his way. Maybe he’d do it this way instead of a much more evil and intrusive approach.

    Cheers.

    Copy & paste the code below to embed this comment.
  10. Thanks for the in depth coverage.  A colleage of mine passed a link my way about something like this a few weeks back.  Cool to see it in action!

    Copy & paste the code below to embed this comment.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. 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.
  21. 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.
  22. “¦ 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.
  23. 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.
  24. 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.
  25. 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.
  26. @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.
  27. 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.
  28. 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.
  29. 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.
  30. 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.
  31. 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.
  32. 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.
  33. 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.
  34. 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.
  35. 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.
  36. 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.
  37. 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.