Discretionary Ligaturesと呼ばれるOpenTypeの機能(Photoshopでは任意の合字と呼ばれているもの)を有効にすると、かっこよさげにstをつなげてくれるようになったりするフォントがあったりする。アイコン・フォントでもこれを使った実装になっていることもある。CSSではfont-feature-settings: "dlig" 1;
とするとこの機能を有効にできるが、日本語の文章に使うと「ページ」が「㌻」になるというちょっと想像しづらい結果をもたらすことがあるようだ。
Demo: dlig and Meiryo/Yu Gothic
デモ・ページではdlig
に対応しているメイリオや游ゴシックを使った。もちろん他にもこうなるフォントはきっとあるだろう。dlig
を有効にした文書がそれらを使って表示される(CSSでのフォント指定は絶対条件ではない)と、「ページ」が「㌻」になったり、「フランダースの犬」が「㌵㌤の犬」になったりするというわけだ。前者のようなものが単語として機能する場合なら百歩譲って目をつぶっても良いかもしれないが、後者のように単語を破壊するような場合は致命的と言える。
欧文タイポグラフィーでは見出しを作る時などにdlig
が使われるのだけど、日本語交じりの文章では有効にすべきではない。
少し前からOpenType Featuresを一部有効にしてみている。具体的にはカーニングをフォントに任せるkern
とリガチャを有効にするliga
、ライニング数字にするlnum
を有効にするような形。数字を等幅ではなくプロポーショナルにするpnum
も一応有効にしたりもする一方で、この記事で触れたdlig
やpnum
の反対のtnum
、オールドスタイル数字にするonum
を無効にしたりもしている。
数字に関してはpre
やtable
要素では等幅になるように上書きしておいた。pre
要素へ指定するのは冗長な気もするけど、継承されてしまうのでどうしても必要になるようだ。
違いがわからない! という人は開発者ツールでfont-feature-settings
プロパティーのオン・オフを切り替えてみると良い。