記事中の文章の行間と文字間と文字の大きさの設定方法を紹介します。
コードは以下の通りです。デザインCSSに貼り付けて、数字を色々変えながら試してみれば良いと思います。デザイン⇛カスタマイズ⇛デザインCSS で行けます。
とりあえずコードの一行ごとに扱い方を説明していきます。
実際のコード
.entry-content p{
line-height: 1.7em; /* 行間の幅調整*/
letter-spacing:1.3pt; /* 文字の間隔調整*/
font-size:15px;
}
まず実際のコードはこれです。「説明はいいや！習うより慣れるぜ」って方はこれコピーして適当に数字変えて使って頂ければ結構です。プレビューと見合わせながら調整していけばそれで十分だと思います。
行間の幅調整
line-height: 1.7em; /* 行間の幅調整*/
これについて説明します。まずは、例を見てみましょう。
line-height: 1.3em; の例
メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
line-height: 1.5em; の例
メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
line-height: 1.7em; の例
メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
line-height: 1.9em; の例
メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
ちょうど良い行間
ちょうど良い行間は個人的には1.5em〜2.0emあたりだと思います。間隔を狭めにすると、小さいスペースに情報を詰めることができます。間隔を広めにするとゆとりがあり読みやすい印象ができると思います。個人的には情報をギッシリ詰めて硬い文章を書く際には狭めの方がいいかな、とか、割と短い文章で感想を述べたり短文で印象を付けたい場合には行間は広いほうがいいかな、と何となくは思いますが最終的には好みだと思います。調整しながら自分で合わせてみてください。
○○emは文字の大きさに対する相対的数値
2.0emと書いた場合には、行間はちょうど文字と同じ大きさの間隔があくことになります。1.0emと書いた場合には全く行間を与えずに、ギュウギュウ詰めで文章を表示することになります。もしも文字のサイズを変更した場合は、その文字のサイズに合わせた行間に自動で調整されます。すなわち2.0emと書いておけば、文字のサイズを変更した際に以下のように、その文字のサイズと同じ行間をあけることになります。
メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
文字の間隔調整
letter-spacing:1.3pt; /* 文字の間隔調整*/
これについて説明します。まずは、例を見てみましょう。
letter-spacing:1.0pt; の例
メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
letter-spacing:1.4pt; の例
メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
letter-spacing:1.8pt; の例
メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
letter-spacing:2.2pt; の例
メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
ちょうどいい文字の間隔
これは行間ほど与える印象は大きくないかなと個人的には思っていますが、さすがに2.2ptともなると空き過ぎかなと思います。詰まって苦しいなと思わない程度にしておけば問題ないと思います。
文字の大きさ
font-size:15px;
これについて説明します。まずは、例を見てみましょう。これが一番与える印象が大きいかなと思います。強調したい文があればそこだけ大きくするなどの処置をしてもいいかもしれませんね。
文字サイズの比較
10pxの場合
11pxの場合
12pxの場合
13pxの場合
14pxの場合
15pxの場合
16pxの場合
17pxの場合
18pxの場合
こうやって見ると16でもやけに大きく見えますが、個人的にはありじゃないかなと思っています。さすがに17くらいからはデカイなって感じですが、意外と文章を書いてみるとそれでもいいのかもしれないと思える場合もあります。例えば写真に対して本当に短文で一言を書くような場合とかには17というフォントサイズでもありなのではないかなと思います。
ともかく、それぞれのフォントサイズで短文を見てみることにしましょう。
font-size:14; の例
メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
font-size:15; の例
メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
font-size:16; の例
メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
font-size:17; の例
メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
ちょうどいい文字の大きさ
普通に文章を書く場合には14〜16が無難かなと思います。
何かの解説文などのように長文を書く際に文字が大きいと、スクロールが大変ですし、視野の移動も大変かなと思います。解説文を読む際にはあくまでそこに書いてある情報をその人は欲してきているわけですから、文字をイタズラに大きくするのは良くないかもしれません。
一方で写真に対して一言文章を書き添えるようなスタイルの場合は、大きめの文字とかでも良いかなと思います。要は視界に一気に伝えたいことが入ればいいわけですから、短文であればむしろ文字が大きいほうがインパクトを与えられるかなと。一旦写真付の例を見てみると印象が伝わるかもしれません。
font-size: 15px の例
焼き加減はレア、断面は赤くて非常に柔らかい肉だった。
とても美味しかった。是非ともまた立ち寄りたい。
font-size: 17px の例
焼き加減はレア、断面は赤くて非常に柔らかい肉だった。
とても美味しかった。是非ともまた立ち寄りたい。
このように写真に対するコメントを出す場合には、15pxでは印象が弱いような気がします。17pxでもまだ小さいかもしれませんね。
文章のみの構成の場合と写真に対するコメントがメインの場合では適したサイズが違うということがわかると思います。
まとめ
再び全体のコードを載せておきたいと思います（冒頭と全く同じです）。
.entry-content p{
line-height: 1.7em; /* 行間の幅調整*/
letter-spacing:1.3pt; /* 文字の間隔調整*/
font-size:15px;
}
行間の幅
1.5〜2.0em くらいがオススメ
読みやすさと情報量のバランスを考えて好みの数値にしてください。
あまり大きすぎるとのっぺりとした印象になるかも。
文字の間隔
僕はあまり個々は敏感ではありません。小さすぎず、大きすぎなければ大丈夫かと思います。
文字の大きさ
基本的な事柄ですが、一番与える印象が大きいと思います。
何かの解説文なのか、写真などに対するコメント文なのか、何を目的した文章なのかによって適切な大きさはかなり変わってくると思います。
なにより試してみないとわからないので、まずはコードをデザインCSSに入れて、プレビューで調整しながら好みの設定を見つけてくださいね。
