0
# Typography Styles
1

2
Thirteen predefined Material Design typography styles with precise specifications for font size, weight, line height, and letter spacing. These styles form a coherent typographic scale designed for optimal readability and visual hierarchy.
3

4
## Capabilities
5

6
### Typography Scale Overview
7

8
Material Design typography uses a type scale based on thirteen styles that provide a range of contrasting styles that support the needs of your product and its content.
9

10
```scss { .api }
11
// Available typography style names
12
headline1   // Largest text on screen, reserved for short, important text
13
headline2   // Headline variant 2  
14
headline3   // Headline variant 3
15
headline4   // Headline variant 4
16
headline5   // Headline variant 5
17
headline6   // Headline variant 6 (smallest headline)
18
subtitle1   // Smaller than headline, medium-emphasis text
19
subtitle2   // Subtitle variant 2
20
body1       // Used for long-form writing (primary body text)
21
body2       // Body variant 2 (secondary body text)
22
caption     // Used sparingly to annotate imagery
23
button      // Call to action used by different types of buttons
24
overline    // Used sparingly to introduce a headline
25
```
26

27
### Headline Styles
28

29
Large, prominent text styles for titles and major headings.
30

31
```scss { .api }
32
// headline1: 6rem (96px), light weight
33
font-size: 6rem;
34
line-height: 6rem;
35
font-weight: 300;
36
letter-spacing: -0.09375em; // -1.5px at 16px base
37
text-decoration: inherit;
38
text-transform: inherit;
39

40
// headline2: 3.75rem (60px), light weight  
41
font-size: 3.75rem;
42
line-height: 3.75rem;
43
font-weight: 300;
44
letter-spacing: -0.0083333333em; // -0.5px at 16px base
45
text-decoration: inherit;
46
text-transform: inherit;
47

48
// headline3: 3rem (48px), regular weight
49
font-size: 3rem;
50
line-height: 3.125rem;
51
font-weight: 400;
52
letter-spacing: normal;
53
text-decoration: inherit;
54
text-transform: inherit;
55

56
// headline4: 2.125rem (34px), regular weight
57
font-size: 2.125rem;
58
line-height: 2.5rem;
59
font-weight: 400;
60
letter-spacing: 0.0073529412em; // 0.25px at 16px base
61
text-decoration: inherit;
62
text-transform: inherit;
63

64
// headline5: 1.5rem (24px), regular weight
65
font-size: 1.5rem;
66
line-height: 2rem;
67
font-weight: 400;
68
letter-spacing: normal;
69
text-decoration: inherit;
70
text-transform: inherit;
71

72
// headline6: 1.25rem (20px), medium weight
73
font-size: 1.25rem;
74
line-height: 2rem;
75
font-weight: 500;
76
letter-spacing: 0.0125em; // 0.25px at 16px base
77
text-decoration: inherit;
78
text-transform: inherit;
79
```
80

81
**Usage Examples:**
82

83
```html
84
<h1 class="mdc-typography--headline1">Page Title</h1>
85
<h2 class="mdc-typography--headline2">Section Title</h2>
86
<h3 class="mdc-typography--headline3">Major Heading</h3>
87
<h4 class="mdc-typography--headline4">Content Heading</h4>
88
<h5 class="mdc-typography--headline5">Subheading</h5>
89
<h6 class="mdc-typography--headline6">Minor Heading</h6>
90
```
91

92
```scss
93
@use "@material/typography";
94

95
.hero-title {
96
  @include typography.typography(headline1);
97
}
98

99
.section-header {
100
  @include typography.typography(headline4);
101
}
102
```
103

104
### Subtitle Styles
105

106
Medium-emphasis text styles for secondary headings and important content.
107

108
```scss { .api }
109
// subtitle1: 1rem (16px), regular weight
110
font-size: 1rem;
111
line-height: 1.75rem;
112
font-weight: 400;
113
letter-spacing: 0.009375em; // 0.15px at 16px base
114
text-decoration: inherit;
115
text-transform: inherit;
116

117
// subtitle2: 0.875rem (14px), medium weight
118
font-size: 0.875rem;
119
line-height: 1.375rem;
120
font-weight: 500;
121
letter-spacing: 0.0071428571em; // 0.1px at 16px base
122
text-decoration: inherit;
123
text-transform: inherit;
124
```
125

126
**Usage Examples:**
127

128
```html
129
<p class="mdc-typography--subtitle1">Article subtitle or important summary</p>
130
<p class="mdc-typography--subtitle2">Secondary subtitle or metadata</p>
131
```
132

133
```scss
134
@use "@material/typography";
135

136
.article-subtitle {
137
  @include typography.typography(subtitle1);
138
  margin-bottom: 24px;
139
}
140

141
.card-subtitle {
142
  @include typography.typography(subtitle2);
143
  opacity: 0.87;
144
}
145
```
146

147
### Body Text Styles
148

149
Standard text styles for content and reading material.
150

151
```scss { .api }
152
// body1: 1rem (16px), regular weight - Primary body text
153
font-size: 1rem;
154
line-height: 1.5rem;
155
font-weight: 400;
156
letter-spacing: 0.03125em; // 0.5px at 16px base
157
text-decoration: inherit;
158
text-transform: inherit;
159

160
// body2: 0.875rem (14px), regular weight - Secondary body text
161
font-size: 0.875rem;
162
line-height: 1.25rem;
163
font-weight: 400;
164
letter-spacing: 0.0178571429em; // 0.25px at 16px base
165
text-decoration: inherit;
166
text-transform: inherit;
167
```
168

169
**Usage Examples:**
170

171
```html
172
<p class="mdc-typography--body1">
173
  Primary body text for articles, descriptions, and main content. 
174
  This size provides optimal readability for longer passages of text.
175
</p>
176

177
<p class="mdc-typography--body2">
178
  Secondary body text for additional information, captions, or 
179
  supporting details that require less emphasis.
180
</p>
181
```
182

183
```scss
184
@use "@material/typography";
185

186
.article-content {
187
  @include typography.typography(body1);
188
  margin-bottom: 16px;
189
}
190

191
.metadata {
192
  @include typography.typography(body2);
193
  color: rgba(0, 0, 0, 0.6);
194
}
195
```
196

197
### UI Text Styles
198

199
Specialized text styles for user interface elements.
200

201
```scss { .api }
202
// caption: 0.75rem (12px), regular weight - Small explanatory text
203
font-size: 0.75rem;
204
line-height: 1.25rem;
205
font-weight: 400;
206
letter-spacing: 0.0333333333em; // 0.4px at 16px base
207
text-decoration: inherit;
208
text-transform: inherit;
209

210
// button: 0.875rem (14px), medium weight - Button text
211
font-size: 0.875rem;
212
line-height: 2.25rem;
213
font-weight: 500;
214
letter-spacing: 0.0892857143em; // 1.25px at 16px base
215
text-decoration: none;
216
text-transform: uppercase;
217

218
// overline: 0.75rem (12px), medium weight - Section labels
219
font-size: 0.75rem;
220
line-height: 2rem;
221
font-weight: 500;
222
letter-spacing: 0.1666666667em; // 2px at 16px base
223
text-decoration: none;
224
text-transform: uppercase;
225
```
226

227
**Usage Examples:**
228

229
```html
230
<!-- Caption text -->
231
<img src="image.jpg" alt="Description">
232
<p class="mdc-typography--caption">Figure 1: Image caption describing the content</p>
233

234
<!-- Button text -->
235
<button class="mdc-typography--button">Click Me</button>
236
<a href="#" class="mdc-typography--button">Learn More</a>
237

238
<!-- Overline text -->
239
<span class="mdc-typography--overline">News</span>
240
<h2 class="mdc-typography--headline4">Breaking Headlines</h2>
241
```
242

243
```scss
244
@use "@material/typography";
245

246
.image-caption {
247
  @include typography.typography(caption);
248
  text-align: center;
249
  margin-top: 8px;
250
}
251

252
.cta-button {
253
  @include typography.typography(button);
254
  padding: 8px 16px;
255
  background: #1976d2;
256
  color: white;
257
  border: none;
258
  border-radius: 4px;
259
}
260

261
.section-label {
262
  @include typography.typography(overline);
263
  color: #1976d2;
264
  margin-bottom: 8px;
265
}
266
```
267

