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.