【CSS】letter-spacing(字間スペース)・line-height(行の高さ)を設定して、読みやすいデザインにする

      2021/06/22   2056文字

【CSS】letter-spacing(字間スペース)・line-height(行の高さ)を設定して、読みやすいデザインにする

今回は、かなり地味めなCSSプロパティ(字間スペース&行の高さ)を取り上げます。地味とはいえ、設定次第で読みやすい・読みにくいサイトになったりする、デザイン上重要な項目です。ここでは、letter-spacingとline-heightプロパティの詳細と、設定例を確認してみましょう。

CSSのletter-spacing(字間スペース)・line-height(行の高さ)とは?

letter-spacing(字間スペース)で、字間スペースを調整しよう

letter-spacingは英語の意味の通り、『字間スペース』のことです。正の値を指定すると字間が開き、負の値を指定すると字間が詰められます。指定のしかたは『letter-spacing: normal;(デフォルト値)』のようなキーワード指定のほか、『letter-spacing: 0.5em;』のようなlength値(pxやemなど)、『line-height: inherit;』のようなグローバル値を設定できます。

なお、不適切な値を設定してしまうと(例えば、極端に大きいマイナス値など)・・・

このように重なって、字が読めなくなってしまいます(例はletter-spacing: -0.5em;の場合。1emが16px。)。極端に広い場合も読みにくくなりますので注意です。とはいえ、微妙に開けてやったりすると、スタイリッシュな感じと読みやすさを両立できます。

line-height(行の高さ)で、縦方向の間隔を調整

letter-spacingが横方向の文字間隔なら、line-height(行の高さ)で、縦方向の間隔を調整することができます。
『line-height: normal;のようなキーワード値』のほか、『line-height: 3.5;のような単位なしの数値(要素のフォントサイズに掛けた値・MDNサイトで確認。)』を設定することものできます。

なお、こちらも不適切な値を設定すると・・・

重なって読めなくなるので注意しましょう(例はline-height:0.5em;を指定。このP要素の1emが16px。)。


ただし、letter-spacingが読みやすい値であれば、『積極的に、行の高さをあえて開けるようなレイアウトを作る』という場合にも使えそうです(例はline-height: 3em;)。

letter-spacing・line-heightの使い方

最後に、簡単にですが『letter-spacing』『line-height』の使い方を、当サイトでの利用を例にしてみてみましょう。以下CSSです(他にも適切な使い方があるかもしれません)。

letter-spacingはbodyに指定しました。これでサイト全体(他にletter-spacingを指定しない場合)にかかります。普段emで指定することが多いのでemです(1emが16px)。0.2emだと少し広すぎるので0.1です。px指定するときは、デベロッパーツールなどで1px単位で変えてみて、読みやすいポイントを探します。

P要素には独自にline-heightを指定。 1.875emで、少し上下が空く感じになります。くっつきすぎても読みにくいので、ここも細かくいろいろな数値でやってみます。

あとがき・まとめ

  • CSSのletter-spacingで字間スペースを調整できる
  • line-heightでは、行の高さ・縦方向の間隔を調整できる
  • 極端な値を設定すると、重なる・離れすぎるなどで読みにくくなるので注意

まとめると、こんなところでしょうか。地味目なプロパティですが、読みやすさのほかに、字間スペース&行の高さ(あとフォントか?)で、ちょっとスタイリッシュな雰囲気も出せそうです。


【カテゴリ】 - CSS
【タグ】 -

  関連記事

自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)
cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)
bulma.cssで、サクッとお洒落モダンデザインにリニューアルしてみる【フレームワークwebサイト制作】
CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】
【html5 videoとcss】ヘッダーやメインビジュアル背景に動画を使ってインパクトを与える方法
【CSSエディット】『 』みたいな空白スペース・改行タグでレイアウト調整が良くない理由
【ワードプレスstingerスマホ最適化】記事一覧タイトル表示場所をPC/SPで切り替えて、スマホレイアウトで見やすくする
【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装
スクロール後に変な位置に移動するタイトルをcssのpositionで直す(wp rootstrapテーマ)
【CSSオンリー・超軽量】JavaScriptすら使わない!CSSだけで動くスライダー作ってみた(PC向け横長レイアウト)
WordPressのアーカイブって、記事が増えると長くてたいへん!CSSで短くして使いやすくするには?
wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)