コンテンツにスキップ
Lism CSS

Typography & Spacing

Typography

Section titled “Typography”

FF: font-family

Section titled “FF: font-family”

font-family 用のトークンです。

トークン変数クラス
base--ff--base-ff:base
accent--ff--accent-ff:accent
mono--ff--mono-ff:mono
↓
Preview

base: English text, 漢字ひらがな

accent: English text, 漢字ひらがな

mono: English text, 漢字ひらがな 

<p class="-ff:base -fz:xl">Lorem ipsum ...</p>
<p class="-ff:accent -fz:xl">Lorem ipsum ...</p>
<p class="-ff:mono -fz:xl">Lorem ipsum ...</p>

FW : font-weight

Section titled “FW : font-weight”

font-weight 用のトークンです。

トークン変数クラス初期値
thin--fw--thin-fw:thin100
light--fw--light-fw:light300
normal--fw--normal-fw:normal400
medium--fw--medium-fw:medium500
bold--fw--bold-fw:bold700
black--fw--black-fw:black900
↓
Preview

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. 

<p class="-fw:light">Lorem ipsum ...</p>
<p class="-fw:normal">Lorem ipsum ...</p>
<p class="-fw:bold">Lorem ipsum ...</p>

FZ: font-size

Section titled “FZ: font-size”

font-size 用のトークンです。

トークン変数クラス初期値
base--fz--base-fz:base--REM
2xs--fz--2xs-fz:2xs1em * 8 / 11
xs--fz--xs-fz:xs1em * 8 / 10
s--fz--s-fz:s1em * 8 / 9
m--fz--m-fz:m1em
l--fz--l-fz:l1em * 8 / 7
xl--fz--xl-fz:xl1em * 8 / 6
2xl--fz--2xl-fz:2xl1em * 8 / 5
3xl--fz--3xl-fz:3xl1em * 8 / 4
4xl--fz--4xl-fz:4xl1em * 8 / 3
5xl--fz--5xl-fz:5xl1em * 8 / 2
↓
Preview
2xs

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

xs

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

s

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

base

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

l

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

xl

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

2xl

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

3xl

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

4xl

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

5xl

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

<p class='-fz:2xs'>Lorem ipsum ...</p>
<p class='-fz:xs'>Lorem ipsum ...</p>
<p class='-fz:s'>Lorem ipsum ...</p>
<p class='-fz:m'>Lorem ipsum ...</p>
<p class='-fz:base'>Lorem ipsum ...</p>
<p class='-fz:l'>Lorem ipsum ...</p>
<p class='-fz:xl'>Lorem ipsum ...</p>
<p class='-fz:2xl'>Lorem ipsum ...</p>
<p class='-fz:3xl'>Lorem ipsum ...</p>
<p class='-fz:4xl'>Lorem ipsum ...</p>

フォントサイズのスケーリング規則

Section titled “フォントサイズのスケーリング規則”

Lism では、フォントサイズのスケーリングには数学的に美しいとされるスケーリング規則に基づいて定義しています。

参考: 音楽、数学、タイポグラフィ

デフォルトでは、分子8の調和数列ベースに設定しています。

:root{
  $fzmol: 8;
  --fz--4xl: calc(1em * $fzmol / ($fzmol - 5));
  --fz--3xl: calc(1em * $fzmol / ($fzmol - 4));
  --fz--2xl: calc(1em * $fzmol / ($fzmol - 3));
  --fz--xl: calc(1em * $fzmol / ($fzmol - 2));
  --fz--l: calc(1em * $fzmol / ($fzmol - 1));
  --fz--m: 1em;
  --fz--s: calc(1em * $fzmol / ($fzmol + 1));
  --fz--xs: calc(1em * $fzmol / ($fzmol + 2));
  --fz--2xs: calc(1em * $fzmol / ($fzmol + 3));
}

LH: line-height

Section titled “LH: line-height”

Lism CSSでは、line-height の扱いが独特となっており、ハーフレディングの値でline-heigthを管理する仕組みになっています。

ハーフレディングとは、line-heightから文字サイズを除いた上下の余白部分のことです。

