Share via

Colophon

  • Article

One often finds the colophon at the end of a book, but in the case of this blog it is only right to bring it out first thing

As this blog will be discussing fonts and screen readability—it only makes sense to take advantage of a feature in Internet Explorer called font embedding. This feature allows the font that the designer has specified to be used to view the web page. This is a superior solution to displaying the text as bitmaps because we are able to fully search the text as well as scale the text.

The fonts that we’ve chosen for this blog are based on a technology we developed called ClearType. Future entries will discuss technical and practical aspects of this technology, but for now we highly recommend that if ClearType is available on your machine that you enable this feature of Windows and you tune it for your preferences.

How do you do this? The easiest way is to follow the link in the left margin of this blog to the ClearType Tuning or install the ClearType Control Panel tuner.

Now a note about the type

For those of you using the font embedding feature, the body text is set in Microsoft’s new font Candara. Candara is designed by Gary Munch as a humanist sans with verticals showing a graceful entasis on stems, high-branching arcades in the lowercase, large apertures in all open forms, and unique ogee curves on diagonals. The resulting text is lively but not intrusive, and makes for a friendly and readable text. This font is suitable for email, web design, magazines, and informal settings.

The headline text is set in Microsoft’s new font Calibri. Calibri is designed by Luc(as) de Groot as a modern sans serif family with subtle roundings on stems and corners. It features real italics, smallcaps, and multiple numeral sets. Its proportions allow high impact in tightly set lines of big and small text alike. The font is suitable for documents, email, web design, and magazines.

For those using browsers without font embedding, the text face is set in Verdana. Verdana is Microsoft’s typeface family created specifically to address the challenges of on-screen display. Designed by world renowned type designer Matthew Carter, and hand-hinted by leading hinting expert, Monotype’s Tom Rickner, these sans serif fonts are unique examples of type design for the computer screen.

