Headings Are important in our content hierarchy and central to clear visual affordance. They also have accessibility value; they communicate the content structure on the page, lending assistive technologies a clue as to our content architecture.
Heading font
Ag
Urbanist
headings
The font family we use for headings and subheadings in this theme.
Heading styles
Heading Extra-Large
heading / xl
Ag
bold
We use this typography style for high emphasis headers that are usually display headers, like the main header of a landing page, at 1st-2nd levels, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
We usually pair it with high emphasis colors.
Ag
semi_bold
We use this typography style for moderate emphasis headers that are usually display headers, like the main header of a landing page, at 1st-2nd levels, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
We usually pair it with high emphasis colors.We usually pair it with high emphasis colors.
Heading Large
heading / lg
Ag
bold
We use this typography style for high emphasis headers that are usually the main header of a page at a 1st-2nd level, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
We usually pair it with high emphasis colors.
Ag
semi_bold
We use this typography style for moderate emphasis headers that are usually the main header of a page at a 1st-2nd level, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
We usually pair it with high emphasis colors.
Heading Medium
heading / md
Ag
bold
We use this typography style for high emphasis headers nested on a 3rd level, h3's.
We usually pair it with high emphasis colors.
Ag
semi_bold
We use this typography style for moderate emphasis headers nested on a 3rd level, h3's.
We usually pair it with high emphasis colors.
Heading Small
heading / sm
Ag
bold
We use this typography style for high emphasis headers nested on a 4th level, h4's.
We usually pair it with high emphasis colors.
Ag
semi_bold
We use this typography style for moderate emphasis headers nested on a 4th level, h4's.
We usually pair it with high emphasis colors.
Heading Extra-Small
heading / xs
Ag
bold
We use this typography style for high emphasis headers nested on a 5th-6th level, h5's or h6's.
We usually pair it with high emphasis colors.
Ag
semi_bold
We use this typography style for moderate emphasis headers nested on a 5th-6th level, h5's or h6's.
We usually pair it with high emphasis colors.
Subheadings
Subheading font
Ag
Urbanist
headings
The font family we use for headings and subheadings in this theme.
Subheading styles
subheading
Ag
bold
We use this typography style for high emphasis subheadings that go immediately below a heading, they usually there to give further context to the actual header.
We usually pair it with medium emphasis colors.
Ag
semi_bold
We use this typography style for moderate emphasis subheadings that go immediately below a heading, they usually there to give further context to the actual header.
We usually pair it with medium emphasis colors.
Ag
regular
We use this typography style for low emphasis subheadings that go immediately below a heading, they usually there to give further context to the actual header.
We usually pair it with medium emphasis colors.
Body
Body font
Ag
'Noto Sans'
body
The font family we use for body and labels in this theme.
Body styles
Body large
body / lg
Ag
regular
This is the typography style we use in most of our high emphasis bodies of text like introductory paragraphs after a heading; we usually pair it with medium emphasis colors.
Ag
link
This is the typography style we use for hyperlinks in bodies of text, like introductory paragraphs after a heading; we usually pair it with link colors.
Ag
bold
This is the typography style we use to add great emphasis in bodies of text, like introductory paragraphs after a heading; we usually pair it with high emphasis colors.
Ag
semi_bold
This is the typography style we use to add moderate emphasis in bodies of text, like introductory paragraphs after a heading; we usually pair it with medium or high emphasis colors.
Body medium
body / md
Ag
regular
This is the typography style we use in most of our bodies of text like paragraphs; we usually pair it with medium emphasis colors.
Ag
link
This is the typography style we use for hyperlinks in bodies of text, like paragraphs; we usually pair it with link colors.
Ag
bold
This is the typography style we use to add great emphasis in bodies of text, like paragraphs; we usually pair it with high emphasis colors.
Ag
semi_bold
This is the typography style we use to add moderate emphasis in bodies of text, like paragraphs, we usually pair it with medium or high emphasis colors.
Body small
body / sm
Ag
regular
This is the typography style we use in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with medium or low emphasis colors.
Ag
link
This is the typography style we use for hyperlinks in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with link colors.
Ag
bold
This is the typography style we use to add great emphasis in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with high emphasis colors.
Ag
semi_bold
This is the typography style we use to add moderate emphasis in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with medium or high emphasis colors.
Code block font
Font Family / theme / font_family / code
Ag
Noto Sans Mono
body
The font family that is used for code blocks and snippets.
Code Block styles
code / sm
Ag
regular
This typography token is recommended to be used only for code blocks.