Interのプロパティ

サービス系UIデザインのTypographyとしてベースをInter + Noto Sans Japaneseのセットにすることが多い。これに加えて、DataTableの数値や、数式、化学式の表示には別途、Roboto Mono + Noto Sans Japanese などを定義したりするのだけどFontのLoad数（データ量）が増えるデメリットがある。

正直なところよほど長いProgram Codeを表示するケースでなければ、幅浪費を少なくしたいパターンが多いので、数値だけ等幅表示のfont-variant-numeric: tabular-nums;を設定する場合もある。

ただ英数字の識別性（0とO、6と8と9、4と9、1とlとIなど）という観点でグリフに難点を感じるケースは多い。

フォントのLoad数を抑えつつ、英数字の識別性を高める方法は無いのか？ということで、OpenType featuresを使った方法を試してみる。

今回の検討対象とするフォントはInter。

🗒️Interについて

FigmaのデフォルトフォントになりアレヨアレヨとメジャーなフォントになったInter。Google Fontサイトでの紹介文は以下。

Inter は、コンピューター画面用に慎重に作成および設計された可変フォントファミリです。
Interは、大文字と小文字が混在するテキストの読みやすさを向上させるため、xハイトを高く設定しています。また、周囲のグリフの形状に応じて句読点を調整する文脈依存代替、”0″と”o”を区別する必要がある場合にスラッシュ付きゼロ、表形式の数字など、OpenTypeの機能もいくつか提供されています。
Interプロジェクトは、サンフランシスコ在住のスウェーデン人ソフトウェア開発者、ラスムス・アンダーソン氏が主導しています。
Inter – Google Fonts

作者のRasmus Anderssonは元々Figmaの社員だったらしく、Figmaでの仕事の傍ら数年かけてInterを作成したとのこと🤯

このInterには独自Featureが大量に存在する。彦摩呂的に言うと「Featureの玉手箱！」。Featureの詳細は以下で確認できる。

Inter font family #Features
Inter – Lab（リアルタイムに設定挙動を見れる）

📗Typoパターン

ということで、使えそうなセットをまとめてみる。

⚠️Google fontのInterは割愛されているFeaturesがあるので以下の設定は反映されない。このためFontのLoad元を本家ページのCDNから参照する必要がある。実運用する場合は自前サーバに配置して配信したほうが良い。データサイズはGoogle fontの簡易版が30kb、今回利用した完全版が120kbぐらい。

See the Pen Inter Features by tozaki (@tozaki) on CodePen.

設定パターンは4つ

📋️1. テキスト系

オプション設定無し
calt属性はデフォルトONみたいなので-->がリガチャされる

📋️2. 数値系

DataTableなど数値中心の表示用。
数字の等幅表示はfont-variant-numeric: tabular-nums;と同等のtnumを適用
1,3,4,6,9,0をAlternate表示。
1,l,iの識別可能表示。f,tをコンパクト表示。aの単層表示。
ss01、ss02というセット属性もあるが相互干渉するっぽくルールがよくわからないのでcvベースで設定

.qn-u-data-optimized {
  font-feature-settings: 
    "cv01" on, /* Alternate one */ 
    "cv02" on, /* Open four */ 
    "cv03" on, /* Open six */
    "cv04" on, /* Open nine */
    "cv05" on, /* Lower-case L with tail */ 
    "cv08" on, /* Upper-case i with serif */ 
    "cv09" on, /* Flat-top three */ 
    "cv11" on, /* Single-story a */ 
    "cv12" on, /* Compact f */ 
    "cv13" on, /* Compact t */ 
    "tnum" on, /* Tabular numbers */
    "ss02" on; /* Disambiguation (with zero) */
}

📋️3. 数式係

分数が出てくる数式に使うパターン。franで分数表示を有効にしている。これが情報的に分数として扱われるかは微妙だが、現実問題としてグリフ定義されている分数は代表的なパターン（¼、⅖、⅞など）だけなので、現場では対応できないケースがある。

ちなみに対象は数字だけ、m/sなどは残念ながら対象外。U+2215とか使って頑張るしか無い😓

.qn-u-math-optimized{
  font-feature-settings: 
    "cv01" on, /* Alternate one */ 
    "cv02" on, /* Open four */ 
    "cv03" on, /* Open six */
    "cv04" on, /* Open nine */
    "cv05" on, /* Lower-case L with tail */ 
    "cv08" on, /* Upper-case i with serif */ 
    "cv09" on, /* Flat-top three */ 
    "cv11" on, /* Single-story a */ 
    "cv12" on, /* Compact f */ 
    "cv13" on, /* Compact t */ 
    "tnum" on, /* Tabular numbers */
    "ss02" on, /* Disambiguation (with zero) */
    "frac" on; /* Fractions */
}

📋️4. 化学式係

H₂Oとか化学式表示に使うパターン。sinfの適用により数字と小文字が下付き表示になる。一応これはHTMLの<sub>、CSSのvertical-align: subでも対応できるが、こちら方が丸っと設定できて簡単。

.qn-u-science-optimized{
  font-feature-settings: 
    "cv01" on, /* Alternate one */ 
    "cv02" on, /* Open four */ 
    "cv03" on, /* Open six */
    "cv04" on, /* Open nine */
    "cv05" on, /* Lower-case L with tail */ 
    "cv08" on, /* Upper-case i with serif */ 
    "cv09" on, /* Flat-top three */ 
    "cv11" on, /* Single-story a */ 
    "cv12" on, /* Compact f */ 
    "cv13" on, /* Compact t */ 
    "tnum" on, /* Tabular numbers */
    "ss02" on, /* Disambiguation (with zero) */
    "sinf" on; /* Scientific Inferiors */
}

📘まとめ

以上ざっとこんなところ。これでInter一つで数値系、数式系、化学系の表示に対応できそう。

ただしデータサイズはGoogle FontのInterよりも約４倍(120kb）なので、別途MonoタイプフォントをLoadした方が全体データサイズが小さくLoad時間が早い可能性はあるかもしれない・・・😅（この辺はGoogle Font APIでマルチフォントLoadの処理負荷が読みづらいので見当がついてない）

まぁ全体でグリフが統一されるというメリットはあるかなぁ？

最近の投稿

アーカイブ

カテゴリー

最近のコメント

タグ