[HTML/CSS] ずぼらWEBタイポグラフィ

はじめに

WEB構築する際に少しタイポグラフィとか意識したいなと思った際のまとめ。運用してみて時々更新したい。

ずぼらエンジニア向け簡易ルール

1. Font Sizeは三段階くらいにする
   Fontの大きさは適当に。¹
2. フォントを２種類選ぶ
   装飾のあるフォントと、読みやすいフォント。特になければsansを見出しに、serifを本文に。²
3. 本文はserif
   細めのsansでも。長文はserifのほうがよみやすいらしい。³
4. 行間は少し広くすると読みやすい。
5. 1行は38文字ぐらいまで。

踏まえてCSSにするにあたって細かなルールを設定

全般的なサイズ指定

文章の読みやすさなどの文字に関するサイズの指定はremかemで。
vwを利用した相対的な指定は面白そうではあるけれど、また今度。。⁴

font-size

少なくともinputはdefaultの1em（16px）より小さくしない -> iOS対策⁵
Qiitaの本文は1.6remになっていた。

font-size 見出し

h1タグ少し特殊なので、h2とh3と本文で３段階ぐらいの使い分け。
1.2remくらいだと少し弱めで同じ大きさでboldにしたのと似たような強調度。
defaultではh4が1emサイズで、h5からは逆に小さくなる・・・。

h1 {
  font-size: 2.8rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.4rem;
}

ジャンプ率

個人的な感覚としてはboldにすると、1.2emぐらいの強調度。
本文を完全な黒にしないことがあるけど、タイトルだけ少し黒にしたり。まちまち。

font-family

とりあえず、hタグはsans系、他はserif系。そのうちフォントも詰めておきたい。

body {
  font-family: serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: sans-serif;
}

classににするべきだが同じh1やh2レベルの見出しなのに装飾をかえるのに違和感。複数ページではこの限りではない。

Google FontでもFontを選ぶ際によくある組み合わせでタイトルと本文の使い分けを助けてくれる。

line-height

英語は1.5em、日本語は1.8emぐらい。

body {
  font-family: serif;
}
body:lang(ja) {
  line-height: 1.8em;
}
body:lang(en) {
  line-height: 1.5em;
}

padding

スペースとの区別が付きやすいように1emより大きく。

$default-text-padding: 2em;

1行の長さ

1行の長さは長くても38文字程度までに抑える。

$default-text-area-max-width: 38em + $default-text-padding * 2;

.text-container {
  box-sizing: border-box;
  width: $default-text-area-max-width;
}

letter-spacing

見出しなど文章でない部分に効かせると本文と違いが出せるがもはや好み。

h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0.1em;
}

font-feature-settings

基本的にOpenTypeなどの拡張用なので気にしなくていいが、"palt"とか"pkna"は場面によっては使えそう。⁶

body {
  font-feature-settings: palt;
}

font-kerning

defaultでauto。
フォントサイズが小さい場合、無効になるので問題があればnormalを指定⁷⁸

body {
  font-kerning: normal;
}

その他

word-breakなどなどはまた今度。
word-breakは日本語にも効くけど、あまりありがたい場面は少なそう。

完成

resetなり、normalizeのcssが効いてる想定で。

typography.scss

$default-text-padding: 2em;
$default-line-height: 1.8em;
$default-text-area-max-width: 38em + $default-text-padding * 2;

@mixin heading-style($size: 1rem, $weight: normal) {
  font-size: $size;
  font-weight: $weight;
  font-family: sans-serif;

  color: #181818;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: $default-line-height;
}

body {
  font-family: serif;

  color: #383838;
  
  &:lang(ja) {
    line-height: 1.8em;
  }

  &:lang(en) {
    line-height: 1.5em;
  }
}

h1 {
  @include heading-style(2.8rem, 'bold');
}

h2 {
  @include heading-style(2rem);
}

h3 {
  @include heading-style(1.4rem);
}

サンプル

See the Pen Web Typography Sample by minilabo (@minilabo) on CodePen.

テキストに使ったのは、

• lipsum
• すぐに使えるダミーテキスト

今回は使わなったけど、すごく考えられてるみたいで今度よく見てみたい。

• 組見本用創作文

1. 比率でサイズ変更できるscss拡張 Modular Scale ↩

2. 書体の使い分け ↩

3. 明朝体が読みやすい？ ↩

4. 細かくメディアクエリしなくても文字サイズを調整する方法 ↩

5. mobile safariだと1emより小さいサイズのinputを入力しようとすると拡大されてしまい、使いづらい。 ↩

6. 解説とCSS での OpenType 機能の構文 ↩

7. font-kerning ↩

8. font-kerningを無効することで文字間隔を調整というような内容の解説をみたが使い方が間違ってると思う。 ↩