Typography

This framework uses basic styling and good typographic defaults for clear and consistent content.

The types sizes are based on a perfect fourth modular scale.

This guidance may change to apply to only content inside an article.

$base-serif: 'Book Antiqua', Georgia, 'Bitstream Vera Serif', serif;
$base-sans-serif: 'Open Sans', Verdana, 'Bitstream Vera Sans', sans-serif;
$base-monospace: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace;

The font stacks should achieve roughly 95% coverage across a range of browsers and operating systems.

This supports modern browsers and older versions of Internet Explorer.

The base font's leading (line-height) is set using the variable $base-leading ($base-leading: 1.6).

Don’t apply a font-size to a container element (eg a footer).

$base-leading is used to calculate 5 spacing values in ems:

  • $base-spacing: $base-leading * 1em
  • $large-spacing: $base-spacing * 2
  • $medium-spacing: $base-spacing * 0.75
  • $small-spacing: $base-spacing / 2
  • $tiny-spacing: $base-spacing / 4.

We may change:

  • $base-spacing to a figure that is easier to multiply and divide
  • to using rems instead of ems, for consistency in calculations (in preference to relational proportionality in sizing).

Collection: Foundations

Typeface

Headings

Example

A h1 heading

Body copy

A h2 heading

Body copy

A h3 heading

Body copy

A h4 heading

Body copy

<h1>A h1 heading</h1>
<p>Body copy</p>
<h2>A h2 heading</h2>
<p>Body copy</p>
<h3>A h3 heading</h3>
<p>Body copy</p>
<h4>A h4 heading</h4>
<p>Body copy</p>

Body copy

Example

Digital Service Standard

The Digital Service Standard ensures digital teams build government services that are simpler, clearer and faster for all users.

All services within the scope of the Digital Service Standard must work to meet the Standard.

<h1>Digital Service Standard</h1>

<div class="abstract">
  <p>The Digital Service Standard ensures digital teams build government services that are simpler, clearer and faster for all users.</p>
</div>
<p>All services within the scope of the Digital Service Standard must work to meet the Standard.</p>

Lists

Example

An unordered list:

  • Canberra office
  • Sydney office

An orderd list:

  1. Discovery
  2. Alpha
  3. Beta
  4. Live

A description list:

Transaction
A transaction is a single exchange carried out between an individual or business and government to achieve an outcome. For example, registering to vote or applying for a passport.
<p>An unordered list:</p>
<ul>
  <li>Canberra office</li>
  <li>Sydney office</li>
</ul>

<p>An orderd list:</p>
<ol>
  <li>Discovery</li>
  <li>Alpha</li>
  <li>Beta</li>
  <li>Live</li>
</ol>

<p>A description list:</p>
<dl>
  <dt>Transaction</dt>
  <dd>A transaction is a single exchange carried out between an individual or business and government to achieve an outcome. For example, registering to vote or applying for a passport.</dd>
</dl>

Quotations

Example

An in-line quote.

A standard block quote.

An editorial block quote (a pull quote).

A block quote containing

another block quote

with a citation
<p>An <q>in-line quote</q>.</p>

<blockquote>
  <p>A standard block quote.</p>
</blockquote>

<blockquote class="pullquote">
  <p>An editorial block quote (a pull quote).</p>
</blockquote>

<blockquote>
  <p>A block quote containing</p>
    <blockquote><p>another block quote</p>
      <footer><cite>with a citation</cite></footer>
    </blockquote>
</blockquote>

Callouts & warnings

There are 6 classes for drawing the user's attention:

  • .callout
  • .callout--warning for warnings
  • .callout--error for errors
  • .callout--info for information
  • .callout--success for success
  • .callout--calendar-event for dates.

You can use these on paragraphs (<p>), or on a wrapping element, like a <div> or an <aside>.

Example

A callout.

Warning: be careful…

Error: oh no! There appears to be a problem…

Info: did you know…

Success: nicely done.

The next public holiday is:

New Year's Day

<p class="callout">A callout.</p>

<p class="callout--warning">Warning: be careful&hellip;</p>

<p class="callout--error">Error: oh no! There appears to be a problem&hellip;</p>

<p class="callout--info">Info: did you know&hellip;</p>

<p class="callout--success">Success: nicely done.</p>

<div class="callout--calendar-event">
  <span class="next-event">The next public holiday is:</span>
  <p><time datetime="2017-01-01T00:00:00+00:00">Sunday 1 January</time>
    <span class="event-name">New Year's Day</span>
  </p>
</div>

Badges

Example

Draft This service is in draft.

Alpha This service is in Alpha.

Beta This service is in Beta.

Error

Done

<p><span class="badge--default">Draft</span> This service is in draft.</p>

<p><span class="badge--alpha">Alpha</span> This service is in Alpha.</p>

<p><span class="badge--beta">Beta</span> This service is in Beta.</p>

<p><span class="badge--error">Error</span></p>

<p><span class="badge--success">Done</span></p>