Typography

Basic typography system:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

code

When authors need to specify or alter heading sizes, continue to use the appropriate semantic heading in the AEM document first. Then add curly braces, and a heading modifier class of your choice. Because of CSS specificity, the heading modifier will target your semantic heading and apply the styles.

Example: This paragraph needs to be styled like an H3 {.heading-size-l}

Available heading modifiers include:

• heading-size-xs for 16px
• heading-size-s for 18px
• heading-size-m for 22px
• heading-size-l for 28px
• heading-size-xl for 36px
• heading-size-xxl for 40px

Heading 1 {.heading-size-xs}

Heading 2 {.heading-size-s}

Heading 3 {.heading-size-m}

Heading 4 {.heading-size-l}

Heading 5 {.heading-size-xl}

Heading 6 {.heading-size-xxl}