(1)文字の役割とは | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて
タイトル画像


THEORY 文字の役割とは


文字は読むためにある


たとえば広告表現などにおいては、ビジュアルは目を引くための存在であることが多い。それに対し、文字は行動を起こさせるものとして位置づけられる。その役割を果たすためには、当たり前だがまず文字を「読んでもらう」ことが重要である。

Webページの場合、制作者側が書体や文字の大きさを完全に制御することは難しいが、意外に影響が大きいのが「行間」だ。読みやすい行間は行長に依存し、行長が長いほど行間を広めに取る必要がある【1】。

具体的には、20~30文字では行間50%(行送り150%)、30~40文字では行間70%(行送り170%)程度を基準にして微調整するとやりやすいだろう。標準状態での1行文字数は、最小で20文字、最大で35文字くらいと考えておくとよい。これは、紙媒体の横組み14~40文字という基準より狭いが、画面は紙よりも読みづらいことが多いためだ。

また、画面解像度の問題から、小さい文字は読めなくなる恐れがある。読ませる文字であれば、12ピクセルが最低ラインと思っておいたほうがよい。10ピクセルくらいの文字は、装飾用として割り切った場面でのみ使うようにしよう。

書体の種類


書体には大きく3種類ある。明朝体、ゴシック体、その他(キャッチ系)だが、そのうちゴシック体を細かく分けるとセリフなしとセリフありの2種類がある。それぞれ印象が違うので上手な使い分けが必要だ【2】。

明朝体は上品な印象を与えやすく、高級感を演出しやすい書体だ。大きく使っても下品になりにくく、思い切ってかなり大きめに扱ってもおもしろい。ただし太めの明朝体は古典的なイメージになりやすく、限定的な使われ方をしている。

逆にゴシック体は活動的な印象を与えやすい。特に太いゴシック体を使うと力強く、見た目のインパクトが大きくなる。明朝体、ゴシック体以外の、いわゆるキャッチ系書体は、一般的に読みづらいものが多いほか、多用すると素人っぽくなってしまう。使う場合はあくまでワンポイントとして効果的に配置するようにしたい。

Webでは、明朝体は読みづらいことが多く、一般的にゴシック体に軍配が上がる。画面解像度の問題から、横線が細くなる明朝体はガタつきが出やすく、文字が小さいほど顕著だ。そのため、明朝体は大きめのキャッチコピーや見出しなどに使うようにして、小さい文字はゴシック体に統一するのが望ましい【3】。

文字詰め


単語や文章全体の詰め具合をコントロールすることを「トラッキング」と呼び、特定の文字間の詰め具合をコントロールすることを「カーニング」と呼ぶ。詰め具合の違いによって印象がかなり変わるので、文字を画像化する場合には書体、文字の大きさと併せて細かく調整するとよい。

たとえば太めのゴシック体を使う場合、トラッキング+200(+20%)で広げてみるとおもしろい効果がある。細いゴシックや明朝で同じように広げると無駄にパラついて見えることもあるので、書体やウエイト(太さ)とも併せて検討が必要だ。

また、キャッチコピーなどは通常字間をプロポーショナルに詰める。漢字は正方形に収まるものが多いが、仮名はそれぞれ左右幅が異なるため、隣り合った文字によって詰め具合を変えることが重要だ【4】(TECHNIQUE参照)。



【1】行長と行間の相関関係。行長が長いほど行間を広く取ると読みやすい



【2】左から明朝体、ゴシック体(セリフあり)、ゴシック体(セリフなし)、キャッチ系書体



【3】小さめの明朝体を画面表示した状態(拡大表示)。ガタついて読みづらい



【4】プロポーショナルに詰めた状態
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在