tessl/npm-material--typography
Typography classes, mixins, and variables for Material Components for the web
- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
To install, run
npx @tessl/cli install tessl/npm-material--typography@13.0.00
# Material Typography
1
2
Material Typography provides a comprehensive Material Design typography system that implements thirteen typographic styles for consistent text sizing and styling across web applications. It offers both CSS classes and Sass mixins for applying typography styles, supports extensive customization through CSS custom properties and Sass variables, and integrates seamlessly with other Material Components.
3
4
## Package Information
5
6
- **Package Name**: @material/typography
7
- **Package Type**: npm
8
- **Language**: SCSS (Sass)
9
- **Installation**: `npm install @material/typography`
10
11
## Core Imports
12
13
Standard Sass import (forwards all public API):
14
15
```scss
16
@use "@material/typography";
17
```
18
19
Import with configuration:
20
21
```scss
22
@use "@material/typography" with (
23
$font-family: unquote("Arial, sans-serif"),
24
$styles-button: (
25
font-size: 16px,
26
text-transform: none,
27
)
28
);
29
```
30
31
Pre-compiled CSS import:
32
33
```scss
34
@use "@material/typography/mdc-typography";
35
```
36
37
Direct file imports:
38
39
```scss
40
@use "@material/typography/typography"; // Main implementation
41
@use "@material/typography/variables"; // Variables only
42
@use "@material/typography/mixins"; // Mixins only (deprecated)
43
@use "@material/typography/functions"; // Functions only (deprecated)
44
@use "@material/typography/styles"; // CSS classes only
45
```
46
47
Legacy import patterns (for compatibility):
48
49
```scss
50
// Import with prefixed names (legacy)
51
@use "@material/typography/mdc-typography.import" as mdc-typography;
52
53
// Global imports (deprecated)
54
@import "@material/typography/mdc-typography";
55
```
56
57
## Basic Usage
58
59
### HTML Structure with CSS Classes
60
61
```html
62
<head>
63
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
64
</head>
65
<body class="mdc-typography">
66
<h1 class="mdc-typography--headline1">Big header</h1>
67
<h2 class="mdc-typography--headline6">Smaller header</h2>
68
<p class="mdc-typography--body1">Body text content</p>
69
<p class="mdc-typography--caption">Caption text</p>
70
</body>
71
```
72
73
### SCSS Integration
74
75
Include CSS classes automatically:
76
77
```scss
78
@use "@material/typography/styles";
79
```
80
81
Apply styles via mixins:
82
83
```scss
84
@use "@material/typography";
85
86
.my-heading {
87
@include typography.typography(headline1);
88
}
89
90
.my-text {
91
@include typography.base;
92
@include typography.typography(body1);
93
}
94
```
95
96
### CSS Custom Properties
97
98
```css
99
:root {
100
--mdc-typography-font-family: "Custom Font", sans-serif;
101
--mdc-typography-headline1-font-size: 4rem;
102
--mdc-typography-button-text-transform: none;
103
}
104
```
105
106
## Architecture
107
108
Material Typography is built around several key components:
109
110
- **Typography Styles**: Thirteen predefined Material Design typography styles (headline1-6, subtitle1-2, body1-2, caption, button, overline)
111
- **CSS Classes**: Pre-generated CSS classes for each typography style, available via `styles.scss`
112
- **Sass Mixins**: Programmatic application of typography styles with feature targeting support
113
- **Customization System**: CSS custom properties and Sass variables for theming and style overrides
114
- **Baseline System**: Advanced baseline alignment utilities for precise text positioning
115
- **Font Loading**: Roboto font integration with proper antialiasing and smoothing
116
117
## Capabilities
118
119
### CSS Classes
120
121
Pre-generated CSS classes for applying Material Design typography styles directly in HTML. Includes base font styling and all thirteen typography variants.
122
123
```scss { .api }
124
// Generated classes (when including styles.scss)
125
.mdc-typography // Base typography styles (Roboto font)
126
.mdc-typography--headline1 // Headline 1 style (6rem, light)
127
.mdc-typography--headline2 // Headline 2 style (3.75rem, light)
128
.mdc-typography--headline3 // Headline 3 style (3rem, regular)
129
.mdc-typography--headline4 // Headline 4 style (2.125rem, regular)
130
.mdc-typography--headline5 // Headline 5 style (1.5rem, regular)
131
.mdc-typography--headline6 // Headline 6 style (1.25rem, medium)
132
.mdc-typography--subtitle1 // Subtitle 1 style (1rem, regular)
133
.mdc-typography--subtitle2 // Subtitle 2 style (0.875rem, medium)
134
.mdc-typography--body1 // Body 1 style (1rem, regular)
135
.mdc-typography--body2 // Body 2 style (0.875rem, regular)
136
.mdc-typography--caption // Caption style (0.75rem, regular)
137
.mdc-typography--button // Button style (0.875rem, medium, uppercase)
138
.mdc-typography--overline // Overline style (0.75rem, medium, uppercase)
139
```
140
141
[CSS Classes](./css-classes.md)
142
143
### Sass Mixins
144
145
Programmatic application of typography styles with advanced features like feature targeting, style exclusion, and baseline alignment utilities.
146
147
```scss { .api }
148
@mixin core-styles($query: feature-targeting.all());
149
@mixin base($query: feature-targeting.all());
150
@mixin typography($style, $query: feature-targeting.all(), $exclude-props: ());
151
@mixin smooth-font($query: feature-targeting.all());
152
@mixin overflow-ellipsis($query: feature-targeting.all());
153
@mixin baseline($top: 0, $bottom: 0, $display: block, $query: feature-targeting.all());
154
@mixin text-baseline($top: 0, $bottom: 0, $display: block, $lineHeight: normal, $query: feature-targeting.all());
155
```
156
157
[Sass Mixins](./sass-mixins.md)
158
159
### Typography Styles
160
161
Thirteen predefined Material Design typography styles with precise specifications for font size, weight, line height, and letter spacing.
162
163
```scss { .api }
164
// Available style names for mixins and functions
165
headline1 // 6rem (96px), light weight, -1.5px letter-spacing
166
headline2 // 3.75rem (60px), light weight, -0.5px letter-spacing
167
headline3 // 3rem (48px), regular weight, normal letter-spacing
168
headline4 // 2.125rem (34px), regular weight, 0.25px letter-spacing
169
headline5 // 1.5rem (24px), regular weight, normal letter-spacing
170
headline6 // 1.25rem (20px), medium weight, 0.25px letter-spacing
171
subtitle1 // 1rem (16px), regular weight, 0.15px letter-spacing
172
subtitle2 // 0.875rem (14px), medium weight, 0.1px letter-spacing
173
body1 // 1rem (16px), regular weight, 0.5px letter-spacing
174
body2 // 0.875rem (14px), regular weight, 0.25px letter-spacing
175
caption // 0.75rem (12px), regular weight, 0.4px letter-spacing
176
button // 0.875rem (14px), medium weight, 1.25px letter-spacing, uppercase
177
overline // 0.75rem (12px), medium weight, 2px letter-spacing, uppercase
178
```
179
180
[Typography Styles](./typography-styles.md)
181
182
### Customization
183
184
Extensive customization options through CSS custom properties, Sass variables, and style override maps for theming and brand adaptation.
185
186
```scss { .api }
187
// CSS Custom Properties
188
--mdc-typography-font-family
189
--mdc-typography-<STYLE>-font-family
190
--mdc-typography-<STYLE>-font-size
191
--mdc-typography-<STYLE>-line-height
192
--mdc-typography-<STYLE>-font-weight
193
--mdc-typography-<STYLE>-letter-spacing
194
--mdc-typography-<STYLE>-text-decoration
195
--mdc-typography-<STYLE>-text-transform
196
197
// Sass Variables
198
$font-family: 'Roboto, sans-serif'
199
$styles-<style>: () // Override maps for each style
200
$font-weight-values: () // Font weight name mappings
201
```
202
203
[Customization](./customization.md)
204
205
### Utility Functions
206
207
Helper functions for working with typography styles, measurements, and style validation.
208
209
```scss { .api }
210
@function px-to-rem($px): length;
211
@function is-typography-style($style): boolean;
212
@function get-typography-styles(): list;
213
@function get-font($typography): string;
214
@function get-line-height($typography): length;
215
@function get-size($typography): length;
216
@function get-weight($typography): number;
217
@function get-tracking($typography): length;
218
```
219
220
[Utility Functions](./utility-functions.md)