liveBook · Manning

Typography configuration

As explained in Pro Angular 16

A typography configuration is a mapping of text-style names to font settings used by Angular Material components.

A typography configuration maps text-style names to font settings for Angular Material components. material.define-typography-config() creates the map, whose button entry supplies button font values. section 28.3.2

Applying button typography

Create $typography with material.define-typography-config(), then read the button family, size, and weight with material.font-family(), material.font-size(), and material.font-weight(). A custom button can combine these values with palette-specific background and text colors.

How Pro Angular 16 covers it

How deep it goes
Defines the typography map and demonstrates button font accessors, but does not enumerate every available text style.
Examples
Uses a custom button stylesheet that reads button family, size, and weight from the typography map.
What you can do after
Apply it via Angular Material Sass functions to give custom buttons consistent font settings.
How it connects
Connects typography configuration with Angular Material themes, color palettes, Sass, and custom components.
Cover of Pro Angular 16
liveBookmanning.com
Read Pro Angular 16 on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Pro Angular 16. The section links point to the parts of the book it draws on.