Lism Tips

文字のトークン

Lism CSS の文字のトークン（フォント・太さ・大きさ・行の上下の余白・行の高さ・字間）の一覧と、文字の大きさの段の決まり方を説明します。

文字のトークンは、フォント・太さ・大きさ・行の高さ・字間を、決まった段階から選ぶための値です。-fz:l や -fw:bold のようなクラスで使います。トークンそのものの考え方は デザイントークン で説明しています。

FF：フォント（font-family）#

font-family（文字の形の種類）のトークンです。-ff は font-family の略です。

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

mono は、どの文字も同じ幅で並ぶフォント（等幅フォント）です。

表示例

base: Lism 123

accent: Lism 123

mono: Lism 123

html
<div class="l--stack -g:10">
  <p class="-ff:base -fz:xl">base: Lism 123</p>
  <p class="-ff:accent -fz:xl">accent: Lism 123</p>
  <p class="-ff:mono -fz:xl">mono: Lism 123</p>
</div>
補足

表示例の見た目は、このサイトのフォントの設定で変わることがあります。

FW：文字の太さ（font-weight）#

font-weight（文字の太さ）のトークンです。-fw は font-weight の略です。

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

トークンのほかに、-fw:100 から -fw:900 までの数字のクラス（100 ごと）もあります。細かく太さを決めたいときに使います。

表示例

light（300）

normal（400）

bold（600）

900

html
<div class="l--stack -g:5">
  <p class="-fw:light">light（300）</p>
  <p class="-fw:normal">normal（400）</p>
  <p class="-fw:bold">bold（600）</p>
  <p class="-fw:900">900</p>
</div>
補足

太さの違いがどこまで見えるかは、使っているフォントが、その太さを持っているかで変わります。

FZ：文字の大きさ（font-size）#

font-size（文字の大きさ）のトークンです。-fz は font-size の略です。

トークン 変数 クラス 最初の値 親が 16px のとき
base --fz--base -fz:base 1rem 16px
2xs --fz--2xs -fz:2xs 1em * 8 / 11 約 11.6px
xs --fz--xs -fz:xs 1em * 8 / 10 12.8px
s --fz--s -fz:s 1em * 8 / 9 約 14.2px
m --fz--m -fz:m 1em 16px
l --fz--l -fz:l 1em * 8 / 7 約 18.3px
xl --fz--xl -fz:xl 1em * 8 / 6 約 21.3px
2xl --fz--2xl -fz:2xl 1em * 8 / 5 25.6px
3xl --fz--3xl -fz:3xl 1em * 8 / 4 32px
4xl --fz--4xl -fz:4xl 1em * 8 / 3 約 42.7px
5xl --fz--5xl -fz:5xl 1em * 8 / 2 64px

base は rem（ページの根もとの文字の大きさ）が基準です。ほかは em（親の文字の大きさ）が基準なので、親の文字が大きいと、そのぶん大きくなります。右の列は、親が 16px のときの目安です。

表示例

2xs の文字

s の文字

m の文字

l の文字

xl の文字

2xl の文字

3xl の文字

html
<div class="l--stack -g:5">
  <p class="-fz:2xs">2xs の文字</p>
  <p class="-fz:s">s の文字</p>
  <p class="-fz:m">m の文字</p>
  <p class="-fz:l">l の文字</p>
  <p class="-fz:xl">xl の文字</p>
  <p class="-fz:2xl">2xl の文字</p>
  <p class="-fz:3xl">3xl の文字</p>
</div>

文字の大きさの段の決まり方#

Lism の文字の大きさは、調和数列（1/1、1/2、1/3… のように、分数の下の数を1つずつ変えていく並び）をもとにしています。ハーモニック・モジュラースケールとも呼ばれるやり方で、数学的・音楽的にきれいな並びとされています。

最初の設定では、分子（分数の上の数）を 8 にしています。m が 1em（8/8）で、1段大きくなるごとに分母が1つ減り（8/7、8/6…）、1段小さくなるごとに分母が1つ増えます（8/9、8/10…）。

分子は --fz-mol という変数に入っています。

css
: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 では、行の高さ（line-height）を、行の上下それぞれに付く余白（ハーフレディング）の量で決めています（行の高さ（ハーフレディング））。--hl に入れた値から、行の高さが計算されます。-hl は half-leading の略です。

トークン 変数 クラス 最初の値
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）です。なので xs は約 2px、base は約 6px、xl は約 10px になります。

表示例

-hl:xs 行のあいだがせまい。行のあいだがせまい。行のあいだがせまい。

-hl:base ふつうの行のあいだ。ふつうの行のあいだ。ふつうの行のあいだ。

-hl:xl 行のあいだが広い。行のあいだが広い。行のあいだが広い。

html
<div class="l--stack -g:20">
  <p class="-hl:xs -bgc:base-2">-hl:xs 行のあいだがせまい。行のあいだがせまい。行のあいだがせまい。</p>
  <p class="-hl:base -bgc:base-2">-hl:base ふつうの行のあいだ。ふつうの行のあいだ。ふつうの行のあいだ。</p>
  <p class="-hl:xl -bgc:base-2">-hl:xl 行のあいだが広い。行のあいだが広い。行のあいだが広い。</p>
</div>

LH：行の高さ（line-height）#

--lh に入れて、行の高さを倍率で決めるトークンです。文字の大きさに合わせて行の高さも伸び縮みしてほしいときに使います。-lh は line-height の略です。

トークン 変数 クラス 最初の値
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

トークンのほかに -lh:1（行のあいだを無くす）もあります。hl と lh の使い分けは 行の高さ（ハーフレディング） で説明しています。

表示例

-lh:xs 文字の 1.125 倍の行の高さ。文字の 1.125 倍の行の高さ。

-lh:xl 文字の 2 倍の行の高さ。文字の 2 倍の行の高さ。

html
<div class="l--stack -g:20">
  <p class="-lh:xs -bgc:base-2">-lh:xs 文字の 1.125 倍の行の高さ。文字の 1.125 倍の行の高さ。</p>
  <p class="-lh:xl -bgc:base-2">-lh:xl 文字の 2 倍の行の高さ。文字の 2 倍の行の高さ。</p>
</div>

LTS：字と字のあいだ（letter-spacing）#

letter-spacing（字と字のあいだ）のトークンです。-lts は 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:xs 字のあいだがせまい

-lts:base ふつうの字のあいだ

-lts:xl 字のあいだが広い

html
<div class="l--stack -g:5">
  <p class="-lts:xs">-lts:xs 字のあいだがせまい</p>
  <p class="-lts:base">-lts:base ふつうの字のあいだ</p>
  <p class="-lts:xl">-lts:xl 字のあいだが広い</p>
</div>
注意
  • --lts--base には長さ（0.02em など）を入れます。calc() の計算に使うので、normal は入れられません
  • xs から xl は、--lts--base に足したり引いたりした値です。:root で --lts--base を変えると、全部が一緒に変わります
  • ページの中のある要素で --lts--base を変えても、xs から xl には伝わりません

React・Astro で書く場合#

コンポーネントでは、トークンの名前を Props に渡します。

jsx
<Text fw="bold">太い文字</Text>
<Text hl="l">行の上下の余白が広い文字</Text>
<Text lh="m">行の高さが 1.5 倍の文字</Text>
<Text lts="l">字のあいだが広い文字</Text>

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