Typography

We have different colors that are divided into two parts, the first part is the surface colors that cover the overall theme of an application or website, the second part is the gamut colors that are used in different components and sections. The amount of heading varies on different screens and has its own standard.

Headings

We have pre-built classes and headings in the typography system that you can use for headings. Note that these classes are based on Tailwind.

H1 Heading

The h1 tag is used for the main title of the page and is the most important heading tag. Each page should have only one h1 tag, as it represents the primary topic of the page and helps search engines understand the page's content better.

H2 Heading

The h2 tag is used for the headings of major sections of the content. This tag is used to divide the content into larger sections and typically follows the h1 tag.

H3 Heading

The h3 tag is used for subheadings within sections. It helps further organize content under h2 sections.

H4 Heading

The h4 tag is used for more detailed or supplementary headings. This tag is typically used for subsections under h3 headings.

H5 Heading

The h5 tag is used for minor subheadings or less significant sections within the content. This tag is typically used for subsections under h4 headings. It helps organize content that is less critical but still relevant to the overall structure.

H6 Heading

The h6 tag is used for the least important headings or very minor details within the content. This tag is rarely used and is generally reserved for sections that are of minimal significance or for footnotes and side notes.

Usage

app.component.html