Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

Tomorrow’s web type today: The fine flourish of the ligature

Posted on 10 May 2012 27 comments

In preparation for my talks at TYPO Berlin next week and Ampersand next month, I’m brushing up on a load of future-facing techniques to do with typography on the web. I’m calling this series of posts ‘tomorrow’s web type today’ and I’m using each post’s heading to demonstrate a particular technique. Oh, and you may have noticed that in order to accomplish this, I’ve redesigned my site… again!

First up, I want to talk about ligatures. Like most OpenType features, we’ve wanted ligatures on the web for ages. In addition to looking a bit fancy, the primary purpose of the ligature is to make text that little bit more readable by avoiding awkward clashes, like the terminal of an f with a dot on an i. If you look at the title of the post above, you should see ligatures for fi, fl, and the slightly less common Th. If not, here’s how the type should look:

Screenshot
Note the fi, fl, and Th ligatures. And yes, in case you’re wondering, this post’s title was intentionally written to be ligature-tastic.

In the body text you’re reading now, you should also see ligatures present (more on that in a second). Of course, whether you see them or not does depend on your browser, so let’s get to the first important question:

What is browser support like?

The good news is that browser support is far wider than you might think: the latest versions of Chrome, Safari, and Firefox all support ligatures. That’s on a Mac. On Windows, Chrome and Safari support is good, but in my tests via Browserstack, I couldn’t see support from Firefox or IE, even though they’re meant to be on board. (Note to self: more testing required.) But by and large, we’re surprisingly well covered. I would encourage you to start adding support for ligatures today. Like all future-facing web development, you’ll be better placed when the other browsers catch up.

But how?

This is the really interesting part. Most people use text-rendering:optimizeLegibility; to turn on ligatures (which also turns on kerning, and is on by default on Firefox and Chrome), but for more control — and, some might argue, more robust future-proofing — take a look at the working draft of the CSS3 Fonts Module (EDIT, 18.05.2012: new link) and, specifically, the font-variant-ligatures; property: the proposed methodology should allow us to turn on common ligatures and discretionary ligatures using font-variant-ligatures:common-ligatures discretionary-ligatures; (EDIT, 18.05.2012: new value). Unfortunately support is currently theoretical, but don’t fret because we can achieve the same using the more widely supported font-feature-settings property. Here’s a line from my site’s CSS file:

body { 
    -moz-font-feature-settings:"liga=1, dlig=1"; 
    -moz-font-feature-settings:"liga", "dlig"; /* EDIT: new syntax for FF 15+ */ 
    -ms-font-feature-settings:"liga", "dlig"; 
    -o-font-feature-settings:"liga", "dlig"; 
    -webkit-font-feature-settings:"liga", "dlig"; 
    font-feature-settings:"liga", "dlig";
}

Make no mistake: font-feature-settings is a god-send. I like it because it conforms to standard OpenType conventions, but more importantly we can use it to turn on other OpenType features we usually only see in desktop design apps, such as swashes, stylistic alternates, and small caps… but I’ll save them for another post in this series. For now, you might be interested in Mozilla’s handy reference page. And John Daggett wrote about this way back in 2010, which shows how slow adoption has been. The downside is that some browsers (such as Safari) currently still require text-rendering:optimizeLegibility; to turn on ligatures.

All fonts are not created equal

Even if you enable ligatures for your site, their display is of course dependent on the font file containing ligatures. Some fonts do, some don’t. Some have the basics, some have every kind of ligature you can imagine. And even if you’re sure that a typeface has ligatures, many web fonts save file size by omitting them from the font file. For instance, with Typekit you’ll need to export ‘all characters’ in your kit settings, and sadly that does mean your font files will be considerably bigger.

Also, as I said before when I was redesigning Smashing Magazine, it’s important to remember that files differ between font delivery services. At the time of writing, Typekit’s version of Skolar doesn’t contain ligatures, but Fontdeck’s does, which is why I’m serving the body type for this site through Fontdeck. EDIT: Typekit’s version now contains ligatures.

For a bit of indulgence, here are a few of Skolar’s ligatures you should be seeing throughout this body text:

ff fi fl ffi ffl

Skolar actually has many more ligatures (see the PDF specimen) and I must admit I’m not sure why I’m not seeing the rest, especially with discretionary ligatures turned on. Perhaps they’re not included in this particular font file? Suggestion welcome.

Expert subsets

I mentioned small caps above, but that really does deserve its own post, as we get into a wider discussion about how that’s being handled by solutions such as Fontdeck’s ‘expert subsets’ — font files that contain only limited characters, used for special circumstances, such as for small caps. That will be next in the series!

