@sandlada/material-design-css/typography/variables.css

A ready-made npm package for a collection of css styles in the material design style.

@layer material-design-system {

    :root {
        --md-ref-typeface-brand         : "Roboto";
        --md-ref-typeface-weight-regular: 400;
        --md-ref-typeface-weight-medium : 500;
        --md-ref-typeface-weight-bold   : 700;
    }

    :root {
        --md-sys-typescale-display-large-font       : var(--md-ref-typeface-brand, "Roboto");
        --md-sys-typescale-display-large-size       : 57px;
        --md-sys-typescale-display-large-tracking   : 0px;
        --md-sys-typescale-display-large-line-height: 64px;
        --md-sys-typescale-display-large-weight     : var(--md-ref-typeface-weight-regular, 400);

        --md-sys-typescale-display-medium-font       : var(--md-ref-typeface-brand, "Roboto");
        --md-sys-typescale-display-medium-size       : 45px;
        --md-sys-typescale-display-medium-tracking   : 0px;
        --md-sys-typescale-display-medium-line-height: 52px;
        --md-sys-typescale-display-medium-weight     : var(--md-ref-typeface-weight-regular, 400);

        --md-sys-typescale-display-small-font       : var(--md-ref-typeface-brand, "Roboto");
        --md-sys-typescale-display-small-size       : 36px;
        --md-sys-typescale-display-small-tracking   : 0px;
        --md-sys-typescale-display-small-line-height: 44px;
        --md-sys-typescale-display-small-weight     : var(--md-ref-typeface-weight-regular, 400);

        --md-sys-typescale-headline-large-font       : var(--md-ref-typeface-brand, "Roboto");
        --md-sys-typescale-headline-large-size       : 32px;
        --md-sys-typescale-headline-large-tracking   : 0px;
        --md-sys-typescale-headline-large-line-height: 40px;
        --md-sys-typescale-headline-large-weight     : var(--md-ref-typeface-weight-regular, 400);

        --md-sys-typescale-headline-medium-font       : var(--md-ref-typeface-brand, "Roboto");
        --md-sys-typescale-headline-medium-size       : 28px;
        --md-sys-typescale-headline-medium-tracking   : 0px;
        --md-sys-typescale-headline-medium-line-height: 36px;
        --md-sys-typescale-headline-medium-weight     : var(--md-ref-typeface-weight-regular, 400);

        --md-sys-typescale-headline-small-font       : var(--md-ref-typeface-brand, "Roboto");
        --md-sys-typescale-headline-small-size       : 24px;
        --md-sys-typescale-headline-small-tracking   : 0px;
        --md-sys-typescale-headline-small-line-height: 32px;
        --md-sys-typescale-headline-small-weight     : var(--md-ref-typeface-weight-regular, 400);

        --md-sys-typescale-title-large-font       : var(--md-ref-typeface-brand, "Roboto");
        --md-sys-typescale-title-large-size       : 22px;
        --md-sys-typescale-title-large-tracking   : 0px;
        --md-sys-typescale-title-large-line-height: 28px;
        --md-sys-typescale-title-large-weight     : var(--md-ref-typeface-weight-regular, 400);

        --md-sys-typescale-title-medium-font       : var(--md-ref-typeface-plain, "Roboto");
        --md-sys-typescale-title-medium-size       : 16px;
        --md-sys-typescale-title-medium-tracking   : 0px;
        --md-sys-typescale-title-medium-line-height: 24px;
        --md-sys-typescale-title-medium-weight     : var(--md-ref-typeface-weight-medium, 500);

        --md-sys-typescale-title-small-font       : var(--md-ref-typeface-plain, "Roboto");
        --md-sys-typescale-title-small-size       : 14px;
        --md-sys-typescale-title-small-tracking   : 0px;
        --md-sys-typescale-title-small-line-height: 20px;
        --md-sys-typescale-title-small-weight     : var(--md-ref-typeface-weight-medium, 500);

        --md-sys-typescale-body-large-font       : var(--md-ref-typeface-plain, "Roboto");
        --md-sys-typescale-body-large-size       : 16px;
        --md-sys-typescale-body-large-tracking   : 0px;
        --md-sys-typescale-body-large-line-height: 24px;
        --md-sys-typescale-body-large-weight     : var(--md-ref-typeface-weight-regular, 400);

        --md-sys-typescale-body-medium-font       : var(--md-ref-typeface-plain, "Roboto");
        --md-sys-typescale-body-medium-size       : 14px;
        --md-sys-typescale-body-medium-tracking   : 0px;
        --md-sys-typescale-body-medium-line-height: 20px;
        --md-sys-typescale-body-medium-weight     : var(--md-ref-typeface-weight-regular, 400);

        --md-sys-typescale-body-small-font       : var(--md-ref-typeface-plain, "Roboto");
        --md-sys-typescale-body-small-size       : 12px;
        --md-sys-typescale-body-small-tracking   : 0.1px;
        --md-sys-typescale-body-small-line-height: 16px;
        --md-sys-typescale-body-small-weight     : var(--md-ref-typeface-weight-regular, 400);

        --md-sys-typescale-label-large-font            : var(--md-ref-typeface-plain, "Roboto");
        --md-sys-typescale-label-large-size            : 14px;
        --md-sys-typescale-label-large-tracking        : 0px;
        --md-sys-typescale-label-large-line-height     : 20px;
        --md-sys-typescale-label-large-weight          : var(--md-ref-typeface-weight-medium, 500);
        --md-sys-typescale-label-large-weight-prominent: var(--md-ref-typeface-weight-bold, 700);

        --md-sys-typescale-label-medium-font            : var(--md-ref-typeface-plain, "Roboto");
        --md-sys-typescale-label-medium-size            : 12px;
        --md-sys-typescale-label-medium-tracking        : 0.1px;
        --md-sys-typescale-label-medium-line-height     : 16px;
        --md-sys-typescale-label-medium-weight          : var(--md-ref-typeface-weight-medium, 500);
        --md-sys-typescale-label-medium-weight-prominent: var(--md-ref-typeface-weight-bold, 700);

        --md-sys-typescale-label-small-font       : var(--md-ref-typeface-plain, "Roboto");
        --md-sys-typescale-label-small-size       : 11px;
        --md-sys-typescale-label-small-tracking   : 0.1px;
        --md-sys-typescale-label-small-line-height: 16px;
        --md-sys-typescale-label-small-weight     : var(--md-ref-typeface-weight-medium, 500);
    }

    :root {
        --md-sys-typescale-emphasized-display-large-font       : var(--md-ref-typeface-brand, "Roboto");
        --md-sys-typescale-emphasized-display-large-size       : 57px;
        --md-sys-typescale-emphasized-display-large-tracking   : -0.25px;
        --md-sys-typescale-emphasized-display-large-line-height: 64px;
        --md-sys-typescale-emphasized-display-large-weight     : var(--md-ref-typeface-weight-medium, 500);

        --md-sys-typescale-emphasized-display-medium-font       : var(--md-ref-typeface-brand, "Roboto");
        --md-sys-typescale-emphasized-display-medium-size       : 45px;
        --md-sys-typescale-emphasized-display-medium-tracking   : 0px;
        --md-sys-typescale-emphasized-display-medium-line-height: 52px;
        --md-sys-typescale-emphasized-display-medium-weight     : var(--md-ref-typeface-weight-medium, 500);

        --md-sys-typescale-emphasized-display-small-font       : var(--md-ref-typeface-brand, "Roboto");
        --md-sys-typescale-emphasized-display-small-size       : 36px;
        --md-sys-typescale-emphasized-display-small-tracking   : 0px;
        --md-sys-typescale-emphasized-display-small-line-height: 44px;
        --md-sys-typescale-emphasized-display-small-weight     : var(--md-ref-typeface-weight-medium, 500);

        --md-sys-typescale-emphasized-headline-large-font       : var(--md-ref-typeface-brand, "Roboto");
        --md-sys-typescale-emphasized-headline-large-size       : 32px;
        --md-sys-typescale-emphasized-headline-large-tracking   : 0px;
        --md-sys-typescale-emphasized-headline-large-line-height: 40px;
        --md-sys-typescale-emphasized-headline-large-weight     : var(--md-ref-typeface-weight-medium, 500);

        --md-sys-typescale-emphasized-headline-medium-font       : var(--md-ref-typeface-brand, "Roboto");
        --md-sys-typescale-emphasized-headline-medium-size       : 28px;
        --md-sys-typescale-emphasized-headline-medium-tracking   : 0px;
        --md-sys-typescale-emphasized-headline-medium-line-height: 36px;
        --md-sys-typescale-emphasized-headline-medium-weight     : var(--md-ref-typeface-weight-medium, 500);

        --md-sys-typescale-emphasized-headline-small-font       : var(--md-ref-typeface-brand, "Roboto");
        --md-sys-typescale-emphasized-headline-small-size       : 24px;
        --md-sys-typescale-emphasized-headline-small-tracking   : 0px;
        --md-sys-typescale-emphasized-headline-small-line-height: 32px;
        --md-sys-typescale-emphasized-headline-small-weight     : var(--md-ref-typeface-weight-medium, 500);

        --md-sys-typescale-emphasized-title-large-font       : var(--md-ref-typeface-brand, "Roboto");
        --md-sys-typescale-emphasized-title-large-size       : 22px;
        --md-sys-typescale-emphasized-title-large-tracking   : 0px;
        --md-sys-typescale-emphasized-title-large-line-height: 28px;
        --md-sys-typescale-emphasized-title-large-weight     : var(--md-ref-typeface-weight-medium, 500);

        --md-sys-typescale-emphasized-title-medium-font       : var(--md-ref-typeface-plain, "Roboto");
        --md-sys-typescale-emphasized-title-medium-size       : 16px;
        --md-sys-typescale-emphasized-title-medium-tracking   : 0.15px;
        --md-sys-typescale-emphasized-title-medium-line-height: 24px;
        --md-sys-typescale-emphasized-title-medium-weight     : var(--md-ref-typeface-weight-bold, 700);

        --md-sys-typescale-emphasized-title-small-font       : var(--md-ref-typeface-plain, "Roboto");
        --md-sys-typescale-emphasized-title-small-size       : 14px;
        --md-sys-typescale-emphasized-title-small-tracking   : 0.1px;
        --md-sys-typescale-emphasized-title-small-line-height: 20px;
        --md-sys-typescale-emphasized-title-small-weight     : var(--md-ref-typeface-weight-bold, 700);

        --md-sys-typescale-emphasized-body-large-font       : var(--md-ref-typeface-plain, "Roboto");
        --md-sys-typescale-emphasized-body-large-size       : 16px;
        --md-sys-typescale-emphasized-body-large-tracking   : 0.5px;
        --md-sys-typescale-emphasized-body-large-line-height: 24px;
        --md-sys-typescale-emphasized-body-large-weight     : var(--md-ref-typeface-weight-medium, 500);

        --md-sys-typescale-emphasized-body-medium-font       : var(--md-ref-typeface-plain, "Roboto");
        --md-sys-typescale-emphasized-body-medium-size       : 14px;
        --md-sys-typescale-emphasized-body-medium-tracking   : 0.25px;
        --md-sys-typescale-emphasized-body-medium-line-height: 20px;
        --md-sys-typescale-emphasized-body-medium-weight     : var(--md-ref-typeface-weight-medium, 500);

        --md-sys-typescale-emphasized-body-small-font       : var(--md-ref-typeface-plain, "Roboto");
        --md-sys-typescale-emphasized-body-small-size       : 12px;
        --md-sys-typescale-emphasized-body-small-tracking   : 0.4px;
        --md-sys-typescale-emphasized-body-small-line-height: 16px;
        --md-sys-typescale-emphasized-body-small-weight     : var(--md-ref-typeface-weight-medium, 500);

        --md-sys-typescale-emphasized-label-large-font       : var(--md-ref-typeface-plain, "Roboto");
        --md-sys-typescale-emphasized-label-large-size       : 14px;
        --md-sys-typescale-emphasized-label-large-tracking   : 0.1px;
        --md-sys-typescale-emphasized-label-large-line-height: 20px;
        --md-sys-typescale-emphasized-label-large-weight     : var(--md-ref-typeface-weight-bold, 700);

        --md-sys-typescale-emphasized-label-medium-font       : var(--md-ref-typeface-plain, "Roboto");
        --md-sys-typescale-emphasized-label-medium-size       : 12px;
        --md-sys-typescale-emphasized-label-medium-tracking   : 0.5px;
        --md-sys-typescale-emphasized-label-medium-line-height: 16px;
        --md-sys-typescale-emphasized-label-medium-weight     : var(--md-ref-typeface-weight-bold, 700);

        --md-sys-typescale-emphasized-label-small-font       : var(--md-ref-typeface-plain, "Roboto");
        --md-sys-typescale-emphasized-label-small-size       : 11px;
        --md-sys-typescale-emphasized-label-small-tracking   : 0.5px;
        --md-sys-typescale-emphasized-label-small-line-height: 16px;
        --md-sys-typescale-emphasized-label-small-weight     : var(--md-ref-typeface-weight-bold, 700);
    }
}