0
# Customization
1

2
Extensive customization options through CSS custom properties, Sass variables, and style override maps for theming and brand adaptation. Material Typography provides multiple layers of customization to fit different project needs while maintaining design consistency.
3

4
## Capabilities
5

6
### CSS Custom Properties
7

8
CSS custom properties (CSS variables) provide runtime customization of typography styles without recompiling Sass.
9

10
```scss { .api }
11
// Global font family override
12
--mdc-typography-font-family: value;
13

14
// Style-specific font family (replace <STYLE> with actual style name)
15
--mdc-typography-<STYLE>-font-family: value;
16
--mdc-typography-<STYLE>-font-size: value;
17
--mdc-typography-<STYLE>-line-height: value;
18
--mdc-typography-<STYLE>-font-weight: value;
19
--mdc-typography-<STYLE>-letter-spacing: value;
20
--mdc-typography-<STYLE>-text-decoration: value;
21
--mdc-typography-<STYLE>-text-transform: value;
22
```
23

24
**Global Font Family Override:**
25

26
```css
27
/* Change base font family for all typography */
28
:root {
29
  --mdc-typography-font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
30
}
31

32
/* Or scope to specific containers */
33
.custom-theme {
34
  --mdc-typography-font-family: "Playfair Display", serif;
35
}
36
```
37

38
**Style-Specific Overrides:**
39

40
```css
41
:root {
42
  /* Customize button typography */
43
  --mdc-typography-button-font-family: "Roboto Condensed", sans-serif;
44
  --mdc-typography-button-font-size: 16px;
45
  --mdc-typography-button-text-transform: none;
46
  --mdc-typography-button-letter-spacing: 0.5px;
47
  
48
  /* Customize headline styles */
49
  --mdc-typography-headline1-font-family: "Playfair Display", serif;
50
  --mdc-typography-headline1-font-size: 4rem;
51
  --mdc-typography-headline1-font-weight: 700;
52
  
53
  /* Customize body text */
54
  --mdc-typography-body1-font-size: 18px;
55
  --mdc-typography-body1-line-height: 1.6;
56
  --mdc-typography-body2-font-size: 16px;
57
}
58
```
59

60
**Theme-Specific Customization:**
61

62
```css
63
/* Light theme typography */
64
.light-theme {
65
  --mdc-typography-font-family: "Inter", sans-serif;
66
  --mdc-typography-headline1-font-weight: 300;
67
}
68

69
/* Dark theme typography with different weights */
70
.dark-theme {
71
  --mdc-typography-font-family: "Inter", sans-serif;
72
  --mdc-typography-headline1-font-weight: 400; /* Heavier for dark backgrounds */
73
  --mdc-typography-body1-font-weight: 400;
74
}
75

76
/* Brand-specific overrides */
77
.brand-theme {
78
  --mdc-typography-font-family: "Brand Font", sans-serif;
79
  --mdc-typography-button-text-transform: capitalize;
80
  --mdc-typography-overline-letter-spacing: 3px;
81
}
82
```
83

84
### Sass Module Variables
85

86
Sass module variables allow compile-time customization when using `@use` with configuration.
87

88
```scss { .api }
89
// Primary configuration variable
90
$font-family: string // Base font family (default: 'Roboto, sans-serif')
91

92
// Style override maps (empty by default)
93
$styles-headline1: map
94
$styles-headline2: map  
95
$styles-headline3: map
96
$styles-headline4: map
97
$styles-headline5: map
98
$styles-headline6: map
99
$styles-subtitle1: map
100
$styles-subtitle2: map
101
$styles-body1: map
102
$styles-body2: map
103
$styles-caption: map
104
$styles-button: map
105
$styles-overline: map
106

107
// Font weight mapping
108
$font-weight-values: map // Weight name to number mapping
109
```
110

111
**Basic Font Family Override:**
112

113
```scss
114
@use "@material/typography" with (
115
  $font-family: unquote("Inter, -apple-system, BlinkMacSystemFont, sans-serif")
116
);
117

118
@use "@material/button";
119
@include button.core-styles;
120
```
121

122
**Style-Specific Overrides:**
123

