Recruit

合字とCSS

Blog

先日、某案件で題字にletter-spacing:0.2emを指定したところ、
ChromeとSafariで表示が違っていました。

cssは以下の通りです。

font-family: "Noto Sans Japanese"; // https://fonts.googleapis.com/earlyaccess/notosansjapanese.css
letter-spacing: 0.2em;

Chrome

Safari

SafariでProfileの「f」と「i」の表示が近い。

このような「ft」「fi」「fl」など、くっついた文字を「合字」と言います。
恥ずかしながら、知りませんでした。

合字

合字については、書体デザイナーの小林章氏のブログが詳しく、面白かったです。

これによると、

合字は、二文字以上がひとつの文字記号としてデザインされているものです。本文用ローマン体では、たいていは文字どうしがどこかでつながっています。サンセリフ体（日本風に言えば角ゴシック体）では、つながっていないものもあります。
合字の目的は、頭と頭とがぶつかってしまう組み合わせをスマートに処理して、本文中に見苦しい黒い固まりをつくらないこと。またそれがわざとらしくなく、スッと本文に溶け込むこと。これが合字。

SafariでProfileの「f」と「i」の表示が近いのは合字だからであり、
ChromeとSafariで表示が違うのは合字に関するデフォルトの指定が違うから、です。

もちろん合字もフォントとしてデザインされた一部だから、本来そのまま使用するのが良いと思います。
が、今回に限ってはletter-spacingで文字間を広げてる都合上、均等に広がってほしい。

フォントとは

ところで、ここで言う「フォント」とは「＝デジタルフォント」です。
デジタルフォントにはいくつかの形式があります。
馴染みのある形式は

  • .ttf（TrueType）
  • .otf（OpenType）
  • .woff/.woff2（Web Open Font Format）

でしょうか。
内、.otf、.woff、.woff2 が合字の情報を持てる形式です。

さて、Adobe Typekit の OpenType のページに答えが書いてありました。
「一般的な合字／標準合字（liga）」の項目に、こうあります。

この合字機能は、デフォルトで有効です。そのため、通常は CSS を記述しなくても動作します。ただし、Chrome ではデフォルトで有効になりません。また、Safari（Mac または iOS）では無効にできません。

これによると合字を有効化/無効化するcssは以下です。

// 有効にする
.class {
  font-variant-ligatures: common-ligatures;
  -moz-font-feature-settings: "liga", "clig";
  -webkit-font-feature-settings: "liga", "clig";
  font-feature-settings: "liga", "clig";
}

// 無効にする
.class {
  font-variant-ligatures: no-common-ligatures;
  -moz-font-feature-settings: "liga" 0, "clig" 0;
  -webkit-font-feature-settings: "liga" 0, "clig" 0;
  font-feature-settings: "liga" 0, "clig" 0;
}

font-variant-ligaturesは合字の制御を、font-feature-settingsはOpenTypeの機能を制御します。

記事には「Safari（Mac または iOS）では無効にできません。」とありましたが、
font-variant-ligaturesもfont-feature-settingsもSafari9.1〜有効です。

上記記述にて無事に「Profile」の文字間を均等に広げることができました。

一般的な合字と任意の合字

ところで、Adobe Typekit の OpenType のページによれば、合字に関するスタイルの指定はもうひとつあります。

.class {
  font-variant-ligatures: discretionary-ligatures;
  -moz-font-feature-settings: "dlig";
  -webkit-font-feature-settings: "dlig";
  font-feature-settings: "dlig";
}

「任意の合字（Discretionary Ligatures）」とは、「装飾的な意味を持つ合字」。
メジャーなところだと「ct」「st」などが挙げられます。
ただし、日本語フォントの一部では〼㌧㍿などが有効になってしまうので注意が必要です。

Wikiによれば合字には他にも、hlig（Historical Ligatures）、rlig（Required Ligatures）があるそうで、奥が深いです。

In OpenType, there are standard liga, historical hlig, contextual clig, discretionary dlig and required rlig ligatures. These can be enabled or disabled in CSS3 using font-feature-settings.

ほか、font-feature-settings に指定できるタグの一覧はこちら。

おわりに

今回の合字は基本的に欧文が対象ですが、日本語フォントに関してこちらの記事もおもしろかったです。
デバイス間の差異など考慮が必要なことは多そうですが、必要なところで使えたら効果的なのかな。

また先月4月10日は「フォントの日」だったそうで、奥の深そうな（・・・）話題が多く、合わせて載せておきます。

参考

Return back

Recommend

Contact Us