Typography is a CSS component for use with Page and Layout. It adds basic styling for common typographic elements including base text, headings and lists. It is primarily concerned with setting font size, typeface and line height; and providing spacing
around common elements. It sets a very simple baseline.
Typography applies directly to HTML element selectors, to ensure the styles are applied lightly enough that they can be overridden when required.
Status
API status:
general
Web resource key:
com.atlassian.auiplugin:aui-page-typography
AMD Module key:
N/A
Experimental API:
3.6.3
General API:
5.1.0
Examples
Headings and heading level semantics
The h1 through h6 elements in AUI have been given default font sizes and weights that
provide a legible hierarchy when used in page content.
Main title heading
Atlassian's design guidelines call this h700.
The h1 is optimised for "main title" headings — the heading for the main content of a page.
It should typically appear once per page.
Key functionality headings
Atlassian's design guidelines call this h600.
The h2 should be used for headings that identify key functionality on a page.
Sub-section and field group headings
Atlassian's design guidelines call this h500.
Use h3 if you have multiple logical groupings of content on the page.
Deep headings
Atlassian's design guidelines call this h400.
By the time you get to using h4, you will no doubt be deeply nested in the page's content
and hierarchy. Use these when you need to highlight important pieces of information.
List headings
The h5 element is intended for use above groups of items.
Use it within page content above ordered, unordered, or structured lists of data.
Atlassian's design guidelines call this h300.
Low-level headings
Atlassian's design guidelines specify both h100 and h200 as "low-level headings".
You will only tend to see h6 in use inside other UI widgets, such as in the vertical
navigation pattern on a page, or dropdown item group headings. This heading level should be used sparingly
in user-level content.
In addition to their basic font sizes and visual treatments, the margins between each heading level element
have been tweaked to improve rendering, either when added inside other box containers, or when they occur
immediately after each-other in the DOM.
Heading margins!
A tale of heading levels
A top-level heading inside a group item has no top margin.
A sub-heading appears!
Even though it is in a separate grouping, it begins at a similar height to other headings.
Headings inside tables
Let's face it: this isn't a great idea. But, the margins collapse, just in case.
Content-level semantics
Quoted content
Use blockquote when a quotation that is typically longer than a few lines.
It will be indented to set it apart from surrounding text.
Pair this with cite so readers will know who to attribute the quote to!
Code content
These examples get a bit meta!
Use the code tag to denote inline code examples. Use var when referring to specific
mathematical or programming variables.
Use pre when outputting multiple lines of related code.