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:light300
normal--fw--normal-fw:normal400
bold--fw--bold-fw:bold600

また、-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:base1rem
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>

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

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

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

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

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

当サイトの英語ページでは --fz-mol を 7 に設定しています。

: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:xsvar(--hl-unit)
s--hl--s-hl:scalc(var(--hl-unit) * 2)
base--hl--base-hl:basecalc(var(--hl-unit) * 3)
l--hl--l-hl:lcalc(var(--hl-unit) * 4)
xl--hl--xl-hl:xlcalc(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:xs1.25
s--lh--s-lh:s1.5
m--lh--m-lh:m1.75
l--lh--l-lh:l2
xl--lh--xl-lh:xl2.25

各値は、基準フォントサイズ（1rem）におけるデフォルトの hl スケールと一致します。

↓
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:base0em
xs--lts--xs-lts:xscalc(var(--lts--base) - 0.05em)
s--lts--s-lts:scalc(var(--lts--base) - 0.025em)
l--lts--l-lts:lcalc(var(--lts--base) + 0.05em)
xl--lts--xl-lts:xlcalc(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.