Typeface

lineto.com/typefaces/circular

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

Weights

namevalue
regular400
medium500

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

Color

Use body color as default text color. Use bodyDimmed color to de-emphasize text.

Line length

To improme legability limit paragraph lines to 50 characters. Use CSS ch unit: <Container maxWidth="50ch">.

CSS helpers