Search code examples
htmlcsslayoutletter-spacing

Letter spacing incorrect for one word only

When using letter-spacing we get the expected result, except for one part of the text and only on mobile (android and iphone).

This is the desired result on desktop:

enter image description here

And this is how it looks on mobile; notice the "finest"

enter image description here

There is nothing special in the code:

<div>
  <p>It's a way of life</p>
  <p>Ibiza's finest villas</p>
</div>

And the CSS on the div:

font-family: 'KremlinW08-ExpandedDemi';
font-style: italic;
letter-spacing: 9.0pt;

Any suggestions on how to solve it and what might be causing it?

Solution

  • It is a behaviour due to the ligatures of this font between f and i (and probably also between other characters)

    Try applying font-variant-ligatures: no-common-ligatures;

    Reference on MDN