268
## Style Hierarchy and Usage Guidelines
269

270
### Semantic HTML Mapping
271

272
Recommended mapping of typography styles to HTML semantic elements:
273

274
```html
275
<!-- Document structure -->
276
<h1 class="mdc-typography--headline1">    <!-- Page title -->
277
<h2 class="mdc-typography--headline2">    <!-- Major section -->
278
<h3 class="mdc-typography--headline3">    <!-- Section heading -->
279
<h4 class="mdc-typography--headline4">    <!-- Subsection -->
280
<h5 class="mdc-typography--headline5">    <!-- Sub-subsection -->
281
<h6 class="mdc-typography--headline6">    <!-- Minor heading -->
282

283
<!-- Content text -->
284
<p class="mdc-typography--body1">         <!-- Primary paragraphs -->
285
<p class="mdc-typography--body2">         <!-- Secondary paragraphs -->
286
<p class="mdc-typography--subtitle1">     <!-- Important summaries -->
287
<p class="mdc-typography--subtitle2">     <!-- Secondary summaries -->
288

289
<!-- UI elements -->
290
<button class="mdc-typography--button">   <!-- Action buttons -->
291
<span class="mdc-typography--caption">    <!-- Help text, captions -->
292
<span class="mdc-typography--overline">   <!-- Section labels -->
293
```
294

295
### Visual Hierarchy Example
296

297
Complete page structure demonstrating proper typographic hierarchy:
298

299
```html
300
<article class="mdc-typography">
301
  <!-- Page title -->
302
  <h1 class="mdc-typography--headline1">The Future of Design</h1>
303
  
304
  <!-- Article subtitle -->
305
  <p class="mdc-typography--subtitle1">
306
    Exploring how Material Design principles shape digital experiences
307
  </p>
308
  
309
  <!-- Section label and heading -->
310
  <span class="mdc-typography--overline">Introduction</span>
311
  <h2 class="mdc-typography--headline4">Understanding Design Systems</h2>
312
  
313
  <!-- Body content -->
314
  <p class="mdc-typography--body1">
315
    Design systems provide a comprehensive set of standards and guidelines
316
    that ensure consistency across digital products and experiences.
317
  </p>
318
  
319
  <p class="mdc-typography--body2">
320
    Material Design represents one of the most comprehensive design systems,
321
    offering detailed guidance on typography, color, and interaction patterns.
322
  </p>
323
  
324
  <!-- Subsection -->
325
  <h3 class="mdc-typography--headline6">Typography in Design Systems</h3>
326
  
327
  <p class="mdc-typography--body1">
328
    Typography plays a crucial role in establishing hierarchy and guiding
329
    user attention throughout the interface.
330
  </p>
331
  
332
  <!-- Image with caption -->
333
  <img src="design-system.jpg" alt="Design system components">
334
  <p class="mdc-typography--caption">
335
    Figure 1: Core components of a modern design system
336
  </p>
337
  
338
  <!-- Call to action -->
339
  <button class="mdc-typography--button">Learn More</button>
340
</article>
341
```
342

343
### Responsive Typography Considerations
344

345
Typography styles work well across different screen sizes, but consider these patterns for responsive design:
346

347
```scss
348
@use "@material/typography";
349

350
// Responsive headline scaling
351
.hero-title {
352
  @include typography.typography(headline4); // Mobile
353
  
354
  @media (min-width: 600px) {
355
    @include typography.typography(headline2); // Tablet
356
  }
357
  
358
  @media (min-width: 960px) {
359
    @include typography.typography(headline1); // Desktop
360
  }
361
}
362

363
// Responsive body text
364
.article-text {
365
  @include typography.typography(body2); // Mobile (smaller)
366
  
367
  @media (min-width: 600px) {
368
    @include typography.typography(body1); // Tablet+ (larger)
369
  }
370
}
371
```