Increments × cyma (Ateam Inc.) Advent Calendar 2020 の3日目は、
Qiita株式会社 デザインGの出口（@degudegu2510）が担当します！
はじめに
普段スタイルをいじると、思うことがあります。
font-sizeを整数にして、line-heightを1.5で指定すると、line-heightが小数点になるじゃん！！
なんか美しくない...。 もっと美しくできないのかな！
そこでGoogle先生に質問！！
Google先生が教えてくれたのが、 ハーモニックモジュラースケール。
良さそうだったので、早速触ってみました！
ハーモニックモジュラースケールとは？
ハーモニックモジュラースケールとは、株式会社シフトブレインのウェブのフロントエンド開発の専門チームのスタンダードデザインユニットが提唱した、調和数列をもとにしたスケールから文字サイズを決定する手法です。
ハーモニックモジュラースケールは、Sassライブラリー「Harmonic Modular Scale」とsketchのライブラリー「Harmonic Modular Scale for Sketch」で公開されています。
調和数列とは
調和数列とは、等差数列の逆数からなる数列です。
等差数列 ・・・ 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とすると、
すると、下のようなサイズになります。
$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を決めます！
こんな感じです↓
$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を決めます！
こんな感じです↓
$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を使って上書してください
↓こんなイメージ！
@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) をつかいます。
↓ こんなイメージ
@use "../node_modules/harmonic-modular-scale" as hms;
.text {
@include hms.sizes(0, 3);
}
出力されると、
.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 の4日目は、株式会社エイチーム EC事業本部の@bayasistがお送りします！！