Zenn
📚

Typographyの基礎の基礎

2022/12/20に公開
CSS
HTML
frontend
#
typography
tech

はじめに

いままでなんとなく、スペーシングをしたり、文字を組んでいたんですが、きれいで読みやすい文字組みできるようになりたい！
ここでは、基本的な文字組の考え方を確認していきたいと思います。なんとなくで決めていたマージンの幅などを考えるキッカケになれば幸いです。

単位

CSSのpxとem・remどれをどこで使用するのがよいかは、こちらの記事で詳しくまとめられているので、割愛したいと思います。

em・remとは？

そもそもemとは、活版印刷の全角を表す単位で、Mの横幅を基準にされています。
また、enは半角で半分の大きさ表し、remはroot（html要素）のをあわらし、読み手が調節可能なブラウザのデフォルト文字サイズが基準となります。
ブラウザのデフォルトフォントサイズが16pxならば、1remは16pxとなります。

そのほかにも、活版印刷時代の名残から来ているものも多く、UPPER CASEやlower caseは、
グーテンベルク以来、長年使われてきた活字のケース（箱）の置き場所に由来します。
(大文字活字のケースが上段、小文字活字のケースが下段に配置されていた。)

em・remの利点

em単位で設計する利点は、相対的に設定できることです。
ユーザーはブラウザ設定で独自のフォントサイズを設定することができるが、pxで指定してしまうと、 絶対指定になってしまい、フォントサイズが無視されてしまいます。

※2018年のデータですが、Evan Mintoによる調査によると、約3%のユーザーがデフォルトサイズではないフォントサイズを設定しているようです。

カラム幅(Measure)

テキストの行の長さを表します。
1行の理想は66文字で、これは、およそ600年前に活版印刷が発明されて以来続いている、印刷工と植字工の慣習を反映したものみたいです。
欧文のカラム幅は、「The Elements of Typographic Style」45文字から75文字の範囲が好ましいとされています。
1emは、おおよそ2文字の長さに相当するので、23 em – 38 em

Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.

.article {
  max-width: 38em;
  margin: 0 auto;
}

行間（Leading）

活版印刷では、鉛（lead）の板で行をわけていていたため、Leadingと呼ぶみたいです。 CSSでは、line-heightプロパティで指定します。line-heightは、なにも指定しないとブラウザ側で1.0 – 1.2の間となります。 通常の組版では、1.2は狭すぎるので、1.4を基準にしましょう。 それを基に、xハイトが低いフォント・weightなどを基にカラーを調整していくのがよさそうです。

body {
  line-height: 1.4;
}

line-heightは、単位なしの値を指定する

単位ありで指定してしまうと、親要素で算出された値が継承されてしまうため、単位なしの値を指定しましょう。

バーティカルリズム(Vertical Rhythm)

縦方向のスペースを一定間隔にすることで、ページ全体にリズムができ、読み進めやすくなります。 ページのバーティカルリズムは、本文の行の高さを基にします。 例えば、本文が16pxでline-heightが1.4の場合は、22.4pxが基準となります。 他のテキストの行の高さ・マージンなどすべての縦方向のスペースをこの基準値の倍数にします。
ブラウザは、デフォルトで上下に1emのマージンが挿入されるため、縦方向のスペースのリズムが崩れます。 まずは、本文のマージンを基準の値と同じにします。

body {
  line-height: 1.4;
}
.article p {
  margin-top: 0;
  margin-bottom: 1.4rem; /* 22.4px */
}

見出しの高さを基準値を基にあわせます。

.article h1 {
  font-size: calc(64rem / 16);
  margin-top: 0;
  margin-bottom: 0.35em; /* 22.4px */
}

.article h2 {
  font-size: calc(32rem / 16);
  margin-top: 0;
  margin-bottom: 0.7em; /* 22.4px */
}

.article h3 {
  font-size: calc(18rem / 16);
  line-height: 1.244;
  margin-top: 0;
  margin-bottom: 1.244em; /* 22.4px */
}

