Typography

    The typography in Ignite UI for Angular is modeled after the [Material Type System](https://material.io/design/typography/the-type-system.html#). It's non-intrusive and optional, allowing you to modify the type styles using CSS only.

    Overview

    The type system is a type scale consisting of 13 different category type styles used across most components. All of the scale categories are completely reusable and adjustable by the end user.

    Here's a list of all 13 category styles as defined for the Material Theme in Ignite UI for Angular:

    Scale Category Font Family Font Weight Font Size Text Transform Letter Spacing Line Height CSS Class CSS Variables
    h1 Titillium Web 300 6 rem none -.09375 rem 7 rem ig-typography__h1 --ig-h1-*
    h2 Titillium Web 300 3.75 rem none -.0312 rem 4.4375 rem ig-typography__h2 --ig-h2-*
    h3 Titillium Web 400 3 rem none 0 3.5625 rem ig-typography__h3 --ig-h3-*
    h4 Titillium Web 400 2.125 rem none .015625 rem 2.5 rem ig-typography__h4 --ig-h4-*
    h5 Titillium Web 400 1.5 rem none 0 1.75 rem ig-typography__h4 --ig-h5-*
    h6 Titillium Web 600 1.25 rem none .009375 rem 1.5 rem ig-typography__h4 --ig-h6-*
    subtitle-1 Titillium Web 400 1 rem none .009375 rem 1.5 rem ig-typography__subtitle-1 --ig-subtitle-1-*
    subtitle-2 Titillium Web 600 .875 rem none .00625 rem 1.5 rem ig-typography__subtitle-2 --ig-subtitle-2-*
    body-1 Titillium Web 400 1 rem none .03125 rem 1.75 rem ig-typography__body-1 --ig-body-1-*
    body-2 Titillium Web 400 .875 rem none .015625 rem 1.25 rem ig-typography__body-2 --ig-body-2-*
    button Titillium Web 600 .875 rem uppercase .046875 1 rem ig-typography__button --ig-button-*
    caption Titillium Web 400 .75 rem none .025 rem 1 rem ig-typography__caption --ig-caption-*
    overline Titillium Web 400 .625 rem uppercase .09375 rem 1 rem ig-typography__overline --ig-overline-*

    Each theme defines its own type scale. This means each one of the themes we ship - Material, Fluent, Boostrap, and Indigo will have its own type scale. They all share the same scale categories, but can have different font family, weight, size, text transform, letter spacing, and line height.

    Usage

    Important

    By default we don't apply any typography styles. To use our typography in your application you have to set the ig-typography CSS class on a top-level element. All of its children will then use our typography styles.

    We have selected Titillium Web to be the default font for the Material Theme in Ignite UI for Angular. To use it you have to host it yourself, or include it from Google Fonts:

    <link
  href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700"
  rel="stylesheet"
/>

    Enable the typography styles by setting the ig-typography class on the body element.

    <!-- index.html -->
<body class="ig-typography">
  <app-root></app-root>
</body>

    Changing the Font Family

    To change the font family in all components, all you have to do is overwrite the --ig-typography CSS variable with another font-family value;

    /* styles.css */
:root {
    --ig-font-family: "Open Sans", sans-serif;
}

    Type Styles

    The type styles are used internally by most of the components in Ignite UI for Angular. For instance, the documentation says the button component uses the button type style. This means that we can modify the typography of the button component by ovewriting the included --ig-button-* CSS variables.

    Let's say we want to change the text of the button in the Material Theme to always be lowercase.

    :root {
    --ig-button-text-transform: lowercase;
}

    Additional Resources

    Our community is active and always welcoming to new ideas.