いきなりですが、下の2つの文章は何が違うかわかりますか？

上の例では、仮名の「字面」が違っています。
字面とは、文字が配置される枠の中における、実際の文字の大きさです。

字面は主に「文字の見やすさ」と「文章の印象」に影響を与えるので、フォントを選ぶ時に字面を意識することで、読み手のシチュエーションや与えたいイメージに適したフォントを選べるようになります。

本記事では、文字の見やすさやデザインの印象に字面がどのように作用するか、基本的な考え方についてお伝えします。

フォントの使い分けにおいて「字面の違い」をどのように考え、どう活用すればよいかがわかるようになりますので、ぜひ最後までご覧ください。

字面とは、実際の文字の大きさ

まずは字面とは何かを見ていきましょう。

フォントにおいて、1つの文字は次のように格納されています。

文字が格納される正方形の枠を「仮想ボディ」と呼び、「仮想ボディ」の大きさは指定されたフォントサイズと同じ大きさになります。

「字面」は仮想ボディの中における実際の文字の大きさ、「字面率」は仮想ボディと字面の大きさの比率を表します。

Microsoft WordやAdobe Photoshopなどのアプリケーションでフォントサイズを指定すると、仮想ボディの大きさは指定されたフォントサイズの大きさになります。一方で、字面は文字の形によって決まるので、フォントが変われば同じフォントサイズでも「文字自体の大きさ」が異なります。

フォントによって字面の大きさが変わる例を見てみましょう。

フォントサイズが10mmの文字列に「東」を入力した場合、「東」の字面率が95％のフォントを使うと「東」自体の大きさは9.5mmです。字面率が90％のフォントを使えば「東」自体の大きさは9mmになります。

大きければ見やすいとも言い切れない、字面と文字の見やすさの関係

この字面率の差は文字単体ではあまり変化を感じませんが、文字を連続して並べる、つまり文字列になった時の見やすさや印象に影響します。

極端に字面率を変えた例を見ながら、字面の効果を見てみましょう。

これらはどれも同じフォントサイズですが、字面率は上から順に10%ずつ小さくなっています。

文字単体では同じ形ですが、文字が並ぶと見やすさと印象が大きく変わることがわかります。

「見やすさ」としては大きすぎても隣の文字と近すぎて見づらく、小さすぎても文字列として認識しにくくなる傾向があります。

「印象」はもちろん字面以外の要素も大きく作用しますが、上の例を見ると字面が大きいと比較的明るい印象に、反対に字面が小さいと比較的落ち着いた印象に感じるかもしれません。

多くの文字を収容しているフォントは、フォントのコンセプトに従って1文字ずつ字面が綿密に検討・設計され、デザインされているのです。

漢字と仮名のバランスによっても印象は変わる

字面を知るうえでは文字の種類、主に漢字と仮名のバランスにも注目する必要があります。文字種ごとの字面の差によっても、見やすさと印象が変わるためです。実例を見てみましょう。

どの例も同じフォントサイズで漢字の字面は同じですが、仮名の字面は元のフォント（ヒラギノ角ゴシック体 W3）から±10%変更しています。

仮名が大きいと文字単体の見やすさは上がりますが、文字同士がくっついているように見え、文章が読みにくく感じるかもしれません。漢字に対して仮名が大きめのフォントを使うとはっきりとした印象に、反対に仮名の字面が小さめのフォントを使うと比較的落ち着いた印象につながります。

実際のフォントや事例で字面を比べてみよう

字面の大きい順に、ヒラギノUD角ゴF、ヒラギノ角ゴシック体、こぶりなゴシックを並べました。

さらにそれぞれのフォントの文字の種類毎に、字面率（仮想ボディと字面の比率）を比べると、細かな違いが見えてきます。

これら3つのフォントを使った文章（組版）や字面率の比較から、字面の大きさがデザインの特徴として表れていることがおわかりいただけたかと思います。

最後に、それぞれのフォントの使用イメージとフォントのコンセプトをあわせて確認して、字面の効果を見てみましょう。

ヒラギノUD角ゴFの使用イメージ（日本語部分）

比較的字面の大きいヒラギノUD角ゴFは明るくくっきりとした印象がコンセプト。遠くから見ても、文字を認識しやすい効果を発揮します。

ヒラギノ角ゴシック体の使用イメージ

やや大きめの字面をもつヒラギノ角ゴシック体は、隣り合う文字との間に適度な空間が保たれ、短い文章だけでなく長さのある文章でも読みやすく落ち着いた文字並びとなるよう設計されています。
パソコンやスマートフォンの画面の中においても、UIから文章まで幅広く使えます。

こぶりなゴシックの使用イメージ

その名の通り、字面の小さいこぶりなゴシックは、エディトリアルデザイン（書籍・新聞・雑誌などの紙面のデザイン）向けの、比較的長い文章を想定されて設計されました。実際にこぶりなゴシックが使われている雑誌も多く、情報量の多い誌面でもすっきり見せるデザインと高い評価を得ています。

字面を意識してフォントを選ぼう

この記事では字面に注目して、見やすさと印象にどのような影響を与えるかについて紹介しました。

フォントを選ぶ時の観点として「書体の違い」「太さの違い」に加えて、「字面の違い」という観点を持つことで、見やすさや印象の点でデザインの質が向上し、読み手にスムーズに情報を伝えられます。

今回ご紹介したフォントの字面という考え方を取り入れながら、フォントを切り替えるだけでデザインのランクアップが期待できますから、字面の違いを意識してフォントを活用していきましょう。

今回紹介したヒラギノフォントの他にも、ヒラギノフォントにはたくさんのフォントラインナップがあります。

ヒラギノフォントの字面に関してさらに詳しく知りたい方は、ヒラギノフォント公式サイトや字面に関する配付資料をご覧ください。同じフォント名でも太さ（ウエイト）が変わると字面も適切に調整されていることが詳しくご覧いただけます。

• ヒラギノフォント総合情報サイト

• ヒラギノ角ゴシック体のウエイト毎の字面を比較できるPDF（2004年8月発行）

• ヒラギノフォントの仮名の平均字面率を比較できるPDF（2004年11月発行）