1# Typography Specifications
2 
3Guidelines for defining and implementing brand typography.
4 
5## Font Stack Structure
6 
7### Primary Fonts
8```css
9/* Headings - Display font for impact */
10--font-heading: 'Inter', system-ui, -apple-system, sans-serif;
11 
12/* Body - Readable for long-form content */
13--font-body: 'Inter', system-ui, -apple-system, sans-serif;
14 
15/* Monospace - Code, technical content */
16--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
17```
18 
19### Font Loading
20```html
21<!-- Google Fonts (recommended) -->
22<link rel="preconnect" href="https://fonts.googleapis.com">
23<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
24```
25 
26## Type Scale
27 
28### Base System
29- Base size: 16px (1rem)
30- Scale ratio: 1.25 (Major Third)
31 
32### Scale Definition
33| Element | Size (rem) | Size (px) | Weight | Line Height |
34|---------|------------|-----------|--------|-------------|
35| Display | 3.815rem | 61px | 700 | 1.1 |
36| H1 | 3.052rem | 49px | 700 | 1.2 |
37| H2 | 2.441rem | 39px | 600 | 1.25 |
38| H3 | 1.953rem | 31px | 600 | 1.3 |
39| H4 | 1.563rem | 25px | 600 | 1.35 |
40| H5 | 1.25rem | 20px | 600 | 1.4 |
41| Body Large | 1.125rem | 18px | 400 | 1.6 |
42| Body | 1rem | 16px | 400 | 1.5 |
43| Small | 0.875rem | 14px | 400 | 1.5 |
44| Caption | 0.75rem | 12px | 400 | 1.4 |
45 
46### Responsive Adjustments
47```css
48/* Mobile (< 768px) */
49h1 { font-size: 2rem; }    /* 32px */
50h2 { font-size: 1.5rem; }  /* 24px */
51h3 { font-size: 1.25rem; } /* 20px */
52body { font-size: 1rem; }  /* 16px */
53 
54/* Desktop (>= 768px) */
55h1 { font-size: 3rem; }    /* 48px */
56h2 { font-size: 2.25rem; } /* 36px */
57h3 { font-size: 1.75rem; } /* 28px */
58body { font-size: 1rem; }  /* 16px */
59```
60 
61## Font Weights
62 
63### Weight Scale
64| Name | Value | Usage |
65|------|-------|-------|
66| Regular | 400 | Body text, paragraphs |
67| Medium | 500 | Buttons, nav items |
68| Semibold | 600 | Subheadings, emphasis |
69| Bold | 700 | Headings, CTAs |
70 
71### Weight Pairing
72- Headings: 600-700
73- Body: 400
74- Links: 500
75- Buttons: 600
76 
77## Line Height Guidelines
78 
79### Rules
80| Content Type | Line Height | Notes |
81|--------------|-------------|-------|
82| Headings | 1.1-1.3 | Tighter for visual impact |
83| Body text | 1.5-1.6 | Optimal readability |
84| Small text | 1.4-1.5 | Slightly tighter |
85| Long-form | 1.6-1.75 | Extra comfortable |
86 
87## Letter Spacing
88 
89### Guidelines
90| Element | Tracking | Value |
91|---------|----------|-------|
92| Display | Tighter | -0.02em |
93| Headings | Normal | 0 |
94| Body | Normal | 0 |
95| All caps | Wider | 0.05em |
96| Small caps | Wider | 0.1em |
97 
98## Paragraph Spacing
99 
100### Margins
101```css
102/* Heading spacing */
103h1, h2 { margin-top: 2rem; margin-bottom: 1rem; }
104h3, h4 { margin-top: 1.5rem; margin-bottom: 0.75rem; }
105 
106/* Paragraph spacing */
107p { margin-bottom: 1rem; }
108p + p { margin-top: 0; }
109```
110 
111### Maximum Line Length
112- Body text: 65-75 characters (optimal)
113- Headings: Can be wider
114- Code blocks: 80-100 characters
115 
116```css
117.prose {
118  max-width: 65ch;
119}
120```
121 
122## CSS Implementation
123 
124### Full Variables
125```css
126:root {
127  /* Font Families */
128  --font-heading: 'Inter', system-ui, sans-serif;
129  --font-body: 'Inter', system-ui, sans-serif;
130  --font-mono: 'JetBrains Mono', monospace;
131 
132  /* Font Sizes */
133  --text-xs: 0.75rem;
134  --text-sm: 0.875rem;
135  --text-base: 1rem;
136  --text-lg: 1.125rem;
137  --text-xl: 1.25rem;
138  --text-2xl: 1.5rem;
139  --text-3xl: 1.875rem;
140  --text-4xl: 2.25rem;
141  --text-5xl: 3rem;
142 
143  /* Font Weights */
144  --font-normal: 400;
145  --font-medium: 500;
146  --font-semibold: 600;
147  --font-bold: 700;
148 
149  /* Line Heights */
150  --leading-none: 1;
151  --leading-tight: 1.25;
152  --leading-snug: 1.375;
153  --leading-normal: 1.5;
154  --leading-relaxed: 1.625;
155  --leading-loose: 2;
156}
157```
158 
159### Tailwind Config
160```javascript
161theme: {
162  fontFamily: {
163    heading: ['Inter', 'system-ui', 'sans-serif'],
164    body: ['Inter', 'system-ui', 'sans-serif'],
165    mono: ['JetBrains Mono', 'monospace'],
166  },
167  fontSize: {
168    xs: ['0.75rem', { lineHeight: '1rem' }],
169    sm: ['0.875rem', { lineHeight: '1.25rem' }],
170    base: ['1rem', { lineHeight: '1.5rem' }],
171    lg: ['1.125rem', { lineHeight: '1.75rem' }],
172    xl: ['1.25rem', { lineHeight: '1.75rem' }],
173    '2xl': ['1.5rem', { lineHeight: '2rem' }],
174    '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
175    '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
176    '5xl': ['3rem', { lineHeight: '1.1' }],
177  }
178}
179```
180 
181## Common Font Pairings
182 
183### Clean & Modern
184- Heading: Inter
185- Body: Inter
186 
187### Professional
188- Heading: Playfair Display
189- Body: Source Sans Pro
190 
191### Startup/Tech
192- Heading: Poppins
193- Body: Open Sans
194 
195### Editorial
196- Heading: Merriweather
197- Body: Lato
198 
199## Accessibility
200 
201### Minimum Sizes
202- Body text: 16px minimum
203- Small text: 14px minimum, not for long content
204- Caption: 12px minimum, use sparingly
205 
206### Contrast Requirements
207- Text on background: 4.5:1 minimum (AA)
208- Large text (18px+): 3:1 minimum
209 
210### Best Practices
211- Don't use all caps for long text
212- Avoid justified text (use left-align)
213- Ensure adequate line spacing
214- Don't use thin weights (<400) at small sizes
215