Typography | Elementar Admin

There are two ways to add typography to a page:

1. Add css class mat-typography to apply material typography
2. Add css classes prose max-w-full to apply Tailwind typography

Typography

Customizing Typography

Note: The information on this page is specific to Material 3, for Material 2 information on typography go to the Material 2 guide.

What is typography?

Typography is a way of arranging type to make text legible, readable, and appealing when displayed. Angular Material's theming system supports customizing the typography settings for the library's components. Additionally, Angular Material provides APIs for applying typography styles to elements in your own application.

Including font assets

Angular Material's typography APIs lets you specify any font-face. The default font-face value is configured to Google's Roboto font with the 300, 400, and 500 font-weight styles. To use Roboto, your application must load the font, which is not included with Angular Material. The easiest way to load Roboto, or any other custom font, is by using Google Fonts. The following snippet can be placed in your application's to load Roboto from Google Fonts.

Inline text elements

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.