Type Scales: Display & Headline
Type scales establish visual hierarchy and maintain consistency. Display and headline styles are used for larger text elements like headings.
Type Scales: Body & Label
Body and label styles are used for paragraph text, buttons, and other UI elements.
Typography Roles
Typography roles provide common use cases for the different type scales in your application.
Page Title
Section Heading
Subsection Heading
Card Title
Body Text
Button Label
Font Weights
Font weights help create emphasis and establish hierarchy within text.
Typography Demo
See how typography scales work together to create a coherent reading experience.
Typography in mtrl
Create a consistent reading experience
Good typography makes the reading experience comfortable and helps create clear hierarchies. The mtrl framework provides a comprehensive typography system that helps maintain consistent type styles across your application.
"Typography is what language looks like."— Ellen Lupton
Using Typography in Code
Learn how to use typography scales in your SCSS and JavaScript code.
SCSS Usage
@use 'mtrl/src/styles/abstract/config' as c;
.my-heading {
@include c.typography('headline-large');
}
.my-paragraph {
@include c.typography('body-medium');
strong {
font-weight: 500; // Using defined weights
}
}JavaScript Component Usage
// Creating a component with typography styles
const heading = createElement({
tag: 'h1',
class: 'type-headline-large',
text: 'My Heading'
});
// Dynamically changing typography
element.classList.add('type-body-large');
element.classList.remove('type-body-medium');