124
```scss
125
@use "@material/typography" with (
126
  $font-family: unquote("Inter, sans-serif"),
127
  $styles-button: (
128
    font-size: 16px,
129
    text-transform: none,
130
    letter-spacing: 0.5px,
131
    font-weight: 600
132
  ),
133
  $styles-headline1: (
134
    font-family: unquote("Playfair Display, serif"),
135
    font-size: 4rem,
136
    font-weight: 700
137
  ),
138
  $styles-body1: (
139
    font-size: 18px,
140
    line-height: 1.6
141
  )
142
);
143

144
@use "@material/button";
145
@include button.core-styles;
146
```
147

148
**Font Weight Customization:**
149

150
```scss
151
@use "@material/typography" with (
152
  $font-weight-values: (
153
    thin: 100,
154
    light: 200,      // Lighter than default 300
155
    regular: 400,
156
    medium: 600,     // Heavier than default 500  
157
    bold: 700,
158
    black: 900
159
  ),
160
  $styles-headline1: (
161
    font-weight: map.get($font-weight-values, light) // Uses 200 instead of 300
162
  )
163
);
164
```
165

166
### Sass Global Variables (Legacy)
167

168
Global variables provide compatibility with older Sass patterns. Must be defined before importing.
169

170
```scss { .api }
171
// Global font family
172
$mdc-typography-font-family: string
173

174
// Global style override maps  
175
$mdc-typography-styles-headline1: map
176
$mdc-typography-styles-headline2: map
177
$mdc-typography-styles-headline3: map
178
$mdc-typography-styles-headline4: map
179
$mdc-typography-styles-headline5: map
180
$mdc-typography-styles-headline6: map
181
$mdc-typography-styles-subtitle1: map
182
$mdc-typography-styles-subtitle2: map
183
$mdc-typography-styles-body1: map
184
$mdc-typography-styles-body2: map
185
$mdc-typography-styles-caption: map
186
$mdc-typography-styles-button: map
187
$mdc-typography-styles-overline: map
188
```
189

190
**Global Variables Usage:**
191

192
```scss
193
// Define overrides before import
194
$mdc-typography-font-family: unquote("Inter, sans-serif");
195

196
$mdc-typography-styles-button: (
197
  font-size: 16px,
198
  text-transform: none,
199
  letter-spacing: 0.5px
200
);
201

202
$mdc-typography-styles-headline1: (
203
  font-family: unquote("Playfair Display, serif"),
204
  font-size: 4rem
205
);
206

207
// Import after variable definitions
208
@import "@material/typography/mdc-typography";
209
@import "@material/button/mdc-button";
210
```
211

212
## Customization Patterns
213

214
### Complete Brand Theme
215

216
```scss
217
@use "@material/typography" with (
218
  $font-family: unquote("Brand Sans, -apple-system, sans-serif"),
219
  
220
  // Headline customization
221
  $styles-headline1: (
222
    font-family: unquote("Brand Display, serif"),
223
    font-size: 4rem,
224
    font-weight: 700,
225
    letter-spacing: -0.02em
226
  ),
227
  $styles-headline2: (
228
    font-family: unquote("Brand Display, serif"),
229
    font-weight: 600
230
  ),
231
  $styles-headline6: (
232
    font-weight: 600,
233
    text-transform: uppercase,
234
    letter-spacing: 0.1em
235
  ),
236
  
237
  // Body text optimization
238
  $styles-body1: (
239
    font-size: 17px,
240
    line-height: 1.7,
241
    letter-spacing: 0.01em
242
  ),
243
  $styles-body2: (
244
    font-size: 15px,
245
    line-height: 1.5
246
  ),
247
  
248
  // UI element customization
249
  $styles-button: (
250
    font-family: unquote("Brand Sans, sans-serif"),
251
    font-size: 16px,
252
    font-weight: 600,
253
    text-transform: none,
254
    letter-spacing: 0.02em
255
  ),
256
  $styles-overline: (
257
    font-weight: 700,
258
    letter-spacing: 0.15em
259
  )
260
);
261
```
262

263
### Responsive Font Sizing
264

