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|

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

<p class="-fw:light">Lorem ipsum ...</p>
<p class="-fw:normal">Lorem ipsum ...</p>
<p class="-fw:bold">Lorem ipsum ...</p>

<Text fw="light">Lorem ipsum ...</Text>
<Text fw="normal">Lorem ipsum ...</Text>
<Text fw="bold">Lorem ipsum ...</Text>

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|

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

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.

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

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

<Text lts="s">Lorem ipsum ...</Text>
<Text lts="base">Lorem ipsum ...</Text>
<Text lts="l">Lorem ipsum ...</Text>