Figmaのプロポーショナルメトリクスで文字組み・文字詰めを美しくする方法

文字組み・文字詰めが綺麗なデザイナーは何をするにも重宝されます。シンプルなデザインを求めるほど、文字がいかに綺麗に組まれているかで実力が出るとも言われ、カーニングやトラッキングをうまく使いながら洗練させることが重要です。今回はFigmaを活用したデザインを行う際に、文字組・文字詰めを美しくするためのプロポーショナルメトリクスについてご紹介します。

プロポーショナルメトリクスとは？

「プロポーショナルメトリクス」とは、フォントに埋め込まれた文字ごとに設定されている文字詰めデータのことです。文字組をする際に文章を打った時、ベタ組みの状態だと文字ごとの隙間がバラついていて少し気持ち悪い状態になることがあります。よく言われるもので言うと、数字の「1」と「4」では、フォントによって文字の左右の空きが異なって見えることがあったり、鉤括弧（「」）を使うと前後に空きが目立つなどがあります。

実際にはどの文字も「仮想ボディ」にあたる外枠サイズは同じですが、中の字面の面積が違っているためにこのような現象が起きてしまいます。

仮想ボディとは？

文字は元々、活字と呼ばれる「組み並べて印刷に使う、普通は金属製の字型」のことを指していました。

現在では、デジタル化が進んだことにより印刷用の文のことを活字と呼びます。

かつての活字には、四角い金属内に文字が刻まれていて、その金属の枠の大きさを「ボディ」と呼びます。

DTPでは、実際に金属のボディは存在しないため、「仮想ボディ」という名前で表される字面に対する外枠のことを指します。

プロポーショナルメトリクスのメリット

プロポーショナルメトリクスは個々の文字ごとに設定されている文字詰め情報のことで、文字ごとの字面から仮想ボディを含む文字幅をできるだけ違和感なく文字組みができるように設定されています。ただ、このプロポーショナルメトリクスは、フォントの中に情報として埋め込まれており、文字ごとに1つ1つ細かく設定してあるためフリーフォントや一部のフォントなどには付与されていないことが多いです。

そういったプロポーショナルメトリクスの情報を持っていないフォントに関しては、手動のカーニングやトラッキングで文字を詰める必要がありますが、Webフォントとして使う文字の場合、一文字ずつ手動で文字間を詰めるのは現実的ではないため、ある種のあきらめも必要です。

ちなみに、有名なフォントメーカーのMORISAWA（モリサワ）フォントには原則この「プロポーショナルメトリクス」が付与されていて、IllustratorやIndesignなどだけでなく、Figmaでも文字組をする際に適応することが可能です。

ペアカーニングもセットで使う

ここまでの説明で、プロポーショナルメトリクスさえ使いこなせれば完璧では！と思ってしまいがちですが、実際は限界があります。理由としては、文字組が綺麗に見えるためには、それぞれの文字の文字詰めも大事ですが、何より前後の文字が何かによって最適な文字詰めが変わってきてしまうからです。

例えば、「A」と「W」などがわかりやすいですが、「AWA」と文字が続く場合では、「WWW」と文字が続く場合に比べて文字間を詰めてあげないと綺麗に見えない場合があります。

そんな時に大事なのが、文字の組み合わせによって自動で文字詰めをする設定（ペアカーニング）を使うことです。Illustratorなどでは、「メトリクス」と呼ばれますが、Figmaでは普通に字形プロパティの中に「Kerning pairs」と言うものがあります。この設定はデフォルト状態で適応されているはずなので、あえて気にしなくても良い場合も多いですが、欧文の特定の文字の組み合わせで前後の文字詰めを調整してくれる機能です。

Figmaでプロポーショナルメトリクスを使う

Figmaでプロポーショナルメトリクスを適応する時は、文字を打った後プロパティの「Typogaphy」パネル右下にある「Type settings」から行えます。

「Type settings」>「Details」タブに切り替え、「Horizontal spacing」の設定の中に「Proportional alternate width」があるのでチェックを入れれば適応完了です。この設定はWebフォントでもサイト上で似たように再現が可能なので、ためらわずに使ってしまって良いと思います。

また、同じパネルの中に、「Kerning Pairs」もありますが、デフォルトでチェックされているのがわかるかと思います。

【おまけ】Figmaで縦書きをする時の設定

FigmaではIllustratorなどのように、縦書きの文字ボックス機能がデフォルトで備わっているわけではありません。そのため、文字ボックスを縦長にして、全て無理やり改行させることで、擬似的に縦書きを作ることができますが、そのままだと各種役物や小文字などの位置が横書きの時のままになってしまい綺麗に文字が組めません。

そんな時は、「Type settings」>「Details」タブの中の「More features（その他設定）」から、「Vertical alternates and rotation」にチェックを入れると、一文字ずつの文字を縦書き用に回転させた配置にすることができます。

また、縦書きでも「Proportional alternate vertical metrics」にチェックを入れることで、プロポーショナルメトリクスを有効にすることができます。

設定オプションを使いこなしてワンランクアップ

Figmaをなんとなく使っている方の中には、このような文字組み設定を知らないまま利用されている方も多くいらっしゃる気がしています。非常に細かい部分なので見落としがちですが、知っているだけで印象に大きく差がつく場合があるので、やや覚えづらいですがせっかくなら活用しながらデザイナーとして「神は細部に宿る」を追求してみてください。