Typeface
Circular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Sizes
size | font size rem | line height | font size px | line height px |
---|---|---|---|---|
small | 0.75rem | 1.5 | 12px | 18px |
medium | 0.875rem | 1.6 | 14px | 22px |
large | 1.125rem | 1.45 | 18px | 26px |
xlarge | 1.5rem | 1.35 | 24px | 32px |
xxlarge | 2rem | 1.2 | 32px | 38px |
xxxlarge | 3rem | 1 | 48px | 48px |
Size smallSize mediumSize largeSize xlargeSize xxlargeSize xxxlarge
Weights
name | value |
---|---|
book | 400 |
medium | 500 |
bold | 700 |
black | 900 |
Weight bookWeight mediumWeight boldWeight black
Semantic variants
Most of the text use cases can be covered by a specific variant.
variant | size | fontWeight | usage |
---|---|---|---|
mainTitle | xxlarge | black | used for the main title in a view, this variant should be used only once per view |
title | large | bold | used for titles |
body | medium | normal | used for body text |
Variant mainTitle — Granularization of Incoming SignalsVariant title — Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.Variant body — The textures generated by Clouds are extremely thick, partly because of the large number of concurrent grains (up to 60), partly because of a built-in allpass diffuser and reverberator, smearing the shortest transient into a wash of noise - giving the illusion of an even larger number of simultaneous grains.
Color
Use body
color as default text color. Use bodyDimmed
color to de-emphasize text.
Text with "body" colorText with "bodyDimmed" color
Line length
To improme legability limit the paragraph width to 30em
. 1em
is iqual to the font size, so for example the body text max width is iqual to 30 ✕ 0.875rem = 26.25rem
(420px
).
max width of
30em
(22.5rem
|360px
) Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.max width of
30em
(26.25rem
|420px
) Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.max width of
30em
(33.75rem
|540px
) Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.max width of
30em
(45rem
|720px
) Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.max width of
30em
(60rem
|960px
) Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.max width of
30em
(90rem
|1440px
) Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.