webra

ウェブ&グラフィック全般。デザイナーの乱れ書き。

フォントの基本2|和文フォントの詰め

   

フォントの基本2

以前書いたフォントの基本、第2回目です。

前回記事
フォントの基本

今回は和文フォント(日本語フォント)の詰めについて。

前回、和文フォントの基本はベタ組み(正方形の仮想ボディーが文字間0)であることを書きました。本題の前に等幅フォント(固定ピッチ)とプロポーショナルフォント(可変ピッチ)について触れておきます。

スポンサードリンク

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

等幅フォントとは、文字が入る正方形の枠が均一に並ぶフォントのことです。正方形の枠に1文字ずつ入り、文字が大きくても小さくても同じように並んでいきます。代表的なフォントにMSゴシックやMS明朝などがりあます。

それに対してプロポーショナルフォントとは、小さい文字などの文字間をバランスよく調整したフォントのことです。代表的なフォントはMS PゴシックやMS P明朝、ヒラギノゴシック、メイリオなどがあります。

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

雑誌や新聞の本文は等幅フォントで組まれています。文章が長文になると一定の間隔で文字が組まれている方が疲れにくく読みやすいからです。一方、webの場合はMS Pゴシックやヒラギノ、メイリオなどがメインとなるので、プロポーショナルフォントで組まれます。DTP経験者は、初めテキストボックスの右端が揃わないのに違和感を感じると思います。

和文フォントの文字詰め

上記で述べた通り、等幅フォントでベタ組みはあくまで文章が読みやすいように設計されたものです。これはプロポーショナルフォントでも変わりません。あくまでフォントは文章が読みやすい様に設計されています。ただwebや広告デザインは多くの場合、文章とメインのキャッチやタイトル、見出しで構成されています。文章はフォント固有の詰めに任せておいても良いのですが、キャッチや見出しは見た目が美しい様に個別に調整が必要になります。

デザイン紙面構成

上の図は、よくあるデザイン構成です。キャッチも見出しもタイトルも全て文字間0の状態です。キャッチや見出しはそれぞれの文字間をバランスよく調整します。

文字間調整

文字間調整後

上の図は、キャッチと見出しの文字間を調整したものです。主にカタカナの前後、小文字の前後、約物(記号)の前後などを詰めています。(一部フォントサイズも変更)文字間を調整する事により全体にメリハリが出て見た目も美しくなります。

キャッチや見出しや文章など、どの要素にどのような詰めの処理をするかは媒体や好み、経験によって違うと思います。書籍や雑誌などDTPというより組版の世界は恐ろしくシビアに決まっているイメージです。

文字の詰めは奥が深く難しいものです。文字の詰めにデザイナーの力量が現れると言っても過言ではありません。また素人の方とプロの違いもそこに現れます。詰めの処理をみれば大体の経験年数などがわかるものです。ちなみに僕は、自分の詰め処理に全く自信はありません(笑)感覚でやってます。

Adobeソフトの詰め処理の方法

最後に代表的なソフトの詰め処理の方法を。Adobeのソフトには大体以下の様な文字パネルがあります。(画像はIllustrotor CS4 / Mac)

イラストレーター文字パネル

カーニングは文字間、トラッキングは文字の字送りを調整、文字詰めやアキは文字前後の詰め具合、アキ具合を調整。僕はカーニングのオプティカルorメトリクス(それぞれ自動調整)とトラッキングで全体を調整した後に、カーニングの個別調整をしています。各調整方法や用語については割愛…というよりあまり理解せず感覚で使ってます…

作業に便利な主要ソフトのカーニング個別調整のショートカットだけ紹介しておきます。

Illustrotor、Photoshop、Indesign
カーソルを調整したい文字の間に合わせoption(alt)+矢印カーソル(←→)

Fireworks
カーソルを調整したい文字の間ではなく文字全体を選択し、command(ctrl)+option(alt)+矢印カーソル(←→)

 - design, フォント