Lism CSS
検索

タイポグラフィトークン

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

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

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

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

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));
}

LH: line-height

Lism CSSでは、line-height をハーフレディングの値で管理する独自の仕組みを採用しています。

詳細は ハーフレディング（line-height） を参照してください。

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>

© Lism CSS. All rights reserved.

目次