CODEWITHSUNDEEP
htmlcsslayoutletter-spacing
Hugo Delsing
Hugo Delsing

Reputation: 14173

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?

Upvotes: 1

Views: 396

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

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

Upvotes: 1

Related Questions