Comments

  • Anonymous
    October 19, 2005
    Interesting post... A few questions....

    What versions of IE support font embedding? How can I tell if I am viewing this page in the embedded fonts or in Verdana? To me, I don't think the font that is being displayed looks too good - mainly because some of the letters like 'w' and 'M' appear to have a lighter weight than other leters. This seems to affect readability.

    Can I download these new fonts from somewhere?
  • Anonymous
    October 19, 2005
    Easiest way to tell is look at a few key characters, Verdana cap 'I' has little serifs at the top and bottom, Candara doesn't. Verdana's cap 'M' has a raised apex, Candara has a splayed 'M'. Verdana lowercase 'g' has a single bowl, Candara has a spectacle 'g' with two loops.

    If you have Windows XP turn on ClearType as sugegsted.

    Fonts will come with Windows Vista and Microsoft Office 12 - not available for download.
  • Anonymous
    October 19, 2005
    Thanks - turns out I did have ClearType disabled (I thought it was enabled already). The font is the correct one, and it looks 10x better with ClearType enabled.
  • Anonymous
    October 19, 2005
    Yes, this new font looks really nice with ClearType enabled. But I fear it won't be that good in smaller sizes... Do you have any samples ? with 9 or 8 points sizes ?

    Then, I have a question : I have two screens in front of me. A CRT one and the LCD screen of my laptop. Both in 1600x1200.
    ClearType seems to work much better on my laptop. I came to the same conclusion with my monitors at home. Is it something which is going to be improved ? Or do you consider that most of the people now have - or will have - LCD monitors ?
  • Anonymous
    October 20, 2005
    >But I fear it won't be that good in smaller sizes

    Easy way to find out - in IE select view, text size, smaller or smallest. Set 'ignore font sizes' in the accessibility section of Tools, Internet options.

    ClearType will look best on an LCD, but most people feel that ClearType on a CRT looks better than no-antilaiaising or 'standard' antialiasing.
  • Anonymous
    October 20, 2005
    I thought ClearType was for LCDs only, since it takes advantage of the pixel layout in the screen. IMO ClearType on a CRT has always looked too blurry to be usable.
  • Anonymous
    October 20, 2005
    IMO ClearType looks OK on a Trinitron/DiamondTron CRT but is just too blurry on a standard shadow mask CRT.
  • Anonymous
    October 20, 2005
    There’s a certain level of user preference involved, but those who are using CRT and LCD side by side will certainly notice a difference.

    I think it's true that Microsoft has placed a bet on LCD (as have other font technology players notably Apple & Adobe). Looking at laptop sales vs desktops and LCD sales vs CRT’s I think it’s a safe bet.

    For those not using XP & IE & CT you can see what you're missing here... http://www.microsoft.com/typography/links/news.aspx?NID=5153
  • Anonymous
    October 20, 2005
    The comment has been removed
  • Anonymous
    October 20, 2005
    > a bit too blurry

    If you’ve not tuned your ClearType settings it would definitely be worth a try. Although in your case I don’t know if doing so will have an effect on your color calibration. For most CRT users the tuner can help you set ClearType to a less blurry setting.
  • Anonymous
    October 20, 2005
    The font-embedding "feature"?

    Which exact open standard does that comply with?
  • Anonymous
    October 20, 2005
    http://www.w3.org/TR/REC-CSS2/fonts.html#font-descriptions
  • Anonymous
    October 20, 2005
    From ...

    http://www.torontoist.com/archives/2005/10/the_typography.php

    “When Joe Clark starts attacking your blog, it means you've made it to the big time! This calls for a beer! Keep up the good work.”

    I'll drink to that! ;-)



  • Anonymous
    October 20, 2005
    tzagotta: “What versions of IE support font embedding?” All versions since 4.0.

    David Abbet, Mike Dimmick & al.: “IMO ClearType looks OK on a Trinitron/DiamondTron CRT but is just too blurry on a standard shadow mask CRT.” ClearType usually performs quite well on the aperture grill technology of the Trinitrons. On shadow mask CRTs it does not perform as well as LCDs—but...a significant number of people believe that it performs better than other forms of anti-aliasing.Tuning can sometimes help in this situations.
  • Anonymous
    October 22, 2005
    I wasn't "attacking" anything. I was, however, suspicious this was some kind of MSIE-specific feature that was implemented the wrong way (Cf. Mozilla-specific features implemented with -moz selectors, which some people think is OK and some don't).

    IIRC the @font-face syntax was deprecated (I'd have to ask Tantek), but in any event was so poorly supported that standardistas never bothered with it. Maybe that will change.

    I don't see how this is hugely different from simply specifying the ClearType fonts in one's CSS, as I've been doing on several sites for lo these many months.
  • Anonymous
    October 22, 2005
    Thanks Joe,

    You're right, it wasn't really an attack, I just liked that quote. But it did prompt me to look up the reference and it seems as if @font-face isn't in CSS 2.1. I hadn't heard that it had been removed from the standard so that's good to know. The use of embedded fonts is quite common in some regions, India being one, so I'm surprise that it's been removed and not replaced with anything more useful.

    As this blog is about reading on the screen I think it’s great that the team has chosen to demonstrate this little used feature, even though as you say in a few years time everyone will have the fonts. You might notice that Greg’s post uses true small caps taken from a custom embedded version of Candara – that’s something you can’t currently do any other way.

    Take care, Si
  • Anonymous
    October 23, 2005
    Here's what Tantek said (quoted with permission, obviously):

    joeclark: @font-face: deprecated or not?
    joeclark: it seems to be in CSS2 (sic) and CSS3 but not CSS2.1 (sic).

    Tantek: there are no test suites for it, and there aren't interoperable implementations AFAIK. therefore (because of the latter), it got dropped from 2.1. not deprecated, no, but immature, still "in development." consider it as you would any feature in a working draft
  • Anonymous
    October 23, 2005
    Tantek continues:

    What is likely to happen, since there are at least partial implementation(s), is that the feature may get subsetted to what has actually been implemented.

    The CSS working group would love to have anyone who is interested in @font-face help out with the CSS3 Web Fonts draft [...] direct people to www-style@w3.org for followup.
  • Anonymous
    October 23, 2005
    Joe, thanks for the follow-up. I appreciate it.

    Cheers, Si
  • Anonymous
    October 26, 2005
  1. Candara looks really bad without ClearType, much worse than Verdana/Tahoma (much like the "Verdana 10 with no work to make it look great on screen" that Mike Duggan posted earlier). How about you add some hints/etc. to improve that? Some people still have CRTs, you know - I'm using one to read this now (I do enjoy ClearType on my 144-DPI laptop though).

    2. ClearType works great on LCD, so-so on Aperiture-Grill (Trinitron) CRTs, and bad on shadow-mask CRTs. It's because ClearType depends on how sub-pixels are arranged inside the pixel.

    3. I really dislike the digits-like-lowercase-letters (with descenders and all) feature of Candara. I've never liked it in other fonts either.
  • Anonymous
    October 26, 2005
  1. The decision to “focus” on ClearType hinting instead of black and white hinting was a tough one for us. We internally debated this issue intently. Ultimately there were several factors that drove us to the decision we took. A) We designed these fonts from the ground up with ClearType in mind. Features in the outline design were created to enhance how ClearType works. This is analogous to the need to design new fonts when new types of media become available—such as photo typesetting. B) The time and cost of adding hinting for black and white is enormous. I can confidently say that these fonts would not be available for Windows Vista and we’d have fewer fonts if we had targeted black and white hinting. Likewise, there is no way we could have tackled our Japanese font, Meiryo, which we’ll talk about later. C) Fonts have a very long lifespan. We’re still using the fonts (and the hints) we developed for Windows 3.1 fifteen years ago. Looking ahead fifteen years from now, we think the decisions we made will have been correct. Meanwhile, Verdana and Georgia will still be available.

    2. A significant number of people think that ClearType on a shadow-mask display is still better than other rendering technologies.

    3. Old style numerals is an interesting topic, thanks for the idea. We’re working on a post right now to discuss this one.

  • Anonymous
    December 07, 2005
    Well your new font does look good with ClearType on, but everything else is hard to read, even with tuning. I'm runing a LCD (and have for years) but I've always found that ClearType just makes things harder for me to read.

    If Vista tunes ever font for ClearType I would be more then happy to use it, your blog shows just how well a font can look when tweeked that way. But if it's only a new fonts that get the tuning it will make it harder for people like me to use future versions.

    If you can tune the main UI fonts in Vista for ClearType (no need to do every font you provide) and default to ClearType on, most people will just notice how nice the fonts look, and not that some look a lot better then others.

  • Anonymous
    September 19, 2007
    I don't know if it's just me, but the space following end-of-sentence punctuation seems way too short to me when I am using Calibri. To some extent this may be because I at work, I am required by a style guide to place two spaces after sentences even when using proportional fonts. (I've explained why the style guide should be changed, but the customer cannot grasp it.)

  • Anonymous
    August 30, 2008
    Font embedding is an IE-only feature and can be used to limit the non-IE users. Take this page for example.  You embedded Candara but the CSS font declarations are all Verdana and Tohoma.  What this means is that users who don't use IE but do have Candara installed see this page in Verdana. IE-only 'features' should only be used in conjunction with standards-compliant coding.  Specify Candara for everybody, with appropriate fall-back font declarations (remembering non-PC users too), then embed the font for those who do use IE but don't have Candara installed.  That makes it a true feature, rather than just a way to penalize the non-IE users. A non-IE user's view, Howard Russell

  • Anonymous
    September 04, 2008
    Thanks for the feedback. I updated the CSS.