Changing text size, weight and line height

You might need to adjust the font size or font weight of an element outside of the predefined heading and paragraph classes.

For this you can use the font utility classes. There are 2 weights you can choose from, either display or default and 7 sizes ranging from xs to xxxl within each weight for adjusting font size.

It's unlikely you'll need to adjust line spacing but if you do there are 3 options, default space, heading space and no space.

Display weight classes

To help separate semantic meaning from visual appearance, utility classes can be applied to heading elements to change their size and weight. Utility classes that adjust or give the appearance of headings are known as 'display weight' classes. These classes can be applied to various elements such as heading, paragraph, span and div tags to give text the appearance of a heading.

Basically these are the classes you use if you want to change the size of heading or make a paragraph tag look like a heading.

Default weight

These utility classes adjust or give the appearance of body text, they are known as 'default weight' classes. These classes can also be applied to various elements such as heading, paragraph, span and div tags to give text the appearance of a heading.

Basically, these are the classes you use if you want to change the size of paragraph or make a heading element look like normal body text. They're most often used when you want to adjust the font-size text within your content when abstract or caption text isn't appropriate.

Line spacing (line height)

Line spacing may also be known as line height. By default, all text elements will use the appropriate line height for their font size, this has been calculated using the Design System's base line grid system with all values being multiples of 4px. You can however apply utility classes which can apply alternative spacing values to either heading space which is slightly tighter or no space which sets the line height to match the font size.

Changing line height values isn't recommended, however it can be useful to assist with vertical alignment of single-line text elements within a container. It may also be useful for some specific design contexts, for example you might want a more compact or dense look, and a line-height equal to the font size could achieve that. Adjusting line height should be done carefully and tested thoroughly to ensure it doesn't negatively impact readability.

Research and rationale

Font size

Building on the research conducted by the DTA we chose to base our typography on the font-grid system that they developed. A typographic scale was used to create a set of font-size and line-height values which have been designed for legibility and can be easily implemented by designers or developers with a predictable output (Digital Transformation Agency, 2018).

Using the Design System's typography values means any object containing text is more likely to align with another element. This appearance of a baseline grid is created by automatically rounding the line-heights to the nearest grid value 4px, then converting them back to a unit-less value.

Where we chose to deviate from the presets defined by the Digital Transformation Agency was in our mobile site design where we found the H1 and H2 were too large. We did this for 2 reasons.

1. Improved Readability: On a smaller screen, large text can appear overwhelming and may not fit well within the screen's width. Reducing the size of your headings can make your content easier to read and navigate.
2. Better Use of Space: Smaller headings take up less space, allowing more content to be visible on the screen at once. This can be especially important on mobile devices, where screen real estate is limited.

When designing our fonts size, we also looked at the default size, letter spacing and font weights from Google's material design. Having developed the fonts, their type scale generator was a good baseline to compare our font sizes against.

Heading sizes

All HTML standard heading levels are supported by the headings component when used within .qld__body.

Similar to other Design Systems our H1 element doesn't use the largest font-size provided by the system which is xxxl as that size is intended for large promotions or splash-sections and is too large to be used in normal body copy (Digital Transformation Agency, 2018).

Modifier or utility classes

We have added classes to modify font size and weight. These were provided to help separate semantic meaning from visual appearance in order to better support WCAG2.0 Criterion 1.3.2.

1.3.2 Meaningful Sequence:

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)

This means designers and developers using the Design System can continue to use the correct heading level for the page structure while retaining a style that doesn't interfere with visual comprehension. For example, having a H2 in a sidebar that looks as small as a H4. This was a solution that we inherited directly for the Digital Transformation Agency's core font system (Digital Transformation Agency, 2018).

Maximum width paragraphs

Paragraphs are given a maximum width inside body to optimise readability across multiple lines of text. The Web Content Accessibility Guidelines recommend that lines of text don't exceed 80 characters in length (Digital Transformation Agency, 2018).

This option can be overwritten by changing the .qld__max-width however it isn't recommended.

Why Noto sans?

Our reason to endorse Noto Sans as the typeface for the Design System is based on the the research conducted by the Department of Premiers and Cabinet. They conducted a review of multiple fonts, looking to create consistency across print and digital application, minimise cost, improve digital legibility and to ensure corporate identity could be easily adaptable for future communications technologies.

They reviewed different open source type face looking at their ability to meet the following criteria:

• suitability for both print and online applications
• open-source (cheaper and available for all users)
• avoiding letter mirroring (to assist with dyslexia/ readability issues)
• distinct characters (e.g. capital I / 1, B / 8, O / 0, i / j)
• a strong tail on the Q to avoid confusion with O
• good spacing between letterforms
• multiple weights and styles, including condensed and italics
• variation in thick/thin strokes
• large x-height (assists in readability)
• works at all scales (e.g. for large format printing)
• distinct numerals
• good kerning and word spacing
• 1.2.2 Resize text (Level AA) standard – text can be resized without assistive technology up to 200%.

What they found was that the 2 best fonts were Noto Sans and Lato. Noto Sans was determined to be the best option however because it met more of the criteria and had the best multi-language support.

Commissioned by Google, the Noto family is designed with the goal of achieving visual harmony (e.g. compatible heights and stroke thicknesses) across multiple languages/scripts.

Where does Meta fit in?

While Nota Sans is the official typeface for the Design System, Meta having been the standard Queensland Government print font for many years is likely to still play a role in many sites branding. Unit Noto Sans is officially endorsed as the new standard for corporate ID, Meta should be used for headings and agency/site names.

In our Design System we endorse the use of Meta only in situations such as promotional text and site names. This allows a site to use these prominent digital brand elements in a way to match their tradition media. Meta isn't approved for body copy, buttons or small text, as it isn't as legible as fonts designed specifically for the web.

FF Meta is a version of Meta that's available from Adobe Typekit which can be used as a web font.

Why system fonts as a fallback

Like the Digital Transformation Agency, we chose to use system fonts as a fallback in our font stack. The use of system fonts in government services enhances download speed and accessibility for all users, particularly those with low-end devices or remote internet connections, while also leveraging the improved aesthetics of modern typefaces in new operating systems (Digital Transformation Agency, 2018).

Headings and paragraph style breakdown

Below is a breakdown of all our properties for the core heading and paragraph styles.

Desktop sizes (screen sizes larger then 992px)

Mobile sizes (screen sizes below  992px)

Changes are primarily to heading 1, 2, abstract text and site title sizes. Other than that, it's only margin top values that change at the mobile breakpoint.

Classes and variables

Accessible text requirements

When it comes to accessibility, the Web Content Accessibility Guidelines (WCAG) 2.1 provide several guidelines related to typography.

Our default text styles have already been designed to meet accessibility requirements however keep these considerations in mind if you're modifying the Design System or creating a custom component.

WCAG guidelines

1.4.3 Contrast (Minimum)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.

1.4.3 Resizes text

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

1.4.5 Images of text

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for certain situations.

1.3.2 Meaningful Sequence

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)

1.4.12 Text spacing

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

• line height (line spacing) to at least 1.5 times the font size
• spacing following paragraphs to at least 2 times the font size
• letter spacing (tracking) to at least 0.12 times the font size
• word spacing to at least 0.16 times the font size.

1.4.10 Reflow

Content can be presented without loss of information or functionality, and without requiring scrolling in 2 dimensions for vertical scrolling content at a width equivalent to 320 CSS pixels; horizontal scrolling content at a height equivalent to 256 CSS pixels.