Lism では、全要素に対し、以下のスタイルが適用されています。

body * {
  line-height: calc(1em + var(--hl, var(--hl--base)) * 2);
}

これにより、line-heightの値は、--hl というハーフレディングを指定するための変数に依存する仕組みになっており、 どんな文字サイズのテキストに対しても同じ余白量でレイアウトを組んでいくことが可能です。

トークンも、 --hl--で用意しています。

トークン変数初期値
xs--hl--xsvar(--hl-unit)
s--hl--scalc(var(--hl-unit) * 2)
base--hl--basecalc(var(--hl-unit) * 3)
xl--hl--xlcalc(var(--hl-unit) * 4)

上記の--hl-unitは次のように定義されています。

:root{
  --hl-unit: calc(var(--REM) * 0.125); /* ≒ 2px */
}

（--REM ≒ 1rem になっているため、--hl-unit は 2px前後の値となる想定です。）

そして、lhクラスの内部でこれらの変数を扱うようにしています。

.-lh\:base {
  --hl: var(--hl--base);
}
.-lh\:xs {
  --hl: var(--hl--xs);
}
.-lh\:s {
  --hl: var(--hl--s);
}
.-lh\:l {
  --hl: var(--hl--l);
}
↓
Preview

1: Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

xs: Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

s: Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

base: Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

l: Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. 

<p class="-lh:xs">Lorem ipsum ...</p>
<p class="-lh:s">Lorem ipsum ...</p>
<p class="-lh:base">Lorem ipsum ...</p>
<p class="-lh:l">Lorem ipsum ...</p>
<p class="-lh:xl">Lorem ipsum ...</p>

ハーフレディング管理のメリット

Section titled “ハーフレディング管理のメリット”

line-heigtを1.6などの一般的な値でセットした場合、フォントサイズが大きくなるにつれて、line-heightの値も大きくなってしまいます。

ベースサイズ付近のテキストであればそれでいいのですが、見出しなどになるとこれでは大きすぎて読みづらいという問題が発生してきます。

行間のハーフレディングを、固定値で管理することで、フォントサイズが大きくなってもテキスト間の距離が一定に保たれます。

↓
Preview

H1: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

H2: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

H3: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

H4: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

H5: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

p : ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

s: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

さらに、ハーフレディング除去も簡単になります。

参考: ハーフレディング除去クラス

LTS: letter-spacing

Section titled “LTS: letter-spacing”

letter-spacing 用のトークンです。

トークン変数クラス初期値
base--lts--base-lts:basenormal
s--lts--s-lts:s-0.05em
l--lts--l-lts:l0.05em
↓
Preview

s: Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

base: Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

l: Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. 

<p class="-lts:s">Lorem ipsum ...</p>
<p class="-lts:base">Lorem ipsum ...</p>
<p class="-lts:l">Lorem ipsum ...</p>

SPACE: 余白のスケーリング

Section titled “SPACE: 余白のスケーリング”

スペーシングに対しては、フィボナッチ数列 ((0, 1,) 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, …) に基づいたスケーリングを採用しています。

デフォルトでは0.5rem　≒ 8px をスケーリングの単位としてトークン値10, 20, 30, … 80 を用意しています。
ただし、それだけだと少し間隔が広いので、例外として前半には微調整用の 5, 15 を用意しています。

:root{
  /* スペーシング単位 8 で フィボナッチ*/
  --s-unit: calc(var(--REM) * 0.5); /* ≒ 8px */
  --s5: calc(0.5 * var(--s-unit)); /* 例外 */
  --s10: var(--s-unit);
  --s15: calc(1.5 * var(--s-unit)); /* 例外 */
  --s20: calc(2 * var(--s-unit));
  --s30: calc(3 * var(--s-unit));
  --s40: calc(5 * var(--s-unit));
  --s50: calc(8 * var(--s-unit));
  --s60: calc(13 * var(--s-unit));
  --s70: calc(21 * var(--s-unit));
  --s80: calc(34 * var(--s-unit));
}
↓
Preview
5
10
15
20
30
40
50
60
70
80
リサイズ可能