フォントのバグ？？特定文字間でletter-spacingが効かない

こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。

コーディング中に若干「？」となっていて、まあいいか、で済ませていたことがあったのでその修正を行いました。

特定のアルファベットの並びでletter-spacingが効かなくなる

例えば、「ff」「fi」など。

自分はデザイン上、文字間隔を広めにとってパラパラした印象を出すためにletter-spacing指定を使うことが多いです。

ちょっとしたことなんですが、そういった場合はこの現象が割と気になっちゃう感じなんですよね。

ただそれよりも優先してやるべきことがあったので「まあフォントのバグだろ」程度にしか思っていませんでした（適当）

で、調べてみたら原因は欧文文字の「合字」が関係してました。

合字（ごうじ、英: Ligature）とは、複数の文字を合成して一文字にしたもの。 抱き字、連字ともいう。 ユリウス・カエサルの表記「Julius Cæsar」の「æ」が典型的な合字の例である。-wikipedia

あまり馴染みが無いかもしれないですが、日本語でも古くから「合字」はあるようです（詳細は割愛）。

photoshopやillustratorでもフォントウィンドウにあるので、むしろなんでおれは気が付かなかったんだこのバカっていう（猛省）

CSS指定「font-variant-ligatures: none;」で合字解除

制作中サイトでは合字のデザイン性を強調する箇所は無いので、html,bodyに下記の通り指定してやりました。

html,body {
    font-variant-ligatures: none;
}

すると文字の並び関係なく、すべての文字に文字間隔指定が適用されました。

ちょっと盲点だったので、備忘録も兼ねて。