I hope this has been useful. I’m always happy to be corrected, so if you’ve spotted anything amiss in this article, please let me know via the comments. Massive thanks to Rich Rutter, whose An Event Apart talk helped shape this post and the others that are on the way.

Heading: Adobe Caslon Pro, served via Typekit. Body: Skolar, served via Typekit

27 comments

  1. Jake

    Jake

    10 May 2012 @ 05:08PM #

    Is there a list of fonts on typekit that do have ligatures by any chance?

  2. Traci

    Traci

    10 May 2012 @ 05:12PM #

    Interestingly, I’m on my iPhone and while the title of this post has ligatures, the large ff fi fl ffi ffl aren’t.

  3. Khalid Mjaid Ali

    Khalid Mjaid Ali

    10 May 2012 @ 05:36PM #

    Great post Elliot, it has always been annoying how letters mixed up on web pages, this ligature voodoo will surely help us… The site’s new look is also cool, I’m currently viewing it on my blackberry 320px x 240px screen and ther seems to be a horizontal scroll, I guess the @media-qurery needs a bit of tweaking.

  4. Christoph Zillgens

    Christoph Zillgens

    10 May 2012 @ 06:07PM #

    First congrats to the site redesign, matey!
    Liking the big typography-focussed headlines and warmer color scheme, making the site look more friendly.

    Regarding ligatures: As much as I like them, I’m not sure how well they work together with the German language. We have many combined words like »auflaufen«, consisting of »auf« and »laufen«. Using a ligature between the f and l would be wrong, for example, as it softens the border between those two words. Is there a way to manually influence those cases?

  5. Tim Houghton

    Tim Houghton

    10 May 2012 @ 06:36PM #

    Looks lovely in Safari, but on Firefox 12 Mac not only do the ligatures not work, but the hyperlink underlining looks more like strikeout text.

  6. Spark Creative

    Spark Creative

    10 May 2012 @ 06:55PM #

    Dig the redesign, especially layout and year titles of http://elliotjaystocks.com/blog/
    line-height looks a little off in these form fields in FF Mac btw.:)

  7. Dimitrie

    Dimitrie

    10 May 2012 @ 07:30PM #

    love this series, for sure i am following them ;) plz adjust your font in the comment section of your page. On windows at least, its not rendered very well, resulting in missing parts of characters.

  8. Dimitrie

    Dimitrie

    10 May 2012 @ 08:05PM #

    Just noticed the difference between directwrite and no direct write.. rendered your website on chrome first, did not look very well. IE, perfect! :O Why isn’t chrome using it?

  9. Sherif Tariq

    Sherif Tariq

    10 May 2012 @ 08:25PM #

    On the latest Chrome (v.18 as of this writing), the code appears as blank colored blocks. Using background:transparent none to hide the styling just shows a blank section.

  10. Sherif Tariq

    Sherif Tariq

    10 May 2012 @ 08:28PM #

    Never mind. Reloading the page after testing it in Internet Explorer and Firefox, and it’s working fine now. False alarm.

  11. Daniël van der Winden

    Daniël van der Winden

    10 May 2012 @ 08:36PM #

    I really like the redesign. Love the big typography. And I’m definetely going to implement the lines of code mentioned above in my own website.

    Thanks Elliot!

  12. Aplomb

    Aplomb

    10 May 2012 @ 06:38PM #

    I really like the big typography on your new website. Also, the fact you removed your logo is a big plus. I really disliked that logo, I’m sorry.

    I’m already using the text-rendering line in my own website and that really makes a big difference. Also, I’m going to implement the lines you mentioned above. Beautiful! I’m hoping the typographic possibilities on the web really develop quickly, so we can deliver great type on websites.

    It’s a step in the right direction!

  13. Stewart

    Stewart

    10 May 2012 @ 06:44PM #

    Very nice, very nice :-)

  14. Indra

    Indra

    10 May 2012 @ 09:48PM #

    Congrats on the very responsive new design. I have to agree with Christoph though – it’s tricky to switch on ligatures globally for German sites, but that’s more of a minority problem.

    When I look at your site on the phone with latest mobile Safari I get Georgia and a classic case of tricky fontstackery. While you use “font-family: Skolar bold” and “font-weight: normal” the fallback for Georgia and Times is also just the normal weight. Specifying the exact font plus weight seems obvious especially with served fonts were one has licensed this one style only e.g. However, I assume webfont-services are intelligent enough to know what fonts we actually licensed. So why not specify “font-family: Skolar” and “font-weight: bold” or alternatively a number if there are more than one bold. Then the fallback would be bold too and one avoided the faux-bold-puddle just the same.

  15. Indra

    Indra

    10 May 2012 @ 10:17PM #

    (I see, it doesn’t work with the average webfont-service. Mh…)

  16. Tristan

    Tristan

    10 May 2012 @ 11:05PM #

    The ligatures and large text rendered beautifully on chrome 18 and firefox 11, but the body copy looks putrid. Have this problem on alot of sites. In IE9 all the fonts render nicely but there’s no ligatures!
    Anyone have any ideas about the small font rendering thing with chrome and FF in Windows7?

    Love the redesign by the way. It’s funny how the shift towards responsive design has really brought out the minimal, content focused designs we are seeing these days. A move in the right direction.

  17. Osku

    Osku

    11 May 2012 @ 09:06AM #

    I noticed the same as Tristan. Body copy is practically unreadable on latest FF in Windows 7. That is very weird, and very worrying. It is quite a popular browser/OS combination.

  18. Mac

    Mac

    11 May 2012 @ 11:40AM #

    Your Blog is awesome! Thank you for the Inspirations!

  19. Richard Fink

    Richard Fink

    12 May 2012 @ 04:09PM #

    While my main area of expertise is web fonts, let’s skip that subject and therefore ligatures for today.
    (http://readableweb.com/rb/rbinfo/rbexplained.htm)
    Please, please reconsider the vertical spacing on this newly designed site.
    Maybe it’s me, but is anybody else bothered by the gaps between sections/headings/paragraphs?
    “Fitfull” is the best I can come up with to describe it. It’s like the designer never got around to paying attention to margin-top, padding-top, or line-height, yet.
    If this is deliberate – I vote thumbs down. And I think, as a basic readability issue, big gaps could be empirically proved to be detrimental. (Which is an interesting point – I’m going to look into any research that’s been done, if any. So much of web design today comes down to ‘the single column’.)

  20. David Březina

    David Březina

    12 May 2012 @ 07:39PM #

    Skolar Web includes only standard ligatures (fb, ff, fh, fi, fí, fj, fk, fl, fľ, ft, ffb, ffh, ffi, ffj, ffk, ffl, fft, tt, Th, Țh, Ţh). We thought the discretionary and long s (historical) ligatures were unnecessary and only making the fonts heavier. If you insist on having the discretionary ones drop TypeTogether a letter. Also if you see rendering problems let Fontdeck and TT know. There are things they can do. It sounds odd it should render badly as Skolar has been masterfully hinted and on Win7 with ClearType switched on it should excell.

  21. Steve Fisher

    Steve Fisher

    13 May 2012 @ 06:01PM #

    I loved reading the title.
    Great post Elliot. Really enjoyed it and love the site design.

  22. mddw

    mddw

    14 May 2012 @ 11:22AM #

    You have to be careful when using text-rendering:optimizeLegibility with uncommon HTML entities. Per example, a hellip or a permil will break a Oswald Bold (from Google Fonts) heading.

  23. mathew

    mathew

    16 May 2012 @ 04:13PM #

    Doesn’t work for me. Latest Chrome on Linux. And I know that Chrome on Linux supports ligatures, because I use them on my own sites.

    Also, these text boxes have something weird going on with the line height, only the top half of the characters shows as I type. And all your hyperlinks have the line drawn through the middle of the characters.

    Contact me if you want to try and debug your site.

  24. egiova

    egiova

    20 May 2012 @ 08:00PM #

    Ligatures: the article is okay, although this is not new, the trick of the selectors is interesting. But, from my side, I don’t like web type services. Not at all, and for several reasons.
    About your new design, there are two things that bother me:
    1: the space between the caption and spaces before / after paragraphs. There’s like a void here. Something looks strange.
    2: If we reduced the size of the screen the text is probably readable by a Lilliputian, but homo sapiens frankly battle. Or you have to zoom in, and it is not practical.
    The overall aesthetic is just beautiful actually. Peaceful and serene. Cool atmosphere. (and I love this big wide button down here!)

  25. Luis

    Luis

    21 May 2012 @ 01:44PM #

    Very nice, informative article!

    In Rockmelt (which I use by default) I can’t see the big header ligatures, and body copy is a bit jagged.

    In Chrome Canary, almost all the fonts from this page look alright. I see all the ligatures and body copy is pretty legible. But the small type of the comments is very messed up, with some stems missing.

  26. Giorgio Bellante

    Giorgio Bellante

    22 May 2012 @ 11:12PM #

    Hi Elliot.
    Some months ago I posted this screenshot via Twitter: https://twitter.com/#!/arcocotangente/status/128564625431199744/photo/1 .
    It’s an html page viewed on Google Chrome on Windows 7.
    Google Chrome on Windows 7 (and already Firefox both for Windows and Mac) supports OpenType features (small caps, swashes, old-style and lining figures, not only ligatures!) while Safari doesn’t (it just activates ligatures).

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Harmony and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.