Typography Tokens

This page covers Lism’s typography design tokens: font-family, font-size, line-height, and more.

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
`light`	`--fw--light`	`-fw:light`	`300`
`normal`	`--fw--normal`	`-fw:normal`	`400`
`bold`	`--fw--bold`	`-fw:bold`	`600`

Numeric classes -fw:100 through -fw:900 are also available for fine-grained weight control.

↓

Preview

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

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

xs

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

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.

xl

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

2xl

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

3xl

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

4xl

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

5xl

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

<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 scales font sizes using a harmonic series — a progression valued for both its mathematical and musical elegance.

Reference: On typography and spacing scaling design

This approach — sometimes called harmonic modular scaling — is also covered in resources like Every Layout.

By default, Lism CSS uses the harmonic series with numerator 8 as its scale.

On this documentation site, --fz-mol is set to 7 for English pages.

: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 takes a unique approach to line-height, managing it through half-leading values.

For details, see Half-Leading (line-height).

LTS: letter-spacing

Tokens for letter-spacing.

Token	Variable	Class	Default value
`base`	`--lts--base`	`-lts:base`	`normal`
`s`	`--lts--s`	`-lts:s`	`-0.025em`
`l`	`--lts--l`	`-lts:l`	`0.05em`
`xl`	`--lts--xl`	`-lts:xl`	`0.1em`

↓

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.

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