Typeface

lineto.com/typefaces/circular

Circular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Sizes

sizefont size remline heightfont size pxline height px
small0.75rem1.512px18px
medium0.875rem1.614px22px
large1.125rem1.4518px26px
xlarge1.5rem1.3524px32px
xxlarge2rem1.232px38px
xxxlarge3rem1.1548px55px
Size smallSize mediumSize largeSize xlargeSize xxlargeSize xxxlarge

Weights

namevalue
book400
medium500
bold700
black900
Weight bookWeight mediumWeight boldWeight black

Semantic variants

Most of the text use cases can be covered by a specific variant.

variantsizefontWeightusage
mainTitlexxlargeblackused for the main title in a view, this variant should be used only once per view
titlelargeboldused for titles
bodymediumnormalused 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 paragraph lines to 50 characters. Use CSS ch unit: <Container maxWidth="50ch">.

Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.
Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.
Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.
Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.
Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.
Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.

CSS helpers