Typography

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`
Experimental since:	3.6.3
General API status:	5.1

Examples

Page content heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam in arcu ultricies gravida sed sed nisl. Curabitur nibh nulla, semper non pharetra eu, suscipit vitae eros. Donec eget lectus elit. Etiam metus diam, adipiscing convallis blandit sit amet, sollicitudin sit amet felis. Phasellus justo elit, rhoncus sed tincidunt a, auctor sit amet turpis. Praesent turpis lectus, aliquet vitae sollicitudin ac, convallis vitae urna. Donec consectetur lacus a lacus tincidunt at varius felis venenatis. Pellentesque dapibus mattis arcu, a vestibulum lacus congue at.

All that is gold does not glitter, not all those who wander are lost; The old that is strong does not wither, deep roots are not reached by the frost.
From the ashes a fire shall be woken, a light from the shadows shall spring; Renewed shall be blade that was broken, the crownless again shall be king.
J.R.R. Tolkien, The Fellowship of the Ring

Integer nunc nisi, condimentum venenatis euismod et, pulvinar vel sem. Fusce semper ipsum eget libero aliquam cursus et et nisl. Nunc at felis odio. Suspendisse ante urna, eleifend ac pellentesque et, dignissim sit amet eros. Sed varius egestas cursus. Suspendisse id orci nunc. Morbi feugiat, libero vitae pulvinar eleifend, nunc erat lobortis arcu, ac semper libero sem eget sapien. Etiam sit amet rhoncus nunc. Mauris commodo dictum elit in rutrum. Aenean bibendum, purus sit amet molestie mollis, nulla felis varius odio, sed egestas ipsum metus non ante. Aliquam erat volutpat. Donec eu risus justo. Suspendisse id lacus tellus, sed fringilla dolor. In consectetur pellentesque tristique.

Why use subheadings?

Phasellus quis nunc ac magna aliquam euismod. Donec hendrerit libero id purus convallis feugiat. Mauris aliquet ullamcorper elit, a bibendum nunc euismod vitae. Nulla sollicitudin posuere nisi eu pretium. Vestibulum purus nibh, facilisis ac blandit vitae, consectetur a odio. Pellentesque ac interdum metus. Nulla pellentesque, arcu vel gravida dictum, ipsum enim viverra diam, vitae tincidunt felis enim quis metus.

Lists can be used to split up large blocks of text
The spacing and indentation helps scanability
Just be sure you use the right type of list

Sed quis pretium est. Sed pretium sollicitudin massa sit amet ultrices. Morbi lorem mi, varius ac porttitor non, feugiat id mauris. Sed elementum elementum elit, sed auctor turpis sagittis vel. Mauris fringilla tincidunt nibh, et posuere nisi fringilla eu. Duis adipiscing, mi at aliquam dapibus, velit libero dictum sapien, non vestibulum nisi dolor ut sem. Maecenas vehicula porttitor tellus in ornare. Praesent sit amet venenatis augue. Aliquam et lorem eget ipsum hendrerit gravida in quis elit. In hac habitasse platea dictumst.

Multiple levels of headings are very useful

Praesent nulla erat, elementum ut varius at, adipiscing id augue. Sed sagittis consectetur tempus. Nullam tristique feugiat eros, sit amet dapibus justo gravida quis. Praesent ante felis, pulvinar et convallis vel, viverra ac neque. Fusce tincidunt bibendum est eu venenatis. Sed tortor mauris, feugiat pharetra eleifend a, molestie sed lacus. Morbi nec sem ut libero mattis consequat. Praesent eget tellus turpis. Sed rutrum, sapien non tempor venenatis, enim augue tincidunt eros, quis hendrerit lectus libero nec dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sit amet venenatis ante. Etiam leo est, malesuada at aliquet et, cursus in massa.

Multiple levels of headings are very useful

Code

No special code required to invoke Typography, simply use the semantically-correct elements such as headings.