Typography
Our typography system ensures consistent, readable, and accessible text across all components and applications.
Font Family
Primary Font
PPNeueMontreal - Our primary brand font used for headings and important text.
Fallback Stack
font-family: 'PPNeueMontreal-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
Type Scale
Headings
| Level | Size | Weight | Line Height | Usage |
|---|
| H1 | 2.5rem (40px) | 600 | 1.2 | Page titles |
| H2 | 2rem (32px) | 600 | 1.3 | Section headers |
| H3 | 1.5rem (24px) | 600 | 1.4 | Subsection headers |
| H4 | 1.25rem (20px) | 500 | 1.4 | Component titles |
| H5 | 1.125rem (18px) | 500 | 1.5 | Small headers |
| H6 | 1rem (16px) | 500 | 1.5 | Captions |
Body Text
| Size | Weight | Line Height | Usage | |
|---|
| Large | 1.125rem (18px) | 400 | 1.6 | Hero text, introductions |
| Base | 1rem (16px) | 400 | 1.5 | Body text, paragraphs |
| Small | 0.875rem (14px) | 400 | 1.4 | Captions, metadata |
| Extra Small | 0.75rem (12px) | 400 | 1.3 | Fine print, labels |
CSS Custom Properties
:root {
/* Font Family */
--font-primary: 'PPNeueMontreal-Regular', -apple-system, BlinkMacSystemFont, sans-serif;
/* Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 2rem;
--font-size-4xl: 2.5rem;
/* Font Weights */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
/* Line Heights */
--line-height-tight: 1.2;
--line-height-snug: 1.3;
--line-height-normal: 1.4;
--line-height-relaxed: 1.5;
--line-height-loose: 1.6;
}
Usage Examples
Headings
<h1 className="text-4xl font-semibold">Page Title</h1>
<h2 className="text-3xl font-semibold">Section Header</h2>
<h3 className="text-2xl font-semibold">Subsection</h3>
Body Text
<p className="text-lg leading-relaxed">
Large introductory paragraph text that draws attention.
</p>
<p className="text-base leading-normal">
Standard body text for most content and descriptions.
</p>
<span className="text-sm text-gray-600">
Small caption or metadata text.
</span>
Accessibility
Reading Experience
- Line Height: Optimized for readability (1.4-1.6 for body text)
- Contrast: All text meets WCAG 2.1 AA contrast requirements
- Font Size: Minimum 16px for body text on mobile devices
Responsive Typography
/* Base size */
.text-responsive {
font-size: 1rem;
line-height: 1.5;
}
/* Larger screens */
@media (min-width: 768px) {
.text-responsive {
font-size: 1.125rem;
line-height: 1.6;
}
}
Best Practices
Use a maximum of 3-4 different font sizes per page to maintain visual hierarchy without overwhelming users.
Avoid using font sizes smaller than 14px for body text, as they can be difficult to read on mobile devices.
Hierarchy Guidelines
- Establish Clear Hierarchy: Use size, weight, and spacing to create clear information hierarchy
- Consistent Spacing: Maintain consistent spacing between text elements
- Readable Line Length: Keep line length between 45-75 characters for optimal readability
- Adequate Contrast: Ensure sufficient contrast between text and background colors
Component Integration
Typography styles are built into our components:
import { Heading, Text } from '@abdalkader/ui';
<Heading level={1}>Page Title</Heading>
<Heading level={2}>Section Header</Heading>
<Text size="lg">Large body text</Text>
<Text size="base">Standard body text</Text>
<Text size="sm" color="muted">Caption text</Text>