265
```css
266
:root {
267
  /* Base sizes for mobile */
268
  --mdc-typography-headline1-font-size: 2.5rem;
269
  --mdc-typography-headline2-font-size: 2rem;
270
  --mdc-typography-body1-font-size: 16px;
271
}
272

273
@media (min-width: 600px) {
274
  :root {
275
    /* Larger sizes for tablet */
276
    --mdc-typography-headline1-font-size: 3.5rem;
277
    --mdc-typography-headline2-font-size: 2.5rem;
278
    --mdc-typography-body1-font-size: 17px;
279
  }
280
}
281

282
@media (min-width: 960px) {
283
  :root {
284
    /* Full sizes for desktop */
285
    --mdc-typography-headline1-font-size: 6rem;
286
    --mdc-typography-headline2-font-size: 3.75rem;
287
    --mdc-typography-body1-font-size: 18px;
288
  }
289
}
290
```
291

292
### Accessibility-Focused Customization
293

294
```css
295
:root {
296
  /* Improved contrast and readability */
297
  --mdc-typography-body1-font-size: 18px;
298
  --mdc-typography-body1-line-height: 1.6;
299
  --mdc-typography-body2-font-size: 16px;
300
  --mdc-typography-body2-line-height: 1.55;
301
  
302
  /* Clearer UI text */
303
  --mdc-typography-button-font-size: 16px;
304
  --mdc-typography-caption-font-size: 14px;
305
  
306
  /* Reduced motion alternative */
307
  --mdc-typography-button-text-transform: none;
308
}
309

310
/* High contrast theme */
311
@media (prefers-contrast: high) {
312
  :root {
313
    --mdc-typography-font-family: system-ui, sans-serif;
314
    --mdc-typography-body1-font-weight: 500;
315
    --mdc-typography-button-font-weight: 600;
316
  }
317
}
318
```
319

320
### Multi-Language Support
321

322
```scss
323
// Language-specific typography configurations
324
@use "@material/typography" with (
325
  $font-family: unquote("Noto Sans, sans-serif") // Better international support
326
);
327

328
// CSS for specific languages
329
:lang(ja) {
330
  --mdc-typography-font-family: "Noto Sans JP", sans-serif;
331
  --mdc-typography-body1-line-height: 1.8; // More spacing for Japanese
332
}
333

334
:lang(ar) {
335
  --mdc-typography-font-family: "Noto Sans Arabic", sans-serif;
336
  direction: rtl;
337
}
338

339
:lang(hi) {
340
  --mdc-typography-font-family: "Noto Sans Devanagari", sans-serif;
341
  --mdc-typography-body1-line-height: 1.7;
342
}
343
```
344

345
### Dynamic Theme Switching
346

347
```javascript
348
// JavaScript for runtime theme switching
349
function applyTypographyTheme(theme) {
350
  const root = document.documentElement;
351
  
352
  switch(theme) {
353
    case 'compact':
354
      root.style.setProperty('--mdc-typography-body1-font-size', '14px');
355
      root.style.setProperty('--mdc-typography-body1-line-height', '1.4');
356
      root.style.setProperty('--mdc-typography-headline1-font-size', '3rem');
357
      break;
358
      
359
    case 'comfortable':
360
      root.style.setProperty('--mdc-typography-body1-font-size', '18px');
361
      root.style.setProperty('--mdc-typography-body1-line-height', '1.7');
362
      root.style.setProperty('--mdc-typography-headline1-font-size', '4rem');
363
      break;
364
      
365
    case 'large-text':
366
      root.style.setProperty('--mdc-typography-body1-font-size', '20px');
367
      root.style.setProperty('--mdc-typography-body2-font-size', '18px');
368
      root.style.setProperty('--mdc-typography-caption-font-size', '16px');
369
      break;
370
  }
371
}
372
```
373

374
### Performance Optimization
375

376
```scss
377
// Selective style inclusion to reduce bundle size
378
@use "@material/typography" with (
379
  // Only customize styles you actually use
380
  $styles-headline4: (
381
    font-size: 2rem,
382
    line-height: 2.5rem
383
  ),
384
  $styles-body1: (
385
    font-size: 17px,
386
    line-height: 1.6
387
  ),
388
  $styles-button: (
389
    text-transform: none
390
  )
391
);
392

393
// Generate only needed classes
394
@mixin selective-typography-classes {
395
  .mdc-typography {
396
    @include typography.base;
397
  }
398
  
399
  // Only include classes you need
400
  .mdc-typography--headline4 {
401
    @include typography.typography(headline4);
402
  }
403
  
404
  .mdc-typography--body1 {
405
    @include typography.typography(body1);
406
  }
407
  
408
  .mdc-typography--button {
409
    @include typography.typography(button);
410
  }
411
}
412
```