Typography
Typography System
Our typography system follows the Tailwind typography scale with custom modifications for Cal.com's brand. The system is organized into three main categories:
- Display - Large headings and prominent text
- Body - General text content
- Paragraph - Longer form content with different line heights
Display
Used for large headings and prominent text
Display 3XL
text-3xl font-medium font-display
Font: InterDisplay
Size: 30px
Line Height: 36px
Weight: medium
Display 2XL
text-2xl font-medium font-display
Font: InterDisplay
Size: 24px
Line Height: 32px
Weight: medium
Display XL
text-xl font-medium font-display
Font: InterDisplay
Size: 20px
Line Height: 28px
Weight: medium
Display LG
text-lg font-medium font-display
Font: InterDisplay
Size: 18px
Line Height: 20px
Weight: medium
Display Base
text-base font-medium font-display
Font: InterDisplay
Size: 16px
Line Height: 18px
Weight: medium
Body
Used for general text content
Large Semibold
text-lg font-semibold leading-none
Font: Inter
Size: 18px
Line Height: 20px
Weight: semibold
Base Normal
text-base font-normal leading-none
Font: Inter
Size: 16px
Line Height: 18px
Weight: regular
Base Medium
text-base font-medium leading-none
Font: Inter
Size: 16px
Line Height: 18px
Weight: medium
Small Normal
text-sm font-normal leading-none
Font: Inter
Size: 14px
Line Height: 16px
Weight: regular
Paragraph
Used for longer text content with different line heights
Large Medium Normal
text-lg font-medium leading-normal
Font: Inter
Size: 18px
Line Height: 150%
Weight: medium
Base Normal
text-base font-normal leading-normal
Font: Inter
Size: 16px
Line Height: 150%
Weight: regular
Small Medium Tight
text-sm font-medium leading-tight
Font: Inter
Size: 14px
Line Height: 125%
Weight: medium