All entries from October 2008

Display:

Dates

  1. 2007
  2. 2008
  3. 2009
  4. 2010
  5. 2011
  6. 2012
  1. Feb
  2. Mar
  3. Apr
  4. May
  5. Jun
  6. Jul
  7. Aug
  8. Sep
  9. Oct
  10. Nov
  11. Dec
  1. @font-face in IE: Making Web Fonts Work

    All Hallows’ Eve seems the perfect time for something a little spooky. Getting @font-face working in IE may just be spooky enough. As you probably know @font-face already works in Safari 3 via WebKit and is supported in the latest Firefox 3.1 beta. With IE, that means around 75% of the world audience could see custom typefaces today if their EULAs allowed it. Fortunately, there are good free faces available to us already, as well as some commercial faces that permit embedding. Fontin is one of them and I’ve built it into this example page:

    Before we get into the nitty-gritty of making this work, which you can skip to if you wish, I thought a little history and a brief summary of the current status of the web fonts debate might be useful.

    Web Fonts: Then & Now

    Web fonts have been with us for a decade. They were an original part of the CSS2 recommendation in 1998. Recently, the godfather of CSS, Håkon Wium Lie, brought them sharply into focus with articles in CNet and A List Apart. The ironic thing is, IE has supported web fonts using the Embedded Open Type (EOT) format since 1997. The problem was that EOT was a proprietary format, belonging to Microsoft. Not for much longer: it’s been submitted to the W3C and is going through the process towards becoming a web standard.

    Since the debate opened up, the web and type communities have both been busy discussing how the future will unfold. More collaboration between the disciplines would be beneficial to both, and I’d encourage any interested designers or developers to get involved with organisations like the Association Typographique International (ATypI).

    Recently, Bert Bos of the W3C paid a visit to the ATypI Conference in St Petersburg to meet with type designers face to face. His summary of the current situation is essential reading. The debate has continued apace on the ATypI mailing list, which unfortunately has no public archives. However, if you are member of the ATypI, you can see this summary about the conference panel on web fonts by Nadine Chahine that started the debate in earnest. Simply put, type designers seem anxious about @font-face linking making it too easy to steal a font. Both Microsoft’s EOT format and direct font linking are under consideration with EOT a favourite with many. However, rather than paraphrase a wide-ranging set of opinions, I’d encourage you to join the ATypI yourselves as designers and developers to participate or observe.

    If you have other favourite comments or posts about the future of web fonts, please add them to the comments.

    As a designer, I want a straightforward way of licensing and including fonts for my work. I will pay, respect the rights of type designers as I expect mine to be respected, then get on with the glorious business of merging content with type. It’s not as simple as it sounds, though. The licensing of fonts, and the protection of the rights of smaller designers in particular, is a sticky issue. DRM does not work, so what then? Richard Rutter has shared thoughtful insights which are very much worth a read. My view is that I would be perfectly prepared to pay a separate or extra licence fee to use quality fonts on the Web. I would have no problem selling this to my clients. Embedding or linking to fonts has to be straightforward though. I get paid to think about, plan and implement design, not grapple with obstructive software (more on that later). If fonts were delivered through a third-party web service as Richard suggests, the one proviso must be that it would have to be done by someone who knows exactly what it means to scale a service for millions of users. Like most designers though, I have very little knowledge of the real security and scalability issues, but hope to see a comment from a real security expert, shortly.

    User agents are currently taking divergent routes. Bert Bos’ summary reports:

    Mozilla has stated that they don’t want EOT. But they are not opposed to letting the browser check the license, as evidenced by the proposal to let HTTP headers carry license data.

    Microsoft has said that it is impossible for them to support linking to native OpenType as long as font vendors oppose it.

    Apple’s Safari has implemented font download with no checking of licenses. They said they are against EOT, but would not be against browsers checking licenses, e.g., using Mozilla’s proposal.

    Opera remarked that there are more existing and announced implementations for downloading native OpenType than for EOT. They conclude that the market apparently doesn’t need EOT and thus they see no need to support it themselves either. W3C’s limited resources should be spend on more important standards.

    That means that designers and developers have the same perennial problem: Two different implementations to achieve the same result. Safari 3 and Firefox 3.1 beta both support direct linking to OpenType (.otf) font files. Presumably Opera will soon. Only IE 4 to IE 7 support Embedded Open Type (.eot) files. IE8 does not, but will at some point. So, to see Fontin display in standards complaint browsers like Safari 3 and IE, we need to provide two separate fonts.

    @font-face Example

    The @font-face example uses Fontin Regular by Jos Buivenga — a free face kindly provided by Jos with a licensing permitting embedding with attribution. Jos also has many other fine faces available via his foundry site, Exljbris. The example is a quick one using a traditional scale, with all of the CSS available in the <head> of the file.

    1. Set the basic font-family:

      h1, h2, h3, p, td{
      font-family:'Fontin-Regular', georgia, serif;
      }
      

      Notice the 'Fontin-Regular' name — this is an arbitrary name that can be whatever you like. All it does is tell the browser when to apply the font file referenced in the @font-face rule.

    2. @font-face and .otf for standards compliant browsers:

      Ed: White space inserted for clarity.

      @font-face{
      font-family:'Fontin-Regular';
      src: url('Fontin-Regular.otf') format('opentype');
      }

      Note the 'Fontin-Regular' name, again. This rules basically tells the browser, when the @font-face is set to 'Fontin-Regular', use the font found at this URL.

      Screen sample of Fontin Regular in Safari 3 set at 16px with 24px line height from the example:

      Fontin in Safari 3

      When Safari renders the page, it will look for the font file, then render the text accordingly. There’s a slight delay as WebKit works. In the example you might notice that the text not requiring the loading of a font file renders quickly, but the rest is blank until the browser catches up. For reference, the Fontin-Regular.otf file is 32KB in size. Some font files can be much larger.

    3. Create the .eot file with WEFT:

      To do this you will need to download and install WEFT3, a Microsoft application for creating EOT files from TT fonts. WEFT is not able to create EOT files from an OTF. It must be converted to a TrueType file, first. WEFT is the only tool for this as far as I’m aware, although I believe there is an open source one in development. If it wasn’t for WEFT, embedding EOT files would be easy. What I want WEFT to do is convert the font to EOT, and allow me to create a subset if required. It does that, but in a nightmarish, frighteningly over-complicated way. Perfect for an All Hallows’ Eve entry. Here are a few tips I learnt the hard way:

      1. WEFT requires the URL of the page or site where the EOT font will be used. It will then ‘scan’ the pages by crawling the site to see what glyphs are used and try and create a subset of the EOT file accordingly. If it refuses to analyse a valid URL as it did for me, get granular and specify pages or sub-directories in your information architecture.
      2. If you’re using WEFT via Parallels and XP Pro, it may refuse to add some fonts in your windows/fonts directory to its database of available fonts. Try using a standalone PC if you can. I haven’t tested in any other virtual machine.
      3. Use the wizard to set up your project, but after that try it manually using the View menu item to see what fonts are available to convert, and the Tools menu item to convert them.
      4. WEFT will try to save the EOT file to a remote location. You can over-ride this manually to save the file wherever you please for you to upload yourself.
      5. Disable your original OTF fonts on your system before testing (obvious but worth a prompt).

      Be warned, WEFT is awful to use, in every way. It did not work for me running Parallels with XP Pro on a Mac. 7th Nov: After more experiments, Weft will accept TrueType (.ttf) files in Parallels. It also worked with the gracious help of Jon Gibbins and his standalone PC running XP Pro. Because it is so painful, I cannot give support for WEFT. You can try the Microsoft WEFT user community, but I can’t comment as to its usefulness, and I could not find any other support avenues.

      Hopefully, you now have an .eot file to use.

    4. @font-face and .eot for IE using conditional comments:

      Ed: White space inserted for clarity.

      <!--[if IE]>
      <style type="text/css” media="screen">
      
      @font-face{
      font-family:'Fontin-Regular';
      src: url('Fontin-Regular.eot');
      }
      
      </style>
      <![endif]-->
      

      These are screen samples from IE:

      Screen sample of Fontin Regular in IE6 set at 16px with 24px line height from the example:

      Fontin in IE6

      Notice the bar missing from the capital ‘A’ towards the end of the second line. The tyepface designer, Jos Buivenga is currently looking into the font hinting, with input from John Boardley.

      IE7 sample:

      Fontin in IE7

    See a full size Safari 3 screenshot, and IE6 screenshot on Flickr.

    That’s all! Try the example in different browsers to see how it works for yourself (but please don’t blame me for ClearType’s poor anti-alias at larger font sizes).

    Summary

    We have only a few web fonts with a EULA that permits embedding right now, unless they are free. Please respect the EULAs of any typefaces you try out until the type community resolves the issue for all commercial fonts.

    My feeling after doing this is that EOT has potential advantages in file size over OTF, but OTF files could always be edited (as far as I’m aware) to create subsets just like EOT. Although EOT is not a DRM solution per se, it feels like one. If it achieves widespread acceptance, no doubt some clever soul will be reverse-engineering an OTF file from EOT before too long.

    What we need to encourage designers and developers to use EOT today is a good tool to create EOT files in the first place. Perhaps even one hosted remotely, where we can buy a licence, convert the font to EOT, grab the same OTF subset for complaint browsers, and get the work using the typefaces we’ve always dreamed of. WEFT is not the tool right now to enable EOT usage. In fact it discourages it.

    Regardless of what security is implemented, the font file will have to be on the audience’s machine somewhere, even temporarily. ‘Defense in depth’ is a term used by web app security experts. It would seem that the question is how much depth will satisfy foundries and type designers, and what form that depth will take.

    As a designer, I can only speak for myself to say that if OTF and TTF were supported, regardless of how easy it was to steal the file, I would still pay as required by the EULA. I have a strong feeling the vast majority of my colleagues feel exactly the same.

    Share

  2. Flipped Types

    Typesetting-Printing Office. Digital ID: 1152640. New York Public Library

    Sometimes, flipping things around can be a useful mental exercise. It can raise a wry smile. An idle comparison between print and web typography was one of those times.

    Imagine this: A client gives you a detailed brief and the content to go with it. You choose the type and design the layout, applying all of your craft and skill to every last detail of the work. With the help of a rendering expert, you specify precisely what device, screen, operating system, colour profile and browser the finished work will be viewed with. You test your work in that environment and make necessary adjustments. It’s distributed to the audience who see it exactly as you expect. That’s print typography.

    Now imagine this: A client gives you a detailed brief and the content to go with it. You choose the type and design the layout, applying all of your craft and skill to every last detail of the work. Two files are given to the audience: one with content, the other with detailed design instructions. They pass both files to their printer. The instructions ask for a specific typeface to be used. The printer may or may not have it, but will never tell anyone, so you specify a few alternatives, just in case. The audience chooses the kind of paper to use, and what size it will be. They also tell the printer what personal preferences they want applied to the design, like making the text size smaller or larger. Your work is printed for them. You never see it. You’ve already resigned yourself to the fact that it will look different for different people. By testing your work in a broad range of environments before you sent it to the printer, you’d like to believe it will look good for most people, and adjust itself gracefully. Not to worry though, someone will probably tell you in no uncertain terms if you get it wrong. That’s web typography.

    Image courtesy of the New York Public Library digital gallery, entitled Typesetting-Printing Office from Working with the hands : being a sequel to ‘Up from slavery’, covering the author’s experiences in industrial training at Tuskegee (1904) by Booker T. Washington.

    Share

  3. Twitter :focus

    Tiled background using the letters of 'twitter' to make up different words.

    The preceeding image contains words formed from some of the letters in, ‘Twitter’. They’re not anagrams because not all the letters are used in every word, but it was fun. It’s a seamless tile. If you have a use for it, please feel free under the usual licence. Just out of interest, the typeface seems to be a bespoke variant of Chickens by David Buck (SparkyType).

    I like Twitter because…

    It reminds me is that human beings are still tribal. As an example, if you check your own address book, or think about your family and friends, they probably number no more than two hundred people. We may have more in the book, but it’s rare for our intimates to be greater than two hundred people. Our networks are geographically dispersed these days. Even if your network is mostly in one location, people are so busy living that it can be difficult to stay in touch. Twitter is a facsimile of living and working in proximity for me, and provides something unique, too:

    Friends
    It may often be prosaic, but I like reading about the daily lives of people I know. The small details of peoples’ lives are often the most poignant. The ambient intimacy is priceless. Working alone in my office, mild doses of cabin fever are inevitable. I miss being around people. I miss being around people I like even more. Twitter brings them to me. If we like people for their good qualities, but love them for their frailties, Twitter helps us do both. Everyday it adds texture to the picture I have of my friends.
    Acquaintances
    It also introduces people to me I would not have met, and enriches relationships with people I’ve only met briefly. This can’t be understated in developing relationships with people. In many ways, it’s even better than geographic intimacy because I can turn it on and off. Rather than subjecting my followers to every detail of my day which would be painful if we were in the same room, I can moderate what I share. The same is true in reverse. If used judiciously, Twitter is priceless for getting to know people without being intrusive.
    Discourse
    Information comes my way that I’d otherwise miss. The things that are fascinating or important to people I care about or respect are delivered in short bursts. I can’t count how many interesting snippets have come my way through the fingers of those I’m following or followers’ direct replies. It’s akin to hearing people think out loud. There’s a freedom I think we all feel using Twitter that enables us to throw random thoughts and links out to the world. The fact they don’t impose unless the recipient wants them to might be something to do with it. It’s unobtrusive soap-boxing at its best.
    Narrowcasting
    If people have taken the time to follow a person or organisation, the chances are they are interested in what they have to say. However, the intent behind the content is important: There’s a fine balance between self-promotion and self-aggrandisement. One is the personal delight we take in sharing what we’ve done, the other is giving it the ‘big Billy Graham’ to encourage obeisance or be commercially manipulative. I appreciate it when people make announcements or share links that are relevant to me, or a delight to them. The same goes for organisations. But, if it feels like they wish to use me as a witness to their greatness, I always shy away.

    I’d like it more if it had…

    1. UK inbound SMS, again. The recent loss of SMS notifications was a blow. Like many people, I only used inbound SMS for direct message notifications. In the UK, the sender pays for SMS delivery, not the sender and the recipient like in the USA. Twitter had to bear the brunt of all charges; UK companies were too short-sighted to give a decent deal to a service that was extending SMS usage. Hey, it’s not like SMS is their most profitable service, or anything. Consider the amount of data in a single text message and how much they charge for it. For the same cost you probably get about a minute of call time transferring much more data. See what I mean? SMS equals huge profits.
    2. Friend filters. I’d like to be able to add many more people to my list of friends if I could. The truth is, when I’m head down with work, I struggle to keep up with those I follow right now. Allowing me to asign friends to groups and filter groups would enable me to track colleagues and close friends when I’m swamped but also dip into the lives of acquaintances better when I have a spare moment. Another filter in a similar vein is one all Twitter users miss: followers filters to be able to organise follows alphabetically, or chronologically, if nothing else.
    3. Hashtag filters. Hashtags are supremely useful in tracking topics — automatic linking would be good — but they could also be useful in ignoring them, too. Especially around conference time when the chatter can get overwhelming as people organise social stuff and live-tweet the talks. This is not rudeness, just signal versus noise filtering when I’m tethered to my desk.
    4. Link filters. I admit it, sometimes I’m only interested in the links people share. That would make me the hyperlink version of a gold digger, or you could say I love some people for their brain, more than their breakfast.
    5. Full archiving: I use Twitter like a narrowcast journal. The events and moments are worth remembering. Recently the archive got extended to 820 tweets, or 41 pages, but I’m pretty certain the rest are in the database; we just need a way of getting at them.
    6. (Last but not least:) Better use of :focus. Currently, the improved interface has no styles on :focus, and much more seriously, the reply, favourite and delete icons for each tweet are not available at all via the keyboard.

    Today and everyday

    I get more from Twitter than any other social web service. Take today for instance: I found out that Chris broke his toe playing football, Tim got clotted-cream fudge from a colleague, Paulo posted about his transsiberian journey, and Paul and John were spammed. ‘Eureka!’ moments they are not, and I’ve only met two of those folks in the flesh, but that’s exactly why the tweets are so valuable. I feel like I already know a little about people I’ve never met because of Twitter. Everyday life happens all the time, not just in the momentous or unique moments you remember to blog about. Perhaps that’s what Twitter is: the everyday social network.

    With a lot of help from Jon Gibbins my tweets also appear in the asides.

    I use it to watch friends’ lives unfold, and share the events of the day with colleagues. I guess I should say I’m jontangerine on Twitter. Feel free to follow, but I can’t promise to always give you the perfect signal. That’s the beautiful imperfection of Twitter posts though. If nothing else, they’re very honest, and everyone has a different voice. If you haven’t already, you should try it! If you’ve come across it already, how do you find it?

    Share