Graphik is our typeface. It is a font that is approachable, friendly and professional. It fits our brand spirit, beliefs and design principles.
We have 10 font sizes available. This can be set on any component using the fontSize prop.
<Heading fontSize={9}>Designers should code</Heading>
<Heading fontSize={8}>Designers should code</Heading>
<Heading fontSize={7}>Designers should code</Heading>
<Heading fontSize={6}>Designers should code</Heading>
<Heading fontSize={5}>Designers should code</Heading>
<Heading fontSize={4}>Designers should code</Heading>
<Heading fontSize={3}>Designers should code</Heading>
<Heading fontSize={2}>Designers should code</Heading>
<Heading fontSize={1}>Designers should code</Heading>
<Heading fontSize={0}>Designers should code</Heading>You can also define a custom size for a specific edge case.
<Heading fontSize={120} textAlign="center">
Abc
</Heading>There are 3 different weights available: Regular 400 Medium 500 and SemiBold 600.
In <Text /> the fontWeight is set to 400 by default while <Heading /> uses by default 500
<Heading fontWeight={400}>Aa</Heading>
<Heading fontWeight={500}>Aa</Heading>
<Heading fontWeight={600}>Aa</Heading>Left, right or center align text using the textAlign prop.
<Text textAlign="left">Left aligned text</Text>
<Text textAlign="center">Center aligned text</Text>
<Text textAlign="right">Right aligned text</Text>