Why does the lower case 'r' in Google Sans font change size depending on the next letter?

Question

I recently switched to the GMail redesign where Google Sans is used for the subject text when displaying emails.

I noticed that where a lower case 'r' is followed by a 't' - as in 'Start' - the 'r' is taller than the 'a' before it. However where it is followed by an 'a' - as in 'preparations' - the two letters are the same height.

When trying to select the word with the mouse, the 'r' and 't' could not be selected separately, so presumably there is a ligature. Why would the size of the 'r' increase next to a 't' but not other letters?

Answer 1

To get the arch of the R above the crossbar of the T, I imagine. The E and A are lower and rounded, so the R fits into their negative space, but the T pokes to the left.

It's really noticeable. It's irritating my eye quite a bit. The designer(s) did not do a good job with that ligature pair.

Answer 2

You can add css font-variant-ligatures:no-common-ligatures (or font-variant-ligatures:none) to prevent Chrome (and Firefox!) from displaying 'r' that way. IE/Edge don't have the bug.

You could also insert ‌ between every pair 'rt' and 'rf' (the problem shows in it, too) in the source text (it's invisible), to make browsers think that the characters are not adjacent, but that's a bit of mess.

And I could select r and t separately.