見出し画像

Figmaのテキスト詳細設定完全に理解した

こんにちは、デザイナーのおおいです。

皆様はFigmaを使っていますか?
Webサイトのデザインツールとしてすっかり定着したFigmaですが、Webだけではなくちょっとした資料やバナー制作などにも使用している方も多いのでしょうか。

そんな中、Figmaで字詰めをしたいと思ったことありませんか?
実はFigmaでもIllustratorやPhotoshopのようにプロポーショナルメトリクスが使えるんです!

プロポーショナルメトリクスの設定方法

テキストのタイプの設定→詳細設定を開いてください。
テキストを選択し、右のパネル「…」をクリックし、タイプの設定から詳細設定タブへ切り替え

タイプの設定から詳細設定タブへ切り替え

詳細設定の「左右の間隔」より「Proportional Alternative Widths」にチェック

「Proportional Alternative Widths」にチェック

結果:

字詰めされていい感じ

これでFigmaでもプロポーショナルメトリクスが適用され、いい感じの字詰めになりました!
以上となります。

では皆様も引き続き良いFigmaライフをお過ごしください。



とはならず…
皆様こちらのオプション気になりませんか?

Noto Sans JPの詳細設定

せっかくだから、一つ一つ見ていきませんか!?

ということで今回はFigmaのテキスト詳細設定完全に理解したです。
「この設定、Figmaでできるんだ!」というヒントになれば幸いです。

※詳細パネルで選択できるオプションは、フォントによって変わります。ご紹介しきれないものもあるかもしれません。予めご了承ください…


記事に入る前に参考記事を

CSS での OpenType 機能の構文
欧文フォントの機能 | 多言語フォント | モリサワのフォント
OpenType Features | PreussType

こちらの詳しい解説をもとに記事を書かせていただきました!もっと知りたいという方はぜひこちらも合わせてご覧ください。


字形>Ligatures、Rare ligatures

リガチャー、レアリガチャーの設定ができます。

リガチャーの例。fとiがくっついたデザインに調整されています

フォントによっては、

  • 欧文合字(Ligatures、Common Ligatures)

  • 前後関係に依存する字形(Additional Ligatures)

  • 任意の合字(Rare ligatures、Historical Ligatures)

というオプションも存在します。illustratorでいうこちらです。

左から、欧文合字・前後関係に依存する字形・任意の合字
ヒラギノ明朝をレアリガチャーさせると以下のようになります。ちょっと面白い
リガチャー、フォントによっての違い

字形>Vertical alternates
その他の機能>Vertical alternates and rotation

こちらは縦書き、長音符(ー)や句点・句読点(、。)などが縦書きになるオプションです。Vertical alternatesとVertical alternates and rotationの違いは、英字を回転させてくれるかどうかです。

縦書きについてのノウハウをまとめたサイトがありましたのでご紹介させていただきます。縦組みレイアウトのサイトを構築の際の参考になりそうです!

縦書きWeb普及委員会
https://tategaki.github.io/

比べてみました(英字があると中心線がブレブレ…。解決策は後述します)

字形>Alternate annotation forms

日本語版をお使いの方はパネルに「代替アノテーションフォーム」と表示されるオプションです。
Figmaのアップデートにより日本語訳が当てられていました。

検索してもなかなか出なかったのですが、脚注スタイルを当てられるようです。素直に適用すると以下のような結果に。一部の漢字・カタカナ・ひらがな、英字をカッコまたは◯で囲うような効果が出ます。

このオプションがあるフォントもヒラギノ明朝しか見つけられず…

https://helpx.adobe.com/jp/illustrator/using/special-characters.html

おそらくこちらの解説にあるようなフォントごとに用意されている特殊文字へ変更する機能なのかなと。。フォントによっては◯で囲まれた文字になったりします。

Alternate annotation forms

字形>Italics

フォントのイタリック体を適用します。(無理やり曲げるのではなくフォントに用意されているのを表示)

Italics イタリックの例

字形>Historical forms

直訳すると「歴史的な形式」。 詳しくは以下をご覧ください。
https://www.preusstype.com/techdata/otf_hist.php


字形>Ordinals

上付き序数表記のこと。詳しくは以下をご覧ください。


字形>Ornaments

