#27 基本的なフォントについて 【ぴよぴよコーダーの開発日記】

デザイナーさんからもらったpsdって、どこまでが画像フォントで、どこからがデバイスフォント使っていいのかわからないことがある。目立たない注釈などでもデバイスにないフォントで作られていたりするので、、、そんなこともあり、コーダーだけど少しずつフォントに興味を持ち始めてきた。特に、CSSのfont-feature-settingsプロパティが出てきてからは、OpenTypeとTrueTypeって？メトリクスって？プロポーショナルって？と、いろいろ気になってきたので、まとめてみる。

等幅フォントとプロポーショナルフォント

等幅フォント：文字一つ一つが同じ文字幅で表示される（例：MS ゴシック）

プロポーショナルフォント：それぞれの文字に文字幅が設定されていて間隔調整される。iやjは幅が狭い。WやMは広い。（例：MS P ゴシック、Osaka　Pと名の付くフォント）

True Type(TTF)とOpen Type(OTF)

True Type：高度な機能は持たないが動作環境は豊富なフォーマット

Open Type：OpenTypeフォントは、TrueTypeをベースにより高度な機能を持たせたフォーマット。「合字」や「柔軟な文字詰め」もできる。「JIS第2水準を超える収録文字数」も増えた。

オプティカルとメトリクス

オプティカル：ソフトウェアが判断した文字詰め

メトリクス：その書体の書体デザイナーが設定したより精密な文字詰め

さて、CSSのfont-feature-settings "palt" 1;である。これは、Open Typeフォントの字間情報を制御する「プロポーショナルメトリクス」という機能を有効にする指定だが、メイリオには効かない。メイリオはOpen Typeなのに効かない。ヒラギノには効くのに、、と思っていたら、メイリオはOpen Typeだけど、等幅フォントだったという。。

font-feature-settings "palt"　が効くのは、OpenTypeかつプロポーショナルメトリクス機能を持ってるフォントであった（例：ヒラギノ角ゴシック、ヒラギノ明朝、游ゴシック、遊明朝、Noto Sans CJK JP）

参考：「MS ゴシック」と「MS P ゴシック」の違いについて

参考：TrueTypeとOpenType、どう選べばいい?

参考：少しの工夫でグッと良くなる！タイポグラフィTIPS（オプティカルとメトリクスの違いも書いてある）

参考：文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング