Summary

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
Included in AUI core? Yes. You do not need to explicitly require the web resource key.
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.