Lism Tips

文字（大きさ・太さ・行間）

文字の見た目を決める Property Class（-fz・-fw・-ff・-hl・-lh・-lts・-ta など）の一覧です。使える値と、画面の幅で切り替えられるかをまとめます。

文字の大きさ・太さ・書体・行の高さ・文字の間隔・そろえ方を決めるクラスの一覧です。値の多くは、文字のトークン（前もって決めた段階の値）から選びます。

どんなときに使う？#

  • 見出しを大きく・太くしたいとき（-fz:xl -fw:bold）
  • 文字を真ん中にそろえたいとき（-ta:center）
  • 行と行のあいだを詰めたり広げたりしたいとき（-hl:s・-lh:l）

使い方#

表示例

Example text

html
<p class="-fz:xl -fw:bold -lts:l -ta:center -tt:uppercase">Example text</p>

この1行で、大きく（-fz:xl）、太く（-fw:bold）、文字の間を少し広く（-lts:l）、真ん中に（-ta:center）、英字を大文字に（-tt:uppercase）しています。

一覧#

略した名前 CSS プロパティ 用意された値 BP
f font inherit -
fz font-size FZ のトークン ✔
ff font-family FF のトークン -
fw font-weight FW のトークン・100〜900 -
fs font-style italic -
hl line-height（ハーフレディング） HL のトークン・0 ✔
lh line-height（倍率） LH のトークン・1 -
lts letter-spacing LTS のトークン -
ta text-align center・left・right -
td text-decoration none -
tt text-transform uppercase・lowercase -
補足

ff・fw・fs・f・lts・ta・td・tt は、main.css に値の無い形のクラス（-ff など）がありません。そのため HTML では、-ff と --ff で好きな値を渡すことはできず、表の値から選びます（full.css にはあります）。hl は full.css にもありません。

トークンの中身（それぞれの値の大きさ）は、文字のトークン にまとめています。

文字の大きさ（-fz）#

fz は font-size の略です。値は 2xs・xs・s・m・base・l・xl・2xl・3xl・4xl・5xl から選びます。

表示例

-fz:s 小さめ

-fz:m ふつう

-fz:l 大きめ

-fz:2xl

html
<div class="l--stack -g:5">
  <p class="-fz:s">-fz:s 小さめ</p>
  <p class="-fz:m">-fz:m ふつう</p>
  <p class="-fz:l">-fz:l 大きめ</p>
  <p class="-fz:2xl">-fz:2xl</p>
</div>

base だけは 1rem（ページの基本の大きさ）です。ほかの値は 1em をもとに計算するので、親の文字の大きさに合わせて変わります。

文字の太さ（-fw）#

fw は font-weight の略です。トークンの light（300）・normal（400）・bold（600）と、数字の 100〜900（100 きざみ）が使えます。

表示例

-fw:light

-fw:normal

-fw:bold

-fw:800

html
<div class="l--stack -g:5">
  <p class="-fw:light">-fw:light</p>
  <p class="-fw:normal">-fw:normal</p>
  <p class="-fw:bold">-fw:bold</p>
  <p class="-fw:800">-fw:800</p>
</div>

書体（-ff）#

ff は font-family の略です。base（基本）・accent・mono（等幅。文字の幅がそろった書体）の3つがあります。

表示例

-ff:base Lism CSS

-ff:accent Lism CSS

-ff:mono Lism CSS

html
<div class="l--stack -g:5">
  <p class="-ff:base">-ff:base Lism CSS</p>
  <p class="-ff:accent">-ff:accent Lism CSS</p>
  <p class="-ff:mono">-ff:mono Lism CSS</p>
</div>

行の高さ（-hl と -lh）#

行の高さを決めるクラスは2つあります。

  • -hl（half-leading）：行の上と下にそれぞれ付く余白（ハーフレディング）の量で決めます。Lism では、ふつうはこちらで行の高さを決めています
  • -lh（line-height）：文字の大きさの何倍にするかで決めます
クラス 決め方 値
-hl:{値} 上下の余白の量 xs・s・base・l・xl・0
-lh:{値} 文字の大きさの倍率 xs・s・m・l・xl・1

表示例

-hl:xs 行の上下の余白が小さいと、2行めとの間が詰まって見えます。

-hl:xl 行の上下の余白が大きいと、2行めとの間がゆったり見えます。

html
<div class="l--columns -g:20 -ai:start" style="--cols: 2">
  <p class="-hl:xs -bgc:base-2">-hl:xs 行の上下の余白が小さいと、2行めとの間が詰まって見えます。</p>
  <p class="-hl:xl -bgc:base-2">-hl:xl 行の上下の余白が大きいと、2行めとの間がゆったり見えます。</p>
</div>

2つの段落を2列に並べて、どちらも2行以上に折り返すようにしています。行と行の間の広さを比べてみてください。

-hl:0 は上下の余白を無くします。-lh:1 は行の高さを文字の大きさと同じにします。しくみは 行の高さ（ハーフレディング） で説明しています。

文字の間隔（-lts）#

lts は letter-spacing の略です。値は xs・s・base・l・xl です。

表示例

-lts:s 文字の間隔

-lts:base 文字の間隔

-lts:xl 文字の間隔

html
<div class="l--stack -g:5">
  <p class="-lts:s">-lts:s 文字の間隔</p>
  <p class="-lts:base">-lts:base 文字の間隔</p>
  <p class="-lts:xl">-lts:xl 文字の間隔</p>
</div>

そろえ方・飾り・大文字（-ta・-td・-tt）#

クラス 何が起きるか
-ta:center・-ta:left・-ta:right 文字を真ん中・左・右にそろえる
-td:none 下線などの線を消す（リンクの下線を消すときなど）
-tt:uppercase・-tt:lowercase 英字をすべて大文字・小文字で表示する
-fs:italic 斜めの文字にする
-f:inherit 書体・大きさ・太さなどを親と同じにする

表示例

-ta:right 右にそろえる

-tt:uppercase hello

-fs:italic Italic

-td:none 下線の無いリンク

html
<div class="l--stack -g:5">
  <p class="-ta:right">-ta:right 右にそろえる</p>
  <p class="-tt:uppercase">-tt:uppercase hello</p>
  <p class="-fs:italic">-fs:italic Italic</p>
  <p><a href="#" class="-td:none">-td:none 下線の無いリンク</a></p>
</div>

画面の幅で切り替える#

文字のクラスで切り替えられるのは fz と hl の2つです。

表示例

スマートフォンではふつう、広い画面では大きな文字

html
<p class="-fz:m -fz_sm" style="--fz_sm: var(--fz--2xl)">スマートフォンではふつう、広い画面では大きな文字</p>

React・Astro で書く場合#

jsx
<Text fz="xl" fw="bold" lts="l" ta="center" tt="uppercase">
  Example text
</Text>

関連するページ#

公式ドキュメント

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

ページの一覧