Overview
Overview
The Queensland Government relies on Noto Sans as its primary web font for digital products and services, ensuring a consistent and distinctive visual identity. Noto Sans offers numerous advantages that make it an excellent choice for web typography.
With its extensive character set, Noto Sans ensures optimal readability and accessibility, supporting multiple languages to cater to a diverse range of users. Its clean design, balanced proportions, and excellent legibility make it suitable for both headings and body copy. Furthermore, Noto Sans is freely available from Google Fonts, making it easily accessible for integration into web projects without incurring any additional costs.
To ensure compatibility across different devices and operating systems, the Queensland Government has implemented a font stack that includes system fonts as fallback options. System fonts are a reliable choice for fallbacks as they're readily available on most devices, ensuring consistent rendering and maintaining a cohesive user experience.
The updated font stack for the Queensland Government's Design System is as follows:
body { font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
By utilising Noto Sans as the primary font and including system fonts as fallback options, the Queensland Government ensures a visually appealing and inclusive design that priorities readability and accessibility across various platforms and devices.
Headings
Headings help to structure content on a page using relative visual prominence. There are 6 levels of sections headings. <h1> is the highest section level and <h6> is the lowest. They're used for priority messaging and should reflect the organisation of the content of the page.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Paragraphs
A paragraph on a webpage is a section created using the code <p> . In books or articles, you typically see paragraphs as chunks of text separated by blank spaces or a bit of indentation at the start. However, in web coding, a paragraph doesn't have to be just text. It can also group together related things like pictures or parts of a form.
There are 3 styles of paragraph text in our Design System, abstract text, body text and caption text.
Abstract text
The abstract also known as lead text is useful as a high level introduction used at the top of the page to briefly describe the content. This style of text should only be used once per page if possible.
Abstract text is applied by using the class qld__abstract
Body text
This is the default paragraph text used in the body content of a page. This is the style that's applied to any paragraph <p> element on the page.
Caption text
This is a text style for copy used alongside informational images, hint text, footnotes and references.
Caption text is applied by using the class qld__caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in vel leo at molestie. Tempor a feugiat dictum sit nisl, vitae dolor, nulla. Lectus sed urna pharetra id.
Eget elit placerat a elit. Dignissim sapien non orci sed sit nam at. Augue turpis fermentum augue augue lectus rhoncus tortor sit. Sed amet, arcu et morbi dictumst lectus nunc. Aliquet a augue orci eu. Cras lectus tortor proin in.
*Nunc mollis augue sagittis massa nibh ridiculus libero adipiscing etiam. Eget orci nibh tristique sem blandit sollicitudin.
<p class="qld__abstract">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in vel leo at molestie. Tempor a feugiat dictum sit nisl, vitae dolor, nulla. Lectus sed urna pharetra id.</p>
<p>Eget elit placerat a elit. Dignissim sapien non orci sed sit nam at. Augue turpis fermentum augue augue lectus rhoncus tortor sit. Sed amet, arcu et morbi dictumst lectus nunc. Aliquet a augue orci eu. Cras lectus tortor proin in.</p>
<p class="qld__caption">*Nunc mollis augue sagittis massa nibh ridiculus libero adipiscing etiam. Eget orci nibh tristique sem blandit sollicitudin.</p>
Text links
Text links are pieces of text on a webpage that you can click on to go to another webpage, file, email, or different spot on the same page. In web coding, we create these using the <a> tag and the href attribute. Whatever you put inside each <a> tag should give an idea of where the link will take you. .
Links can be part of a paragraph or stand alone. Usually, they're shown in blue and have an underline. You can learn more about how we style links in our underline guide.
In our Design System there are 2 styles of text links, those that have visited states and those that don't. By default, it's best practice to always included visited states on thinks however there are some instances where it isn't helpful to distinguish between visited and unvisited states, for example when linking to pages with frequently-changing content such as the dashboard for an admin interface.
Elementum euismod fringilla vitae varius. Justo imperdiet justo tincidunt vestibulum venenatis morbi molestie dolor orci. Risus sapien urna blandit eget. Mi, nisl facilisis pellentesque bibendum. Gravida lobortis vel amet, ullamcorper vestibulum, in curabitur odio pulvinar.
Example paragraph. Internal link and an external link.
<p>Elementum euismod fringilla vitae varius. Justo imperdiet justo tincidunt vestibulum venenatis morbi molestie dolor orci. <a href="javascript:void(0);">Risus sapien urna blandit eget.</a> Mi, nisl facilisis pellentesque bibendum. Gravida lobortis vel amet, ullamcorper vestibulum, in curabitur odio pulvinar.</p>
<p>Example paragraph. <a href="javascript:void(0);">Internal link</a> and an <a href="javascript:void(0);" rel="external">external link</a>.
</p>
Lists
Use HTML list when you want to arrange chunks of information in an easy-to-read way. Styling, or the way these lists look by default, is controlled by the body part of the website code. You do not need to apply any additional classes to style these lists.
There are 3 types of HTML lists:
- Ordered lists (<ol>): These are lists where the order of items matters, like steps in a recipe or a list of winners in a race. They're usually shown with numbers.
- Unordered lists (<ul>): Here, the order of items doesn't matter. You can think of this like a grocery shopping list, where it doesn't matter if you buy bread before or after milk. They're typically displayed with bullet points.
- Definition lists: These are a bit different, as they're used to list terms and their definitions. They're handy when you have a set of words or concepts and you want to provide explanations for them.
Ordered list
- item 1
- item 2
- item 3
Stylised numbered list
- item 1
- item 2
- item 3
Unordered list
- item 1
- item 1a
- item 1aa
- item 1ab
- item 1b
- item 1a
- item 2
- item 2a
- item 3
Unordered list with larger spacing
- item 1
- item 1a
- item 1aa
- item 1ab
- item 1b
- item 1a
- item 2
- item 2a
- item 3
Definition list
- Definition title
- Definition Definition
- Definition Definition
<h3>Ordered list</h3>
<!-- This is an ordered list, used when the order of items is important. By default, each item is numbered. -->
<ol><li>item 1</li><li>item 2</li><li>item 3</li></ol>
<h3>Stylised numbered list</h3><!-- This is a more stylised versison for when you want numbers to stand out, it does not support nested list items --><ol class="qld__numbered-list"><li>item 1</li><li>item 2</li><li>item 3</li></ol><h3>Unordered list</h3>
<!-- This is an unordered list, often used for lists where order doesn't matter. It will typically display with bullet points. -->
<ul><li>item 1 <ul><li>item 1a <ul><li>item 1aa</li><li>item 1ab</li></ul></li><li>item 1b</li></ul></li><li>item 2 <ul><li>item 2a</li></ul></li><li>item 3</li></ul>
<h3>Unordered list with larger spacing</h3><ul class="qld__margin-t-li--lg qld__margin-t-text-element"><li>item 1 <ul><li>item 1a <ul><li>item 1aa</li><li>item 1ab</li></ul></li><li>item 1b</li></ul></li><li>item 2 <ul><li>item 2a</li></ul></li><li>item 3</li></ul><h3>Definition list</h3>
<!-- This is a definition list, which is used to pair terms with their definitions. -->
<dl>
<dt>Definition title</dt>
<dd>Definition Definition</dd>
<dd>Definition Definition</dd>
</dl>
Link lists
The link list style uses a simple modifier that is applied to unordered lists to create a set of vertical or horizontal links. It's used to order information for users.
<ul class="qld__link-list">
<li><a href="#">Options</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Sign Out</a></li>
</ul>
<ul class="qld__link-list qld__link-list--inline">
<li><a href="#">Options</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Sign Out</a></li>
</ul>