Lato's unfortunate ligatures

Saturday 2 April 2016

If you use Slack, or read docs on Read The Docs, you've seen Lato. It's a free high-quality font. I like it a lot, but it has a feature that bugs me a lot: the f-i ligature:

A sample of Lato

If you've never looked into this before, a ligature is a combination of letters that are designed as a new distinct glyph. In this case, there's an "fi" shape that is used when you have an "f" and an "i" next to each other.

Ligatures have a long tradition in Latin fonts, for a reason: some pairings of letters can have a jarring look. The bulb of the f and the dot of the i can clash, and it looks better to design a combined shape that shares the space better.

But Lato doesn't suffer from this problem. Ligatures are a solution to a problem, and here they are being used when there is no problem to solve. The Lato fi ligature is more jarring than the f and the i, because it looks like there's no dot for the i.

Here's a comparison of the fi ligature in some fonts. The first column is a plain f and i presented naturally, but forced to be individual, naively. Then the fi combination as the browser text renderer draws them, and then the Unicode fi ligature, U+FB01 (LATIN SMALL LIGATURE FI):

Ligatures in various fonts

The naive Lato f and i look fine together without any intervention. The ligature looks silly without the dot. The f is trying to reach over to join the dot, but it's too far to reach, so it doesn't get there, and the f has no bulb in the first place. It doesn't make any sense.

Constantia and Georgia demonstrate a good use of ligatures: the naive pairing shows how the bulb and the dot crowd into each other, and the ligatures shift things a little to resolve the clash.

(Somehow, Lato doesn't map its fi ligature to the U+FB01 code point, so we get the default font there instead.) If you want to experiment, here's the HTML file I used to make the image.

By the way, it was an interesting challenge to get the browsers to display the unligatured f-i pairs. In Firefox, I used a zero-width space (U+200B) between the characters. But Chrome substituted the ligature anyway, so I tried putting the f and the i in adjacent spans. This worked in Chrome, but Firefox used the ligature. So I combined both methods:



Chris McDevitt 4:43 PM on 2 Apr 2016

Futura also has a very strange fi ligature.

You can disable ligatures in Chrome with this css:

font-variant-ligatures: no-common-ligatures;
and you could add it to the Stylebot chrome extension for I actually have a global rule to add ligatures for all sites but I agree the the Lato one isn't nice.

For all browsers:
.class {
  font-variant-ligatures: no-common-ligatures;
  -moz-font-feature-settings: "liga" 0, "clig" 0;
  -webkit-font-feature-settings: "liga" 0, "clig" 0;
  font-feature-settings: "liga" 0, "clig" 0;
taken from

sr 10:06 PM on 2 Apr 2016

My main gripe is with fi-ligatures in words with "ffi" in them (like #office on slack) - while technically probably a correct use, I find it horrible that the 2 consecutive fs look different :(

Ned Batchelder 10:22 PM on 2 Apr 2016

@chris, thanks! Now if I could only get those styles applied in the Slack native client. It's really just a wrapper around the web code, but there's no way in.

@sr: the ffi ligature is another distinct ligature (Unicode U+FB03), so it's probably been designed like that. Another misstep... :(

unicode nerd 9:51 PM on 21 Apr 2016

Use zwnj (zero-width non-joiner).

Adam Palay 3:11 PM on 27 Apr 2016

@ned, I'm holding out for the pre 18th century long-s ligature to make a comeback :)

Adam Palay 3:13 PM on 27 Apr 2016


Aron Griffis 6:34 PM on 23 Sep 2016

Lato's U+FB01 code point starts working if you switch to Lato 2.0 (since Google is stuck on 1.0)

<link rel="stylesheet" href="">


Add a comment:

Ignore this:
not displayed and no spam.
Leave this empty:
not searched.
Name and either email or www are required.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.