Font Stack
We use Rubik for almost everything brand and marketing related. Rubik is available in one style and we use the normal and medium font-weight.
This is Rubik
<p class="font-rubik text-2xl">This is Rubik</p>Usage
Default Attributes
| Attributes | Class | Value |
|---|---|---|
| Font-family | font-rubik | Rubik |
| Font-size | text-base | 16px |
| Font-weight | font-normal | 400 |
| Line-height | leading-normal | 150% |
Font Family
The default font-family for everything brand related is font-rubik. We use font-mono to display code.
This is the Rubik font
This is the monospace font
<p class="font-rubik">This is the Rubik font</p>
<p class="font-mono">This is the monospace font</p>Font-size
The default font-size for everything brand related is font-base. For headings we use the custom c_h-heading component, see here.
This is text-8xl
This is text-7xl
This is text-6xl
This is text-5xl
This is text-4xl
This is text-3xl
This is text-2xl
This is text-xl
This is text-lg
This is text-base
This is text-sm
This is text-ms
This is text-xs
<p class="text-8xl font-rubik">This is text-8xl</p>
<p class="text-7xl font-rubik">This is text-7xl</p>
<p class="text-6xl font-rubik">This is text-6xl</p>
<p class="text-5xl font-rubik">This is text-5xl</p>
<p class="text-4xl font-rubik">This is text-4xl</p>
<p class="text-3xl font-rubik">This is text-3xl</p>
<p class="text-2xl font-rubik">This is text-2xl</p>
<p class="text-xl font-rubik">This is text-xl</p>
<p class="text-lg font-rubik">This is text-lg</p>
<p class="text-base font-rubik">This is text-base</p>
<p class="text-sm font-rubik">This is text-sm</p>
<p class="text-ms font-rubik">This is text-ms</p>
<p class="text-xs font-rubik">This is text-xs</p>Font-weight
The default font-weight for everything brand related is font-normal. For bold text we use font-medium.
This is normal text
This is bold text
<p class="font-normal font-rubik">This is normal text</p>
<p class="font-medium font-rubik">This is bold text</p>