調和数列をもとにしたスケールから文字サイズを決定する手法

[Increments × cyma (Ateam Inc.) Advent Calendar 2020](https://qiita.com/advent-calendar/2020/increments-cyma) の3日目は、
Qiita株式会社 デザインGの出口（@degudegu2510）が担当します！

# はじめに
普段スタイルをいじると、思うことがあります。

> font-sizeを整数にして、line-heightを1.5で指定すると、line-heightが小数点になるじゃん！！
なんか美しくない...。　もっと美しくできないのかな！

そこでGoogle先生に質問！！

Google先生が教えてくれたのが、 **ハーモニックモジュラースケール**。

良さそうだったので、早速触ってみました！

# ハーモニックモジュラースケールとは？
ハーモニックモジュラースケールとは、株式会社シフトブレインのウェブのフロントエンド開発の専門チームのスタンダードデザインユニットが提唱した、調和数列をもとにしたスケールから文字サイズを決定する手法です。

ハーモニックモジュラースケールは、Sassライブラリー「[Harmonic Modular Scale](https://github.com/ShiftbrainStd/harmonic-modular-scale)」とsketchのライブラリー「[Harmonic Modular Scale for Sketch](https://github.com/ShiftbrainStd/Harmonic-Modular-Scale-for-Sketch)」で公開されています。 

[詳しくはこちらをみてください！](https://standard.shiftbrain.com/blog/harmonic-modular-scale-tools)

# 調和数列とは
調和数列とは、等差数列の逆数からなる数列です。

```
等差数列 ・・・ 1, 2, 3, 4, 5, ...
調和数列 ・・・ 1/1, 1/2, 1/3, 1/4, 1/5, ...
```
これを元にして、フォントサイズを決めています！

# 調和数列を使ってサイズを決める

今回は分子を8にした調和数列を使います！ 
>これを使います！
8/4, 8/5, 8/6, 8/7, 1, 8/9, 8/10, 

基準となるフォントサイズを1remとすると、
すると、下のようなサイズになります。

```scss
$font-size-l4: 1rem * 8 / 4; // 2rem
$font-size-l3: 1rem * 8 / 5; // 1.6rem
$font-size-l2: 1rem * 8 / 6; // 1.33333rem
$font-size-l1: 1rem * 8 / 7; // 1.14286rem
$font-size-m:  1rem;
$font-size-s1: 1rem * 8 / 9; // 0.88889rem
$font-size-s2: 1rem * 8 / 10; // 0.8rem
```

ハーモニックモジュラースケールでは、このように調和数列を使ってフォントサイズ決めます！

# line-heightを決める
ハーモニックモジュラースケールでは、font-sizeが最低限おさまる4px単位のline-heightを基準に決めます！

例えば、font-sizeを16pxとしたとき、最低限おさまる4px単位のline-heightは16px。
これを基準に、16, 20, 24, 28とline-heightを決めます！
こんな感じです↓

```scss
$line-height-l3: 1em * 70 / 32; // 28px 
$line-height-l2: 1em * 60 / 32; // 24px 
$line-height-l1: 1em * 50 / 32; // 20px 
$line-height-m: 1em * 40 / 32; // 16px 
$line-height-s1: 1em * 30 / 32; // 12px 
```


また、font-sizeを25.6px(16*8/5)とした時、最低限おさまる4px単位のline-heightは、28px
これを基準に、28, 32, 36, 40とline-heightを決めます！
こんな感じです↓

```scss
$line-height-l3: 1em * 50 / 32; // 40px 
$line-height-l2: 1em * 45 / 32; // 36px 
$line-height-l1: 1em * 40 / 32; // 32px 
$line-height-m: 1em * 35 / 32; // 28px 
$line-height-s1: 1em * 30 / 32; // 24px 
```

# さっそく、Harmonic Modular Scaleを使ってみる

### オプション変数
+ $scale-factor：スケールのもとになる調和数列の、各項の分母にあたる整数。デフォルトは8
+ $base-font-size：スケールの基準になるfont-sizeの値。デフォルトは1rem
+ $line-height-unit：line-heightの最小単位。デフォルトは0.25rem
+ $use-calc：出力結果のfont-sizeとline-heightプロパティの値にcalc()関数を使うかどうか。デフォルトはtrue

これらを変更する時は`@use`でwithを使って上書してください
↓こんなイメージ！

```sass
@use "../node_modules/harmonic-modular-scale" as hms with (
  $base-font-size: 1.25rem,
  $use-calc: false
);
```

### 指定の仕方
sizes()のmixinを使って、引数にfont-sizeとline-heightのスケール（整数値）を入れて、
`sizes(font-sizeのスケール -1~3, line-heightのスケール　-1~3)` をつかいます。
↓ こんなイメージ

```scss
@use "../node_modules/harmonic-modular-scale" as hms;

.text {
  @include hms.sizes(0, 3);
}
```
出力されると、

```scss
.text {
  font-size: 1rem;                  /* 16px */
  line-height: calc(1em * 56 / 32); /* 28px */
}
```
こうなります。


# 結論
line-heightを整数値になると、スタイリングする上で目をつぶっていた、0.○○pxの誤差がなくなって心のモヤモヤが晴れました
特に、ちゃんと余白が24px空いていると、デザインデータとの差分なくスタイルを当てられてるようにかんじます！
ただ、フォントサイズは、`21.3333333`になってるけど...

font-sizeを整数値にして、line-heightに少数つけるのか、
line-heightを整数値にして、font-sizeに少数つけるのかは、好みだと思いますが、
ライブラリーを導入しないで、font-sizeを整数値にして、line-heightを1.5とかにした方がめんどくさくないと思います。
 
---

[Increments × cyma (Ateam Inc.) Advent Calendar 2020](https://qiita.com/advent-calendar/2020/increments-cyma) の4日目は、株式会社エイチーム EC事業本部の@bayasistがお送りします！！