Typeface

lineto.com/typefaces/circular

Sizes

Please use the naming for sizes from the first column. We are in the process of deprecating our naming from the second column to better align with the design team.

sizesize (deprecated)font size remline heightfont size pxline height px
body-smsmall0.75rem1.512px18px
body-mdmedium0.875rem1.614px22px
body-lglarge1.125rem1.4518px26px
heading-smxlarge1.5rem1.3524px32px
heading-mdxxlarge2rem1.232px38px
heading-lgxxxlarge3rem1.1548px55px

Weights

namevalue
book400
bold700

Semantic variants

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

variantsizefont weightusage
mainTitleheading-mdmediumused for the main title in a view, this variant should be used only once per view
titlebody-lgboldused for titles
bodybody-mdbookused for body text

Color

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

Line length

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

CSS helpers