Skip to main content

Typography

This topic contains information about the typography design tokens specified in the Allium palette. See the Typography component for detailed implementation and usage guidelines.

Typeface​

Allium's primary typeface is Helvetica Now Text SA, an evolution of the typeface used in Legacy TDS. It provides the same simplicity and clarity as its predecessor, but has been designed to work just as well on modern high resolution digital devices as it always did in traditional media. It has been designed with precision and it commands respect, while remaining a friendly, sophisticated, and neutral typeface that never detracts from the content.

The quick brown fox jumps over the lazy dog.

Font weights​

Weight is used to create proportional contrast throughout the various sizes of typography. It’s intentionally applied to specific sizes to enhance readability and legibility across devices and platforms. Smaller sizes make use of heavier weights and larger sizes use lighter weights.

300
The quick brown fox jumps over the lazy dog.
400
The quick brown fox jumps over the lazy dog.
500
The quick brown fox jumps over the lazy dog.
700
The quick brown fox jumps over the lazy dog.

Font sizes​

Scale creates consistency in sizing across elements. All components in Allium use carefully considered values from this list. Body copy is 16px across all devices and screen sizes.

size12 / 0.75rem
The quick brown fox jumps over the lazy dog.
size14 / 0.875rem
The quick brown fox jumps over the lazy dog.
size16 / 1rem
The quick brown fox jumps over the lazy dog.
size20 / 1.25rem
The quick brown fox jumps over the lazy dog.
size24 / 1.5rem
The quick brown fox jumps over the lazy dog.
size28 / 1.75rem
The quick brown fox jumps over the lazy dog.
size36 / 2.25rem
The quick brown fox jumps over the lazy dog.
size40 / 2.5rem
The quick brown fox jumps over the lazy dog.
size56 / 3.5rem
The quick brown fox jumps over the lazy dog.
size64 / 4rem
The quick brown fox jumps over the lazy dog.
info

Note that if you would like to specify how the text-related components have to scale the fonts depending on the browser settings, you can use forceAbsoluteFontSize flag available in the themeOptions prop on the ThemeProvider

Line height​

ratio10to7 / 1.42857142857
The quick brown fox jumps over the lazy dog.
ratio11to9 / 1.22222222222
The quick brown fox jumps over the lazy dog.
ratio1to1 / 1
The quick brown fox jumps over the lazy dog.
ratio3to2 / 1.5
The quick brown fox jumps over the lazy dog.
ratio4to3 / 1.33333333333
The quick brown fox jumps over the lazy dog.
ratio5to4 / 1.25
The quick brown fox jumps over the lazy dog.
ratio6to5 / 1.2
The quick brown fox jumps over the lazy dog.
ratio7to5 / 1.4
The quick brown fox jumps over the lazy dog.
ratio8to5 / 1.6
The quick brown fox jumps over the lazy dog.
ratio8to7 / 1.14285714286
The quick brown fox jumps over the lazy dog.
ratio9to7 / 1.28571428571
The quick brown fox jumps over the lazy dog.
ratio9to8 / 1.125
The quick brown fox jumps over the lazy dog.

Letter spacing​

condensed / -0.039
The quick brown fox jumps over the lazy dog.
loose / -0.017
The quick brown fox jumps over the lazy dog.
medium / -0.035
The quick brown fox jumps over the lazy dog.

Subscript and superscript​

Typography component can accept text containing subscript or superscript wrapped in corresponding tags (<sub> or <sup>) and will render those according to the main text variant used:

Loading...
info

Note that sub and sup rely on default browser styling and sometimes CSS resets can alter those styling rules. Teams that use CSS resets should make sure they add their own global styling or provide alternative sup and sub components that re-enable { font-size: smaller; vertical-align: sub/super }.

Also, Helvetica Now Text SA font bundled with Allium contains all the most popular special characters often used in superscript, e.g. ™, 🅪, 🅫, ®, etc., and they come already properly positioned, so you can just use those in your text without superscripting:

Loading...