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.