Typography

Typographic scale

This is the typographic scale that should be used on all *.ubuntu.com websites.

h1. Ubuntu Light 45px/1.3

h2. Ubuntu Light 32px/1.3

h3. Ubuntu Light 23px/1.3

h4. Ubuntu Light 20px/1.3

h5. Ubuntu Regular Bold 16px/1.3
h6. Ubuntu Regular Bold 13px Uppercase/1.3

p. Ubuntu Light 16px/1.5

Annotations

There are a few ways in which you can attribute less emphasis to a piece of text.

  • <small>
    Wrapping text within this tag will make its font-size 13px — smaller than the body copy size
  • .smaller
    Use this class to make text smaller than the body copy size, reducing it to 13px. This class can also be applied to buttons (see more detail in the Forms section of this style guide)
  • .note
    This class will reduce the font-size of the text to 13px and change its colour to warm grey. It should be used cautiously and only in instances when the content is nonessential.

Tip: To know more about and download the Ubuntu font, visit the Ubuntu font site.

Note: Titles on Ubuntu websites should be sentence case, so “Further reading” instead of “Further Reading”.

Lists

As well as the standard ordered and unordered lists, there are 3 different list styles that can be used to make a list of content more interesting and easier to read.

Ordered list

Example:

  1. First item
  2. Second item
  3. Third item

Code:

<ol>
 <li>First item</li>
 <li>Second item</li>
 <li>Third item</li>
</ol>

Unordered list

Example:

  • First item
  • Second item
  • Third item

Code:

<ul>
 <li>First item</li>
 <li>Second item</li>
 <li>Third item</li>
</ul>

List with dividers

Example:

  • First item
  • Second item
  • Third item

List with dividers and ticks

Example:

  • First item
  • Second item
  • Third item

List with dividers and ticks

Example:

  • First item
  • Second item
  • Third item

Code:

<ul class="list">
 <li>First item</li>
 <li>Second item</li>
 <li>Third item</li>
</ul>

Code:

<ul class="list-ubuntu">
 <li>First item</li>
 <li>Second item</li>
 <li>Third item</li>
</ul>

Code:

<ul class="list-canonical">
 <li>First item</li>
 <li>Second item</li>
 <li>Third item</li>
</ul>

Abbreviation

Use the <abbr> element to provide an abbreviation’s definition on hover.

Example:

LoCo teams work with local LUGs.

Code:

<abbr title="Local community">LoCo</abbr> teams work with local <abbr title="Linux User Groups">LUGs</abbr>

Quotes

There are a few different ways of having block and pullquotes on Ubuntu sites.

To the left: an example of a pullquote that sits in a separate column to the right of a block of text.

Code:

<div class="three-col prepend-one last-col">
 <blockquote class="pull-quote">
  <p><span>“</span> Ubuntu is an ancient African word meaning 'humanity to others'. <span>”</span></p>
  <p><cite>Canonical</cite></p>
 </blockquote>
</div>

An example of a blockquote occupying an entire row can be seen in the Scaffolding section of this guide.

 Ubuntu is an ancient African word meaning ‘humanity to others’. 

Canonical

Code

Use the <code> element to indicate a piece of inline code:

Example:

Remember to use the <blockquote> tag to mark up a pull quote.

Code:

Remember to use the <code>&lt;blockquote&gt;</code> tag to mark up a pull quote.


Use the <pre> element to indicate a larger block of code:

Example:

$ quickly create ubuntu-application my-new-project

Code:

<pre>$ quickly create ubuntu-application my-new-project</pre>