Can we define custom levels of typography in Angular material typography

Question

As per angular material typography there are 13 defined levels for typography: Documentation.

For example display-4, display-3, display-2, headline, title, etc.

By default these level has some predefined font-size, line-height and letter-spacing. We can customize font for each level as below:

@import '~@angular/material/theming';

// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `body-1` levels.
$custom-typography: mat-typography-config(
  $font-family: 'Roboto, monospace',
  $headline: mat-typography-level(32px, 48px, 700),
  $body-1: mat-typography-level(16px, 24px, 500)
  $caption: mat-typography-level(10px, 16px, 400),
);

// Override the typography in the core CSS.
@include mat-core($custom-typography);

For example if I have caption-large level in my project styleguide how can I add that level to customization function?

I can do this by defining my own CSS classes, but is there any sophisticated way to do that?

KeaganFouche · Accepted Answer · 2023-05-16 05:40:16Z

16

You can't do this out of the box with Angular. You need two steps.

Define a new level. In my case it was label:

$label: mat.define-typography-level(20px, 27px, 400, $font-family: 'Roboto, "Helvetica Neue", sans-serif');

Merge this level with sass "map.merge ()" into the existing config:

$typography-config: map.merge(
    mat.define-typography-config(
        $font-family: 'Roboto, "Helvetica Neue", sans-serif',
        $display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
        $display-3: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
        $display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
        $display-1: mat.define-typography-level(34px, 40px, 400),
        $headline: mat.define-typography-level(20px, 27px, 500),
        $title: mat.define-typography-level(20px, 27px, 400),
        $subheading-1: mat.define-typography-level(15px, 17px, 400),
        $subheading-2: mat.define-typography-level(16px, 21px, 500),
        $body-1: mat.define-typography-level(16px, 21px, 400),
        $body-2: mat.define-typography-level(16px, 25px, 500),
        $caption: mat.define-typography-level(14px, 21px, 400),
        $button: mat.define-typography-level(16px, 21px, 400),
        $input: mat.define-typography-level(inherit, 1.125, 400),
    ),
    (
        "label": $label,
    )
);

Finally, you have to apply them:

$app-theme: mat.define-light-theme(
    (
        typography: $typography-config,
    )
);
@include mat.all-component-typographies($typography-config);

These can then be used like:

@mixin typography($theme) {
    $typography-config: mat.get-typography-config($theme);
    
    .mat-form-field-appearance-legacy .mat-form-field-label {
        @include mat.typography-level($typography-config, 'label');
    }
}
@include typography($app-theme);

edited May 16, 2023 at 5:40

KeaganFouche

6797 silver badges13 bronze badges

answered Jan 4, 2022 at 22:06

Michael Gärtner

1811 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lorenz Mueller Over a year ago

Thanks! That works - but I had to replace map.merge with map-merge. Was getting a SassError: There is no module with the namespace "map".

Serene Abraham Mathew Over a year ago

@LorenzMueller you have to import map module - @use "sass:map";

LaCodeM Over a year ago

can someone write in order what properties mat.define-typography-level function is taking please? Can't seem to find this info anywhere!

Collectives™ on Stack Overflow

Can we define custom levels of typography in Angular material typography

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related