Typography & Spacing

Typography

FF: font-family

Tokens for font-family.

Token	Variable	Class
`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

Tokens for font-weight.

Token	Variable	Class	Default value
`thin`	`--fw--thin`	`-fw:thin`	`100`
`light`	`--fw--light`	`-fw:light`	`300`
`normal`	`--fw--normal`	`-fw:normal`	`400`
`medium`	`--fw--medium`	`-fw:medium`	`500`
`bold`	`--fw--bold`	`-fw:bold`	`700`
`black`	`--fw--black`	`-fw:black`	`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.

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

Tokens for font-size.

Token	Variable	Class	Default value
`base`	`--fz--base`	`-fz:base`	`--REM`
`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>

Font Size Scaling Rules

Lism defines font-size scaling based on mathematically elegant scaling principles.

Reference: Music, Mathematics, and Typography

By default, the scaling is based on the harmonic series with numerator 8.

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

LH: line-height

Lism CSS takes a unique approach to line-height, managing it through half-leading values.

Half-leading refers to the spacing above and below a line of text — the space between line-height and the actual character height.

In Lism, the following style is applied to all elements:

body * {
  line-height: calc(1em + var(--hl, var(--hl--base)) * 2);
}

This makes line-height depend on the --hl variable (which specifies the half-leading amount), enabling layouts where the spacing between text remains consistent regardless of font size.

Tokens are also provided under --hl--.

Token	Variable	Default value
`xs`	`--hl--xs`	`var(--hl-unit)`
`s`	`--hl--s`	`calc(var(--hl-unit) * 2)`
`base`	`--hl--base`	`calc(var(--hl-unit) * 3)`
`l`	`--hl--l`	`calc(var(--hl-unit) * 4)`

The --hl-unit above is defined as follows:

:root{
  --hl-unit: calc(var(--REM) * 0.125); /* ≒ 2px */
}

(Since --REM ≒ 1rem, --hl-unit is expected to be approximately 2px.)

The lh class uses these variables internally:

.-lh\:base {
  --hl: var(--hl--base);
}
.-lh\:xs {
  --hl: var(--hl--xs);
}
.-lh\:s {
  --hl: var(--hl--s);
}
.-lh\:l {
  --hl: var(--hl--l);
}

↓

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.

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.

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

Benefits of Half-Leading Management

When line-height is set to a typical value like 1.6, the effective line spacing grows as the font size increases.

This works fine for body-sized text, but for headings it becomes too large and difficult to read.

By fixing the half-leading to a constant value, the distance between lines stays the same regardless of font size.

↓

Preview

H1: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

H2: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

H3: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

H4: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

H5: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

p : ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

s: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

Additionally, removing half-leading becomes straightforward.

Reference: Half-leading trim class

LTS: letter-spacing

Tokens for letter-spacing.

Token	Variable	Class	Default value
`base`	`--lts--base`	`-lts:base`	`normal`
`s`	`--lts--s`	`-lts:s`	`-0.05em`
`l`	`--lts--l`	`-lts:l`	`0.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>

`SPACE`: Spacing Scale

Spacing uses a scaling system based on the Fibonacci sequence ((0, 1,) 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, …).

By default, 0.5rem ≈ 8px is used as the scaling unit, with token values 10, 20, 30, … 80 defined accordingly. However, since those intervals can feel too large in practice, 5 and 15 are included as fine-tuning exceptions for the lower end of the scale.

:root{
  /* Fibonacci scale with spacing unit of 8 */
  --s-unit: calc(var(--REM) * 0.5); /* ≒ 8px */
  --s5: calc(0.5 * var(--s-unit)); /* exception */
  --s10: var(--s-unit);
  --s15: calc(1.5 * var(--s-unit)); /* exception */
  --s20: calc(2 * var(--s-unit));
  --s30: calc(3 * var(--s-unit));
  --s40: calc(5 * var(--s-unit));
  --s50: calc(8 * var(--s-unit));
  --s60: calc(13 * var(--s-unit));
  --s70: calc(21 * var(--s-unit));
  --s80: calc(34 * var(--s-unit));
}

↓

Preview

5

10

15

20

30

40

50

60

70

80

リサイズ可能