0
# CSS Classes
1
2
Pre-generated CSS classes for applying Material Design typography styles directly in HTML. These classes are automatically generated when you include the styles.scss file or call the core-styles mixin.
3
4
## Capabilities
5
6
### Including CSS Classes
7
8
Import styles to generate all CSS classes:
9
10
```scss { .api }
11
@use "@material/typography/styles";
12
```
13
14
Or generate classes programmatically:
15
16
```scss { .api }
17
@use "@material/typography";
18
19
@include typography.core-styles;
20
```
21
22
### Base Typography Class
23
24
The foundational typography class that sets the Roboto font family and applies font smoothing.
25
26
```scss { .api }
27
.mdc-typography {
28
font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
29
-moz-osx-font-smoothing: grayscale;
30
-webkit-font-smoothing: antialiased;
31
}
32
```
33
34
**Usage Example:**
35
36
```html
37
<body class="mdc-typography">
38
<!-- All text inside will use Roboto font with proper smoothing -->
39
<div>Content with base typography styling</div>
40
</body>
41
```
42
43
### Typography Style Classes
44
45
Individual classes for each of the thirteen Material Design typography styles.
46
47
```scss { .api }
48
.mdc-typography--headline1 {
49
/* 6rem (96px), light weight, -1.5px letter-spacing */
50
font-size: 6rem;
51
line-height: 6rem;
52
font-weight: 300;
53
letter-spacing: -0.09375em;
54
text-decoration: inherit;
55
text-transform: inherit;
56
}
57
58
.mdc-typography--headline2 {
59
/* 3.75rem (60px), light weight, -0.5px letter-spacing */
60
font-size: 3.75rem;
61
line-height: 3.75rem;
62
font-weight: 300;
63
letter-spacing: -0.0083333333em;
64
text-decoration: inherit;
65
text-transform: inherit;
66
}
67
68
.mdc-typography--headline3 {
69
/* 3rem (48px), regular weight, normal letter-spacing */
70
font-size: 3rem;
71
line-height: 3.125rem;
72
font-weight: 400;
73
letter-spacing: normal;
74
text-decoration: inherit;
75
text-transform: inherit;
76
}
77
78
.mdc-typography--headline4 {
79
/* 2.125rem (34px), regular weight, 0.25px letter-spacing */
80
font-size: 2.125rem;
81
line-height: 2.5rem;
82
font-weight: 400;
83
letter-spacing: 0.0073529412em;
84
text-decoration: inherit;
85
text-transform: inherit;
86
}
87
88
.mdc-typography--headline5 {
89
/* 1.5rem (24px), regular weight, normal letter-spacing */
90
font-size: 1.5rem;
91
line-height: 2rem;
92
font-weight: 400;
93
letter-spacing: normal;
94
text-decoration: inherit;
95
text-transform: inherit;
96
}
97
98
.mdc-typography--headline6 {
99
/* 1.25rem (20px), medium weight, 0.25px letter-spacing */
100
font-size: 1.25rem;
101
line-height: 2rem;
102
font-weight: 500;
103
letter-spacing: 0.0125em;
104
text-decoration: inherit;
105
text-transform: inherit;
106
}
107
108
.mdc-typography--subtitle1 {
109
/* 1rem (16px), regular weight, 0.15px letter-spacing */
110
font-size: 1rem;
111
line-height: 1.75rem;
112
font-weight: 400;
113
letter-spacing: 0.009375em;
114
text-decoration: inherit;
115
text-transform: inherit;
116
}
117
118
.mdc-typography--subtitle2 {
119
/* 0.875rem (14px), medium weight, 0.1px letter-spacing */
120
font-size: 0.875rem;
121
line-height: 1.375rem;
122
font-weight: 500;
123
letter-spacing: 0.0071428571em;
124
text-decoration: inherit;
125
text-transform: inherit;
126
}
127
128
.mdc-typography--body1 {
129
/* 1rem (16px), regular weight, 0.5px letter-spacing */
130
font-size: 1rem;
131
line-height: 1.5rem;
132
font-weight: 400;
133
letter-spacing: 0.03125em;
134
text-decoration: inherit;
135
text-transform: inherit;
136
}
137
138
.mdc-typography--body2 {
139
/* 0.875rem (14px), regular weight, 0.25px letter-spacing */
140
font-size: 0.875rem;
141
line-height: 1.25rem;
142
font-weight: 400;
143
letter-spacing: 0.0178571429em;
144
text-decoration: inherit;
145
text-transform: inherit;
146
}
147
148
.mdc-typography--caption {
149
/* 0.75rem (12px), regular weight, 0.4px letter-spacing */
150
font-size: 0.75rem;
151
line-height: 1.25rem;
152
font-weight: 400;
153
letter-spacing: 0.0333333333em;
154
text-decoration: inherit;
155
text-transform: inherit;
156
}
157
158
.mdc-typography--button {
159
/* 0.875rem (14px), medium weight, 1.25px letter-spacing, uppercase */
160
font-size: 0.875rem;
161
line-height: 2.25rem;
162
font-weight: 500;
163
letter-spacing: 0.0892857143em;
164
text-decoration: none;
165
text-transform: uppercase;
166
}
167
168
.mdc-typography--overline {
169
/* 0.75rem (12px), medium weight, 2px letter-spacing, uppercase */
170
font-size: 0.75rem;
171
line-height: 2rem;
172
font-weight: 500;
173
letter-spacing: 0.1666666667em;
174
text-decoration: none;
175
text-transform: uppercase;
176
}
177
```
178
179
**Usage Examples:**
180
181
```html
182
<!-- Headline hierarchy -->
183
<h1 class="mdc-typography--headline1">Main Title</h1>
184
<h2 class="mdc-typography--headline2">Section Title</h2>
185
<h3 class="mdc-typography--headline6">Subsection Title</h3>
186
187
<!-- Body text -->
188
<p class="mdc-typography--body1">Primary body text with comfortable reading size.</p>
189
<p class="mdc-typography--body2">Secondary body text, slightly smaller.</p>
190
191
<!-- UI text -->
192
<button class="mdc-typography--button">Click Me</button>
193
<span class="mdc-typography--caption">Image caption text</span>
194
<span class="mdc-typography--overline">Section Label</span>
195
196
<!-- Subtitles -->
197
<p class="mdc-typography--subtitle1">Primary subtitle</p>
198
<p class="mdc-typography--subtitle2">Secondary subtitle</p>
199
```
200
201
### Complete HTML Template
202
203
```html
204
<!DOCTYPE html>
205
<html>
206
<head>
207
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
208
<link rel="stylesheet" href="path/to/compiled/typography.css">
209
</head>
210
<body class="mdc-typography">
211
<!-- Typography hierarchy example -->
212
<article>
213
<h1 class="mdc-typography--headline1">Article Title</h1>
214
<p class="mdc-typography--subtitle1">Article subtitle with important details</p>
215
<span class="mdc-typography--overline">News</span>
216
217
<section>
218
<h2 class="mdc-typography--headline4">Section Heading</h2>
219
<p class="mdc-typography--body1">
220
Main body content that is easy to read and follows Material Design
221
typography guidelines for optimal reading experience.
222
</p>
223
<p class="mdc-typography--body2">
224
Secondary body text that provides additional context or details.
225
</p>
226
<p class="mdc-typography--caption">
227
Caption text for images or additional metadata
228
</p>
229
</section>
230
231
<footer>
232
<button class="mdc-typography--button">Read More</button>
233
</footer>
234
</article>
235
</body>
236
</html>
237
```
238
239
## Class Combination Patterns
240
241
### Base Class Required
242
243
All typography classes work best when the base `.mdc-typography` class is applied to a parent element to ensure proper font loading and smoothing:
244
245
```html
246
<!-- Recommended: Base class on parent -->
247
<div class="mdc-typography">
248
<h1 class="mdc-typography--headline1">Title</h1>
249
<p class="mdc-typography--body1">Content</p>
250
</div>
251
252
<!-- Alternative: Base class on each element -->
253
<h1 class="mdc-typography mdc-typography--headline1">Title</h1>
254
<p class="mdc-typography mdc-typography--body1">Content</p>
255
```
256
257
### Responsive Typography
258
259
Typography classes can be combined with responsive utilities or media queries for adaptive text sizing:
260
261
```css
262
/* Custom responsive behavior */
263
@media (max-width: 768px) {
264
.mdc-typography--headline1 {
265
font-size: 3rem; /* Smaller headline on mobile */
266
}
267
}
268
```