フォントに装飾された字が用意されている場合、表示するオプションです。詳しくは以下をご覧ください。


左右の間隔>Kerning pairs

欧文フォントの特定の組み合わせに対するカーニング情報。詳しくは以下!

実際に打ってみるとこんな結果になります。FigmaではデフォルトでON状態なので、気にしなくても良いかもしれないです。

Kerning pairs カーニングペアの比較

左右の間隔>Full widths

全角へ変換

左右の間隔>Half widths

半角へ変換

漢字以外がシュッとしました

左右の間隔>alternate half width

全角の約物を半角にして文字間を調整してくれます。(約物半角) cssプロパティでは「vhal」となり、対象の約物が前後関係にかかわらず半角になります。
全角約物が連続したときのアキを調整する | Webフォント・サービス FONTPLUS


左右の間隔>Proportional Widths

約物以外の文字間を調整されたものを適用してくれる設定です。
こちらの設定ですが、モリサワ様が以下のようなとても勉強になる記事が出ていましたので合わせてご参照ください。
Illustratorのように「Proportional Alternative Widths」とセットで使うほうがより文字間が詰められます。
オプティカル?メトリクス?Adobeソフトの文字詰め機能・入門編! | ブログ - Morisawa DTP Lab.


左右の間隔>Proportional kana

英数字・約物以外の文字間を調整してくれます。ひらがな・カタカナだけの文章ですとProportional Widthsと全く同じ結果になります。


左右の間隔>Proportional Alternative Widths

プロポーショナルメトリクス。約物&フォントも文字間を調整されたものを適用してくれる設定です。冒頭でご紹介したものがこちらです。

Proportional widths & Proportional alternative widths & Alternate half width を比較してみました
Proportional widths & Proportional alternative widths & Alternate half widthを重ねてみました

その他の機能>Alternate Vertical Half Metrics

縦書きの際に、前後関係を無視し単純に約物が半角になります。


その他の機能>JIS78 forms、JJIS83 forms、JJIS90 forms、NLC kanji forms

JIS83制定時の変更点 - CyberLibrarian
詳しくはこちらをご覧ください。


NLC kanji forms

表外漢字字体表の字形に置き換えられる設定です。ここまで来たらfigmaじゃなくても良いんじゃないか
文化庁 | 国語施策・日本語教育 | 国語施策情報 | 参考資料 | 表外漢字字体表
エキスパート字形を印刷標準字形として流用 - なんでやねんDTP・新館


その他の機能>Proportional alternate vertical metrics

プロポーショナルメトリクスの縦書き版です。


その他の機能>Ruby notation forms

ルビがふれます。

設定しても、見た目が全く変わらないか、ウェイトだけ変わるだけで大きな変化はありませんでした。 ルビだということを開発者へお知らせする機能ではないかと推測。

その他の機能>Vertical kerning

縦組みの字詰め。kerning pairsの縦版です。


その他の機能>Vertical alternates and rotation

約物や小さい「つ」など回転させて縦書きに適した形にしてくれます。

縦書き比較です

英単語がある文章の場合、Vertical alternatesを設定した際、中心線がブレブレになってしまいましたが、Full-widthを加えるとよりきれいな縦書きになります。
理屈上ではProportional alternate vertical metricsの設定を入れたほうがきれいになるはずなのですが、自分の手元でやってみた結果としてVertical alternatesとFull-widthのみのほうがきれい字詰めした結果になりました…!

中黒の位置が…

Illustratorでいう縦中横の設定はFigmaにはなさそうなので、半角で「!!」や「!?」を打ち、Half-widthを適用させると似たような効果になります。

半角で「!!」を打ち、Half-widthを適用させたもの

以上、いろいろな設定をご紹介しましたがそもそもFigmaでの縦書きはテキストフィールドの幅を縮めて無理やり縦書きにしているので、手動でのカーニングは必須そうです。


おわりに

Illustratorでやっていたあの設定はどれだったけかな、そもそもオプションが英語だからパッと内容が頭に入らない…そんな自分に向けての説明書のように書いていたものをまとめてみました。
同じように設定パネルの中をさまよってる方々に届いてくれたら大変嬉しいです!

この記事が気に入ったらサポートをしてみませんか?