Firefox 3: Fonts and text

Browsers, Firefox, Mozilla, Work 31 Comments

[This post is largely written by Stuart Parmenter, with some light editing by me. Posted here because Stuart's away.]

When Mozilla developers decided to incorporate the Cairo subsystem and build a new graphics layer from scratch, they also decided to completely rework the system that renders text in the browser.

Text is an incredibly important part of the Web. While graphics, audio, and video are increasingly common, we still spend the majority of our time on the Web just reading stuff. All the words you read in a web browser are rendered using a font which contains a set of glyphs used to form individual letters. For more simple written languages there may be a straightforward one-to-one mapping of characters to glyphs, but for more complex languages, one glyph may represent multiple characters.

Fonts can also contain additional features that let applications know how render the text in more advanced ways.

Kerning

kerning

Image source: Wikimedia Commons

Firefox 3 has improved support for font kerning, a fairly common font feature used to create visually equal spaces between letters. These fine spacing adjustments help the eye move more smoothly along a line of text. While these adjustments are usually quite subtle, they result in text that is much easier to read, which is why books and printed media make use of kerning most of the time. Not all fonts include kerning information, however, so Firefox can only kern those fonts that support it.

Ligatures

ligatures-small

Font ligatures are now fully supported in Firefox 3. In written languages a ligature occurs where two or more letter-forms are joined as a single glyph. Ligatures usually replace consecutive characters that share common components, but aren’t widely used in English and other Latin language fonts. One English font that does make heavy use of ligatures is Zapfino, which has multiple sets of ligatures, some “required” and other “discretionary” that can be optionally applied.

zapfino

Zapfino font ligature demo in a Firefox 3 textbox. Turns out Firefox doesn’t know how to spell Zapfino.

Ligatures in international text

While ligatures aren’t used that often in English, they are used very frequently in languages such as Arabic and Hindi (among countless others). Ligatures are required to render these languages properly.

Below is an example of a line of Arabic (which is read right to left) being written without ligatures (top) and with ligatures (bottom). The top version is actually unreadable, as it cannot be rendered correctly without ligatures.

arabic-ligatures

Partial ligatures

partial-ligatures

Image source: Robert O’Callahan

Another feature of the new text system is the ability to lay out a string of content and then render any substring using the whole-string layout. This is important because the user should be able to select any substring, and Firefox needs to draw that substring using the current selection colors. Ligatures complicate this, but Robert O’Callahan has devised a system that makes this work in Firefox 3.

Hinting

font-hinting

Image source: Wikimedia Commons

Firefox 3 also has improved support for font hinting, another feature that complicates font rendering. Fonts can contain and run small sets of mathematical instructions to tune glyph shapes at different sizes. This is often seen at small sizes where it is used to increase readability, but it means you can’t uniformly scale a font as the font size changes. This is why web page layout can change if you’re zooming in or out.

Font smoothing, anti-aliasing

There are a number of ways to anti-alias text and all three major platforms (Windows, OS X, and Linux) do it differently. Joel on Software covers the differences nicely, so I won’t go into a lot of detail here. Suffice it to say that Firefox 3 continues to obey system settings on all platforms, so text in your browser will look like text in the other applications on your system.

Font types

There are a number of different types of fonts, the most common of which are OpenType, TrueType, Type 1, Postscript, and bitmap. The focus generally seems to be on OpenType these days, which supports all sorts of complicated features, but the others are still commonplace on many systems. Firefox 3 is now able to render all these different types of fonts properly, where most other browsers, including Firefox 2, cannot.

Font selection

ko.wikipedia

Firefox 3 tries as hard as it can to render readable text no matter what fonts are requested. Pages often don’t specify a font at all, but if your computer contains a font that can render the text or glyphs in question, Firefox 3 will find that font and use it when rendering the web page. This means that Firefox 3 can successfully render text where other browsers fail.

What’s next?

While font support and text rendering in Firefox 3 have been improved a great deal, this isn’t the end of the story. Mozilla developers are already looking at supporting even more font and text features that could appear in future versions of Firefox, including better font family merging, font-stretch, text shadows, and downloadable fonts. For now, Firefox 3 represents a huge step forward in font support and text rendering. The new graphics layer has made it possible for Firefox 3 to support more languages (and therefore more localizations) than ever before.

31 Responses to “Firefox 3: Fonts and text”

  1. Brent Says:
    June 10th, 2008 at 1:50 pm

    Just curious, I’m running Firefox 3 RC2 on Windows XP SP3 but I don’t see any ligatures. I’ve checked the typeface in Charmap and can identify the ligatures, they just don’t appear on screen. Tried Georgia, Verdana, Zapfino. From what I’ve read Ligature support dropped in FF3 RC1 or earlier. Is there Moz specific CSS code to enable/disable this feature?

  2. web design company Says:
    June 10th, 2008 at 4:33 pm

    WebKit does not do this by the way. Enter “ffffff” into a text box in both WebKit and Firefox and increase the font size a lot to see how Firefox renders the string in pairs of ‘f’s. Also, not programming.

  3. Dave G Says:
    June 10th, 2008 at 6:37 pm

    ß is not a ligature of f and s, it is a ligature of s and z. It was introduced in German blackletter typography. Also, Arabic letters change shape depending upon their position in a word. This is not the same as a ligature and in fact contradicts your earlier statement. A ligature is when a letter changes shape when it is in combination with other specific letters. Ligatures do exist in Arabic, such as lam-alif.

  4. John thomas Says:
    June 10th, 2008 at 7:10 pm

    FireFox 3 totally ROCKS! Wow hands down their best one yet.

    JT
    http://www.Privacy-center.net

  5. Greg Says:
    June 10th, 2008 at 7:49 pm

    @Dave G:

    That’s not an f, that’s a ſ (long s). But yes, ß is properly a ligature of ſ and z, not ſ and s. No one uses the long s anymore, so it’s always confusing when Thomas Jefferson wrote about “life, liberty and the purſoot of happineſs.”

  6. Matt Sayler Says:
    June 10th, 2008 at 8:20 pm

    you should do a version of this article with the raw text so those of us running RCs can see it in action.

  7. John Daggett Says:
    June 10th, 2008 at 9:44 pm

    @Brent:

    Neither Georgia or Verdana have the necessary ligature information in the font (in a GSUB table on Windows, a mort/morx table on OS X). Zapfino probably only has ligature information for OS X. I see the glyph you’re talking about but we need to access this via OpenType information. Sadly, this is the case for a lot of fonts under XP. The situation is better under Vista, fonts like Calibri, Candara, Constantia, Corbel all have ligature information.

    I set up a test page that renders text samples with and without ligatures for all the fonts on your system. It uses a privileged API to access the list of fonts on the system so you’ll need to download this and run it locally.

    http://people.mozilla.com/~jdaggett/ligaturetestallfonts.html

    If you’re especially curious you can dig through font info manually with a tool like ttx, a Python tool that allow you to dump TrueType/OpenType fonts into XML. For example:

    ttx -t GSUB calibri.ttf

    This will dump out the contents of the GSUB table to an XML file and you can browse the contents to figure out what ligatures are available.

    @web design company:

    The Webkit folks disable kerning/ligatures for performance reasons:

    https://bugs.webkit.org/show_bug.cgi?id=6136

  8. Dave G Says:
    June 10th, 2008 at 10:54 pm

    @Greg

    Yes I now realise I need some new glaſses.

  9. Snowboard Australia Says:
    June 10th, 2008 at 11:25 pm

    Nice article there… FF3 is definintely the best browser I have ever used, hands down…

  10. Joeri Says:
    June 11th, 2008 at 1:34 am

    This is all really nice, I have to admit, but the single text feature firefox needs most for my purposes is text-overflow: ellipsis. I have web apps where there are numeric columns in a fixed layout grid containing currencies and areas. You can imagine if numbers get cut off right between two digits how this becomes a usability issue.

  11. AzizMostafa Says:
    June 11th, 2008 at 8:54 am

    Very Interesting+Informative
    Further sample on arabic-ligatures, just have a look at:
    http://typophile.com/node/19609
    Thanks with Flowers

  12. Lebanese Blog Says:
    June 11th, 2008 at 9:52 am

    I don’t think glyphs would transcode for Ascii.

  13. Damjan Says:
    June 11th, 2008 at 10:31 am

    Hi, I’d like you to comment on the support for the OpenType locale feature. This is very important for the Macedonian language for ex. since there’s a different rendering of the serif italic letters in the russian and macedonian cyrillic. The DejaVu fonts have a MKD locale with the corect glyphs, and all Pango applications use those glyphs in a MKD locale. But Firefox3 doesn’t do this.

    https://bugzilla.mozilla.org/show_bug.cgi?id=24139

  14. Damjan Says:
    June 11th, 2008 at 10:37 am

    BTW is there some HTML example page we could use to exactly see how Firefox performs?

  15. Ralf Herrmann Says:
    June 11th, 2008 at 11:25 am

    >>>There are a number of different types of fonts,
    >>>the most common of which are OpenType, TrueType, Type 1, Postscript, and bitmap.

    OpenType is a superset of TrueType, so these are basically the same thing.
    PostScript is not a font format at all. Type1 is.
    Bitmap is also not a font format, but a way to build fonts – in comparison to “outline fonts” such as TrueType/OpenType and Type1.

  16. Stan James Says:
    June 11th, 2008 at 11:41 am

    Are there any plans for dynamic fonts? I am pretty tired of seeing the same five fonts for the last decade. There are so many public domain fonts now, and a 40K font download is nothing with broadband today.

    Safari now supports the @font-face rule for TrueType. Hopefully Firefox isn’t far behind? A more beautiful web awaits!

  17. Thomas Phinney Says:
    June 11th, 2008 at 12:04 pm

    Just two clarifications:

    For font types, “Type 1″ and “PostScript” are synonyms. More specifically, PostScript refers to a whole pile of different font types, but when people talk about “PostScript fonts” they almost always mean “Type 1 fonts.”

    “While ligatures aren’t used that often in English….”

    Urm, maybe not by you, but serious publishing/graphics applications use ligatures all the time.

    The basic fi and fl ligatures have been present in almost every font Adobe has made since Adobe first did fonts in the mid-80s. They are part of the basic MacRoman character set. Their automatic usage has been supported by applications going back to QuarkXpress 3 and InDesign 1. Today they’re present in >95% of OpenType fonts, and work automatically in applications including InDesign, Illustrator, Photoshop, QuarkXPress, Pages, Keynote, TextEdit….

    Cheers,

    T

  18. Adam Says:
    June 11th, 2008 at 12:09 pm

    I’m curious, does IE7 or IE8 beta do any of this?

  19. Rainer Says:
    June 12th, 2008 at 3:24 am

    Imho one of the most useful extensions in the web-font business would be a “public download” mechanism. That would free us from speculating if a font is installed on my visitors browser or if not (for what we must use sIPHR currently).
    But I am pretty sure, that this will lead to copyright problems…

  20. Seamus Says:
    June 14th, 2008 at 12:40 pm

    How does Firefox determine which characters to swap with a ligature? Does it ask the font what characters to swap or does it just look for fi and fl?

    Also, what about the other features of OpenType such as swash, small-cap glyphs, etc?
    http://msdn.microsoft.com/en-us/library/ms745109.aspx#variants
    http://www.typotheque.com/fonts/opentype_features/

    All the same, very cool.

  21. Neorelay Says:
    June 15th, 2008 at 7:33 am

    I do agree with the earlier statement that ligatures is not possible in arabic unless u can find the position of letter in a word and offcourse the context of the word changes sometimes even with ligatures. But anyhow we really appreciate you guyz for your hard work to bring the best out of to the users.. keep rocking…

  22. Michael van Ouwerkerk Says:
    June 15th, 2008 at 10:15 am

    I second Joeri’s request for “text-overflow: ellipsis” support.

    Additionally “word-wrap: break-word” would be great for when I have little control over the content being displayed, making the soft hyphen and the wbr tag hard to use. Rendering such content in a container with “word-wrap: break-word” can really stop a layout from falling apart. This matters 10 times more when rendering on mobile phones with 240×320 screens :-)

    So please? These are really more important than text shadows, however pretty they may look.

  23. Stephen Says:
    July 1st, 2008 at 12:47 pm

    The font handling is beautiful…except I’m having a problem with Japanese fonts on a particular page that nobody else seems to have. In Firefox 2, the Japanese fonts render beautifully, whereas in Firefox 3, it changes to an ugly, nearly unreadable block font. Has anyoen seen this? I’m going to try FF3 again, and if the font problem continues, I will open up a support request on the Mozilla forums.

  24. Mark Seymour Says:
    July 15th, 2008 at 2:08 pm

    I have noticed that kerning for Helvetica (including Swis721) seems to have problems still in Firefox 3 for Windows. I am assuming this is because of ClearType, right?

  25. Robert Says:
    August 3rd, 2008 at 2:39 am

    Since I think I installed FF3, I’ve noticed that lots of characters now are being drawn as well, dominoes. I apologize since this is offtopic, but do you know what’s causing that?

  26. Alan CHENG Says:
    August 13th, 2008 at 2:53 am

    Recently, I encountered a problem with Firefox 3 font selection behavior. I found that firefox 3 cannot automatically fallback to the correct fonts to show some characters in the unicode private use area. However, if I specified the correct font in options/preferences, these characters can be showed correctly.

    If you want to test, go to this page:
    http://zh.wikibooks.org/w/index.php?title=Unicode_F000-FFFF

    On my fx3, it looks like this:
    http://img528.imageshack.us/my.php?image=puafx3normalbr8.png

    If I use chinese font “AR PL New Sung” to display, it looks like this:
    http://img147.imageshack.us/my.php?image=puafx3witharplnewsungspty2.png

    You can get AR PL New Sung here:
    ftp://ftp.opendesktop.org.tw/odp/ODOFonts/OpenFonts/

    This font selection problem seems to exist only on Windows. It works reliably on Debian.

  27. shokk Says:
    August 16th, 2008 at 12:44 am

    Lack of “text-overflow: ellipsis” broke part of my app going from FF2 to FF3. When is this coming back?

  28. Alex Says:
    August 18th, 2008 at 8:08 pm

    Firefox 3′s new features indeed are breath-taking.

    I surely would upgrade from version 2 if it wasn’t for the incompatibility with the Babylon dictionary software (babylon scanning for words is simply inaccurate and is impossible to use it with Firefox).

    Would people please report this “bug” to the Mozilla developers because I’m doing that already.

    Thanks.

  29. Kabonfootprint Says:
    August 20th, 2008 at 9:42 am

    I'm using Firefox 3 and some of the fonts are looking good but some have issues.
    I'll have to loog where the problem comes from.

  30. Jack Yan Says:
    October 7th, 2008 at 10:23 am

    I have waited a long time to see these features and they were discussed in the font industry almost a decade ago. Firefox has taken four years to display ligatures and speech marks in the same typeface as the rest of the text—but I am glad it has finally made amends and, in fact, headed even further out in front with kerning and discretionary ligature support. I have found it, so far, to be inconsistent but at least it is occasionally working—so I take my hat off to the developers for caring about typography for a change.

  31. Farrukh Says:
    November 5th, 2008 at 12:05 pm

    Hi
    I'm working with Urdu language and now using an Urdu font, known as Alvi Nastaliq,
    http://www.urdushare.net/alvi/Alvi_Nastaleeq_1_…

    which is perfect in Internet Explorer, but not in FireFox 3.01, I mean there are some minor issues like placement of words disturbs in FF, like if you apply font to this Urdu text:
    میرا نام فرخ ہے اور میرا تعلق پاکستان سے ہے
    then some words might be placed below or mixed, but this is not the case in IE.

    If you have Alvi Nastaliq, then you can see this forum
    http://www.alqlm.org which is purely in Urdu, but you can see the misplacement of words in FF but not in IE

Leave a Reply

Icons by N.Design Studio. Designed By Ben Swift. Powered by WordPress and Free WordPress Themes
Entries RSS Comments RSS Log in