Usage
We use sans serif fonts for most of our type in-product, the exception being when you want to display code then you should defer to monospace fonts.
Font-stacks
Google FontsDM Serif DisplayInterIBM Plex Mono
// Sans-Serif Font Stack
font-family: "Inter",sans-serif;
// Serif Font Stack
font-family: "DM Serif Display",serif;
// Mono Font Stack
font-family: "IBM Plex Mono",monospace;
Font System
Out font system is custom curated and picked by our best designers. The system consist of two types font scales; Which areHeadings and Body
Headings
Font Family —"Inter", sans-serifStyleUsageSizeWeightLineSpace
DisplaySize80pxWeight800Line90pxSpace-2px
HeadingSize64pxWeight800Line78pxSpace-2px
HeadingSize48pxWeight700Line60pxSpace-1.5px
HeadingSize28pxWeight700Line40pxSpace-0.5px
HeadingSize20pxWeight600Line28pxSpace-0.5px
Sub HeadingSize12pxWeight600Line12pxSpace5%
Body
Font Family —"Inter", sans-serif"IBM Plex Mono", monospaceStyleUsageSizeWeightLineSpace
BaseSize16pxWeight400Line28pxSpacedefault
Text Extra-SmallSize10pxWeight500Line14pxSpacedefault
Text SmallSize12pxWeight500Line16pxSpacedefault
Text MediumSize18pxWeight400Line28pxSpacedefault
Text LargeSize24pxWeight400Line36pxSpacedefault
QuoteSize20pxWeight600Line28pxSpacedefault
CodeSize14pxWeight500Line20pxSpace-0.6px
LinkSize16pxWeightdefaultLine24pxSpacedefault
Colors
Colors usage of fonts throughout the application.