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

## はじめに

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

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

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

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

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

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

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

```scss
h1 {
  font-size: 2.8rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.4rem;
}
```

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

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

```scss
body {
  font-family: serif;
}

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

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

[Google Font](https://fonts.google.com)でもFontを選ぶ際によくある組み合わせでタイトルと本文の使い分けを助けてくれる。

### line-height  
英語は1.5em、日本語は1.8emぐらい。

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

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

```scss
$default-text-padding: 2em;
```

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

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

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

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

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

### font-feature-settings  
基本的にOpenTypeなどの拡張用なので気にしなくていいが、"palt"とか"pkna"は場面によっては使えそう。[^6]

```scss
body {
  font-feature-settings: palt;
}
```

### font-kerning  
defaultでauto。
フォントサイズが小さい場合、無効になるので問題があればnormalを指定[^7][^8]

```scss
body {
  font-kerning: normal;
}
```

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

## 完成

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

```scss: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);
}
```

## サンプル

<p class="codepen" data-height="438" data-theme-id="0" data-default-tab="result" data-user="minilabo" data-slug-hash="KKPXeVv" data-preview="true" style="height: 438px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Web Typography Sample">
  <span>See the Pen <a href="https://codepen.io/minilabo/pen/KKPXeVv/">
  Web Typography Sample</a> by minilabo (<a href="https://codepen.io/minilabo">@minilabo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


テキストに使ったのは、

- [lipsum](https://www.lipsum.com/)
- [すぐに使えるダミーテキスト](https://lipsum.sugutsukaeru.jp/)

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

- [組見本用創作文](http://www.type-labo.jp/Kumimihon.html)

[^1]: 比率でサイズ変更できるscss拡張 [Modular Scale](https://www.modularscale.com/)
[^2]: [書体の使い分け](https://tsutawarudesign.com/yomiyasuku1.html)
[^3]: [明朝体が読みやすい？](http://www.dnp.co.jp/shueitai/koneta/koneta_160622.html)
[^4]: [細かくメディアクエリしなくても文字サイズを調整する方法](https://websemantics.uk/tools/responsive-font-calculator/)
[^5]: mobile safariだと1emより小さいサイズのinputを入力しようとすると拡大されてしまい、使いづらい。
[^6]: [解説](https://ics.media/entry/14087/)と[CSS での OpenType 機能の構文](https://helpx.adobe.com/jp/fonts/using/open-type-syntax.html)
[^7]: [font-kerning](https://developer.mozilla.org/ja/docs/Web/CSS/font-kerning)
[^8]: font-kerningを無効することで文字間隔を調整というような内容の解説をみたが使い方が間違ってると思う。