Typography

Inter is our brand typeface. It arranges information with a balance of light and strong weights.

Type styles

Applying the styles

Styles can be applied using a .ts-{style-name} class. The classes are composed with Tailwind utility classes and are defined in this _typography.scss file.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 7
Heading 8
Subheading
Body large
Body 1
Body 2
Body 3
<div class="ts-heading-1">Heading 1</div>
<div class="ts-heading-2">Heading 2</div>
<div class="ts-heading-3">Heading 3</div>
<div class="ts-heading-4">Heading 4</div>
<div class="ts-heading-5">Heading 5</div>
<div class="ts-heading-6">Heading 6</div>
<div class="ts-heading-7">Heading 7</div>
<div class="ts-heading-8">Heading 8</div>
<div class="ts-subheading">Subheading</div>
<div class="ts-body-large">Body large</div>
<div class="ts-body-1">Body 1</div>
<div class="ts-body-2">Body 2</div>
<div class="ts-body-3">Body 3</div>

.ts-heading-1 Heading 1
.ts-heading-2 Heading 2
.ts-heading-3 Heading 3
.ts-heading-4 Heading 4
.ts-heading-5 Heading 5
.ts-heading-6 Heading 6
.ts-heading-7 Heading 7
.ts-heading-8 Heading 8
.ts-subheading Subheading
.ts-body-large Body large
.ts-body-1 Body 1
.ts-body-2 Body 2
.ts-body-3 Body 3

Style specs

The following are font size, line height, font weight, and letter spacing specs for the type styles with their Tailwind utility class and Shoelace custom token equivalents:

ts-heading-1

Make things better
.ts-heading-1
Font size
72px (4.5rem)
.text-7xl
--ts-font-7xl
Line height (leading)
72px (4.5rem)
.leading-none
--ts-leading-none
Font weight
700
.font-bold
--ts-font-bold
Letter spacing (tracking)
-0.025em
.tracking-tight
--ts-tracking-tight

ts-heading-2

Make things better
.ts-heading-2
Font size
60px (3.75rem)
.text-6xl
--ts-font-6xl
Line height (leading)
60px (3.75rem)
.leading-none
--ts-leading-none
Font weight
700
.font-bold
--ts-font-bold
Letter spacing (tracking)
-0.025em
.tracking-tight
--ts-tracking-tight

ts-heading-3

Make things better
.ts-heading-3
Font size
48px (3rem)
.text-5xl
--ts-font-5xl
Line height (leading)
48px (3rem)
.leading-none
--ts-leading-none
Font weight
700
.font-bold
--ts-font-bold
Letter spacing (tracking)
-0.025em
.tracking-tight
--ts-tracking-tight

ts-heading-4

Make things better
.ts-heading-4
Font size
36px (2.25rem)
.text-4xl
--ts-font-4xl
Line height (leading)
125%
.leading-tight
--ts-leading-tight
Font weight
700
.font-bold
--ts-font-bold
Letter spacing (tracking)
-0.025em
.tracking-tight
--ts-tracking-tight

ts-heading-5

Make things better
.ts-heading-5
Font size
24px (1.5rem)
.text-2xl
--ts-font-2xl
Line height (leading)
28px (1.75rem)
.leading-7
--ts-leading-7
Font weight
700
.font-bold
--ts-font-bold
Letter spacing (tracking)
-0.025em
.tracking-tight
--ts-tracking-tight

ts-heading-6

Make things better
.ts-heading-6
Font size
20px (1.25rem)
.text-xl
--ts-font-xl
Line height (leading)
24px (1.5rem)
.leading-6
--ts-leading-6
Font weight
500
.font-medium
--ts-font-medium
Letter spacing (tracking)
-0.025em
.tracking-tight
--ts-tracking-tight

ts-heading-7

Make things better
.ts-heading-7
Font size
16px (1rem)
.text-base
--ts-font-base
Line height (leading)
20px (1.25rem)
.leading-5
--ts-leading-5
Font weight
600
.font-semibold
--ts-font-semibold
Letter spacing (tracking)
-0.025em
.tracking-tight
--ts-tracking-tight

ts-heading-8

Make things better
.ts-heading-8
Font size
14px (0.875rem)
.text-sm
--ts-font-sm
Line height (leading)
20px (1.25rem)
.leading-5
--ts-leading-5
Font weight
600
.font-semibold
--ts-font-semibold
Letter spacing (tracking)
-0.025em
.tracking-tight
--ts-tracking-tight

ts-subheading

Make things better
.ts-subheading
Font size
12px (0.75rem)
.text-xs
--ts-font-xs
Line height (leading)
16px (1rem)
.leading-4
--ts-leading-4
Font weight
600
.font-semibold
--ts-font-semibold
Letter spacing (tracking)
normal
.tracking-normal
--ts-tracking-normal
Text transform
uppercase
.uppercase
No token for this attribute

ts-body-large

Teamshares is an employee ownership platform for small business, driven by proprietary software, education, and financial products.
.ts-body-large
Font size
20px (1.25rem)
.text-xl
--ts-font-xl
Line height (leading)
28px (1.75rem)
.leading-7
--ts-leading-7
Font weight
400
.font-normal
--ts-font-normal
Letter spacing (tracking)
normal
.tracking-normal
--ts-tracking-normal

ts-body-1

Teamshares is an employee ownership platform for small business, driven by proprietary software, education, and financial products.
.ts-body-1
Font size
16px (1rem)
.text-base
--ts-font-base
Line height (leading)
24px (1.5rem)
.leading-6
--ts-leading-6
Font weight
400
.font-normal
--ts-font-normal
Letter spacing (tracking)
normal
.tracking-normal
--ts-tracking-normal

ts-body-2

Teamshares is an employee ownership platform for small business, driven by proprietary software, education, and financial products.
.ts-body-2
Font size
14px (0.875rem)
.text-sm
--ts-font-sm
Line height (leading)
20px (1.25rem)
.leading-5
--ts-leading-5
Font weight
400
.font-normal
--ts-font-normal
Letter spacing (tracking)
normal
.tracking-normal
--ts-tracking-normal

ts-body-3

Teamshares is an employee ownership platform for small business, driven by proprietary software, education, and financial products.
.ts-body-3
Font size
12px (0.75rem)
.text-xs
--ts-font-xs
Line height (leading)
16px (1rem)
.leading-4
--ts-leading-4
Font weight
400
.font-normal
--ts-font-normal
Letter spacing (tracking)
normal
.tracking-normal
--ts-tracking-normal

Using Inter

Download Inter

Download Inter for use locally in Figma files, etc. at https://rsms.me/inter/.

Prototype with Inter

To prototype with Inter, use the links available on Google Fonts at https://fonts.google.com/specimen/Inter.