Typography in Angular Material refers to the visual style and arrangement of text within the user interface of your Angular application. Angular Material provides a typography system that helps you define and maintain consistent and visually appealing text styles throughout your application. Here are key aspects of typography in Angular Material:
Typography Configuration: Angular Material allows you to configure typography settings, including font families, font sizes, line heights, and other text-related properties.
Typographic Styles: You can define different typographic styles for various parts of your application, such as headings, body text, buttons, and more. This ensures a consistent and harmonious look and feel.
Responsive Typography: Angular Material supports responsive typography, which means you can define different font sizes and styles for different screen sizes and device types. This helps in creating a responsive design that adapts to various viewport sizes.
Roboto Font: By default, Angular Material uses the Roboto font as the primary typeface, which is a well-designed and highly legible font suitable for web and mobile applications.
Theme-Based Typography: Typography settings can be customized as part of your application's theme. This allows you to maintain consistent typography throughout your app by defining typography-related variables in your theme's SCSS file.
Typography Classes: Angular Material provides a set of CSS classes for applying predefined typographic styles to your elements. For example, you can use classes like mat-h1, mat-h2, mat-body-1, etc., to apply specific typographic styles.
Accessibility: Angular Material takes accessibility into account when defining typography styles. Text elements are designed to be easily readable and accessible to users with disabilities.
Define typography in theme's SCSS file
below are the list of typography class names
In our Sunbird Ed Angular Material application, we have tailored typography classes to suit our design preferences. Additionally, we've adopted the usage of "rem" units instead of "px" for better responsiveness, and we've opted for the "Noto Sans" font family to achieve the desired typographic style.
We've set up custom typography styles within the "_typography.scss" file located in the "mat-themes" directory, as demonstrated below:
To customize component typography for entire application, we can pass our custom typography config to the core mixin in "themes.scss" file
With these custom typography settings in place, you can now utilize custom typography class names alongside the standard ones provided by Angular Material, such as "mat-body-1" and "mat-title"
These class names have been applied within the example components of the Sunbird Ed Angular Material application.
main-header.component.html
course-progress.component.html
data-chart.component.html
For more detailed information, please refer to the following link: