9

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

enter image description here

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?

2
  • I've also noticed this... i.imgur.com/m15bBLH.png
    – brandito
    Jun 21, 2018 at 4:50
  • I noticed that too, and I don't like it either. Firefox displays 'r' taller, too, but IE11/Edge do not. Someone decided it is the correct way to display the letter. The problem shows when 'r' is followed by 'f', because it too has a dash in it. And I could select r and t separately.
    – KS74
    Oct 27, 2018 at 20:13

2 Answers 2

8

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.

4

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.