縦方向のスペースを一定にすることで、読みやすく調和の取れた文字組みの印象になりました。
バーティカルリズムのルールを基に文字組できれば説得力のあるデザインが作れますね。

記号の扱いについて

スペース・ハイフン・ダッシュ・マイナスなど以外とちゃんと使いこなせていなかったので、あらためて、記号の扱いについて混同しがちなものや、曖昧なものをここに今後もまとめていこうと思います。

スペース( )

典型的な横幅は単語間を0.25em離しますが、書体デザイナーが他のグリフと同様にスペース幅を指定します。

ノーブレークスペース( )

  • 両側の単語が複数行に別れさせない場合
    • Page 2
  • 名前のイニシャル
    • J.D. Salinger
  • 日付など
    • 14 March
記号 HTML
 Non-Breaking Space  

幅の狭いノーブレークスペース（narrow no-break space）

数字と単位の間などに利用する

  • 幅は、通常 1/24 em
記号 HTML
 Narrow no-break space  

シンスペース( )

通常のスペースでは広すぎるものの、文字間をあける必要がある際に利用する
引用符が入れ子になっているケースなどに利用します。

  • Looking up, he said 'She mouthed "I love you" ' and then returned to his book.

  • 幅は、通常1/6em

記号 HTML
 Thin space  

ヘアスペース( )

とても狭いスペースで、隣接する文字が接触しないようにするのが目的です。

  • 幅は、通常1/24em
記号 HTML
 Hair space  

ハイフンとダッシュ

ハイフンとダッシュは見た目がよく似ているので、混同しがちですが、使い方がことなります。

ハイフン(-)

  • 複数の単語をつないで１つの意味になる場合
    • pick-me-up
  • 複数の単語のあとに同じ単語がつづく場合
    • the short- and long-term effect
  • 口ごもるような表現をする場合
    • p-p-please
  • 行をまたぐ単語を分割する場合
    • ハイフネーション

emダッシュ(—)

  • 補足文
  • 引用文の後に、引用元を表記する場合
  • 会話

enダッシュ(–)

  • 数字で範囲を示す場合（通常はダッシュの両端にスペースを入れる必要はありません。）
    • 4–5minutes
    • 28 March–3 April

数学記号

本文の場合は正しい数学記号を利用します。
ハイフン(-)とマイナス(−)は別ものです。正しい数学記号は、数字の間配置される想定で組まれているので、間隔や高さが適切な状態になります。 通常、マイナス記号(−)は、イコール（=）と線の長さと太さが同じになります。

  • 10 + 10 = 20
  • 10 − 8 = 2
  • 10 ÷ 5 = 2
  • 10 × 5 = 50

引用符(スマート引用符・カーリー引用符)

ストレート引用符は、タイプライター時代の名残で引用符をタイプするのに、１つのキーしか利用できなかった時代のものです。
本文では、正しい引用符（‘’と“”）を利用するようにしましょう。

  • イギリス英語
    ‘The “Stunt typographer” learns the fickleness of rich men who hate to read.’

  • アメリカ英語
    “The ‘Stunt typographer’ learns the fickleness of rich men who hate to read.”

記号一覧

記号 HTML
  Hair space  
  Thin space  
– En dash –
— Em dash —
− Minus −
× Multiply ×
÷ Divide ÷
‘ Left single quote ‘
’ Right single quote ’
“ Left double quote “
” Right double quote ”
& Ampersand &
… Ellipsis …
′ Single prime ′
″ Double prime ″
° Degree °
· Middle dot ·
• Bullet •
© Copy right @copy;
® Registered trademark ®
™ Trademark ™

まとめ

今回は、基礎となる考え方を紹介しましたが、活版印刷時代の名残がたくさんあり、
熟練の印刷工・植字工の直感が現代数学的に導き出したスケールとほとんど同じだったりと驚きました。 説得力のあるキレイな文字組をできるようになりたいですね。

参考

Discussion