https://idea-hack.com/blog/37190/
デザイナー必見!日本語での行間はアルファベットの1.2倍が良い

デザイナー必見!日本語での行間はアルファベットの1.2倍が良い

実はアルファベットに適用している行間を日本語にそのまま適用すると、デザインが窮屈な印象を与えてしまいます。これを解消する方法を紹介します。

先日ノンデザイナーズ・デザインブックの第4版が発売されました。

詳しくはこちら

そこで、改めて読んでみましたが、さっそく一つ有益な情報がありました。

アルファベットと行間の違いを意識せよ

特にWordPressで無料のテーマを導入しようとしたときに気になる点ですが、もともとこれらのテーマは「英語」を基準にデザインされているので、実は日本語で使った場合、文章が少し汚く見えてしまいます。

この理由について、ノンデザイナーズ・デザインブックでは下記のように記述されています。

アルファベットを基本とする言語と漢字と仮名を基本とする日本語の大きな違いは、縦書きの有無です。

ノンデザイナーズ・デザインブック

縦書きへの意識の有無が差を生む

アルファベットはデザイン自体が一本線(要するに横読みのみを前提)に作られています。 文字ごとに横の幅も高さも違います。

一方で日本語は縦読みも意識した設計にしなければなりません。そのため全ての文字が「正方形」で表されます。

この違いが、実は悪影響を与えてしまうのです。

解消するには日本語の行間を全て1.2倍に

もし、アルファベットと日本語が混ざっているデザインを作るときは、アルファベットに比べ日本語の行間を1.2倍程度にすれば良いということです。

上の画像をご覧ください。英語はline-height: 1.4;、日本語はline-height: 1.68;です。並べてみると大きな違和感がないことが分かります。

一方で行間をどちらも1.4にしてみましょう。

日本語の行間の方が狭くなってしまい、窮屈です。

WEBサイトではどう反映する

ちなみに、アルファベットを前提としたWordPressのテーマなどで、日本語を使って文章を書くときは、CSSで以下のようにしてあげましょう。

css
body:lang(ja),
html:lang(ja) {
line-height: calc ( 英語のpxサイズ * 1.2);
}

あくまで一例ですが、このように、「アルファベットに適用されているline-heightの値をしらべ、calcを使って値を1.2倍に拡大した値を言語属性が <html lang="ja" だった場合に適用する」と良いです。

それぞれのCSSプロパティの使い方については、下記にまとめてあります。

これで、アルファベットを前提に作られているテンプレートを日本語で使ってもきれいになるはずです。