Lism CSS
Docs
検索

タイポグラフィ

フォントファミリー、フォントサイズ、行間など、タイポグラフィに関するデザイントークンについて解説します。

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>

このサイトでは本文の --ff--base を変更しているため、このプレビューは既定値そのままの表示ではありません。

FW: font-weight

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

トークン 変数 クラス 初期値
light --fw--light -fw:light 300
normal --fw--normal -fw:normal 400
bold --fw--bold -fw:bold 600

また、-fw:100 ~ -fw:900 の数値ユーティリティクラスも用意しており、細かいウェイト指定が可能です。

↓
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.

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

FZ: font-size

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

トークン 変数 クラス 初期値
base --fz--base -fz:base 1rem
2xs --fz--2xs -fz:2xs 1em * 8 / 11
xs --fz--xs -fz:xs 1em * 8 / 10
s --fz--s -fz:s 1em * 8 / 9
m --fz--m -fz:m 1em
l --fz--l -fz:l 1em * 8 / 7
xl --fz--xl -fz:xl 1em * 8 / 6
2xl --fz--2xl -fz:2xl 1em * 8 / 5
3xl --fz--3xl -fz:3xl 1em * 8 / 4
4xl --fz--4xl -fz:4xl 1em * 8 / 3
5xl --fz--5xl -fz:5xl 1em * 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>

フォントサイズのスケーリング規則について

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

参考資料: タイポグラフィと余白のスケーリング設計について

いわゆるハーモニックモジュラースケーリングとか呼ばれるもので、Every Layoutなどでもこのスケーリング手法が紹介されています。

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

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

HL: half-leading

Lism CSSでは、全要素に対して line-height をハーフレディング（行の上下それぞれの余白）の値で管理する独自の仕組みを採用しており、--hl 変数にセットした値から line-height が算出されます。

--hl にセットする値として、次のトークンを用意しています。

トークン 変数 クラス 初期値
xs --hl--xs -hl:xs var(--hl-unit)
s --hl--s -hl:s calc(var(--hl-unit) * 2)
base --hl--base -hl:base calc(var(--hl-unit) * 3)
l --hl--l -hl:l calc(var(--hl-unit) * 4)
xl --hl--xl -hl:xl calc(var(--hl-unit) * 5)

--hl-unit はデフォルトで 0.125rem（≒ 2px）です。

↓
Preview

0: 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.

xl: 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="-hl:xs">Lorem ipsum ...</p>
<p class="-hl:s">Lorem ipsum ...</p>
<p class="-hl:base">Lorem ipsum ...</p>
<p class="-hl:l">Lorem ipsum ...</p>
<p class="-hl:xl">Lorem ipsum ...</p>

この設計の背景は ハーフレディング（line-height） を参照してください。

ハーフレディング（line-height）

Lism CSS が line-height をハーフレディングで管理する仕組みと、その設計のメリットについて解説します。

LH: line-height

line-height を倍率で指定する --lh 用のトークンです。フォントサイズに比例した行送りを保ちたい場合に使います。

トークン 変数 クラス 初期値
xs --lh--xs -lh:xs 1.125
s --lh--s -lh:s 1.25
m --lh--m -lh:m 1.5
l --lh--l -lh:l 1.75
xl --lh--xl -lh:xl 2
↓
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.

m: 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.

xl: 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:m">Lorem ipsum ...</p>
<p class="-lh:l">Lorem ipsum ...</p>
<p class="-lh:xl">Lorem ipsum ...</p>

hl との棲み分けは ハーフレディング（line-height） を参照してください。

LTS: letter-spacing

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

トークン 変数 クラス 初期値
base --lts--base -lts:base 0em
xs --lts--xs -lts:xs calc(var(--lts--base) - 0.05em)
s --lts--s -lts:s calc(var(--lts--base) - 0.025em)
l --lts--l -lts:l calc(var(--lts--base) + 0.05em)
xl --lts--xl -lts:xl calc(var(--lts--base) + 0.1em)

--lts--base は長さで指定します（calc() で使うため normal は不可）。xs 〜 xl は --lts--base からの相対値なので、:root で --lts--base を変えると全体が連動します。子孫要素で --lts--base を上書きしても xs 〜 xl には反映されません。

↓
Preview
xs

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

s

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

base

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

l

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

xl

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

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

このサイトでは本文の --ff--base と --lts--base を少し調整しているため、このプレビューは既定値そのままの表示ではありません。

© 2026 Lism CSS.