Typography

Font

'VIC' is the brand font to be used across all Victorian Government communications. This creates a distinct but consistent look and feel.

It is free to download from vic.gov.au.

Only use VIC font. The Ripple Design System only uses ‘Regular’ and ‘Bold’ weights of VIC font.

As VIC is a custom font, it's recommended to use Web Safe Font as a fallback when declaring your font stack. The preferred fallback font for the Ripple Design System is Arial.

Type Styles

In the Ripple Design System there are two type sets, one for fixed use and one for fluid (responsive) use:

• The fixed type set uses fixed sizes. This means they use the <991 fluid styles, but do not respond.
• The fluid type set has two fixed sizes. These both respond at certain breakpoints for larger or smaller styles.

Headings

Headings have both fluid and fixed sets. Headings are bold by default for emphasis and to create contrast.

Fluid

Fixed

Paragraph

The default paragraph font size is 16px on all screens.

The majority of your body copy should use the standard 16px paragraph size.

Lists

Use lists to make blocks of text easier to read, and to break information into manageable chunks.

List styles are based on rpl-type-p with extra spacing.

Unordered Lists

Introduce bulleted lists with a lead-in line ending in a colon. Start each item with a lowercase letter, and do not use a full stop at the end.

Unordered lists allow for two nested levels which are styled as:

• level 1 - bullet
• level 2 - dash

Ordered Lists

Use numbered lists instead of bulleted lists when the order of the items is relevant.

You do not need to use a lead-in line for numbered lists. Items in a numbered list should end in a full stop because each should be a complete sentence.

Ordered lists allow for three nested levels which are styled as

• level 1 - numbers
• level 2 - alphabet
• level 3 - roman numerals.

Text Alignment

You should usually left-align body copy that’s read left to right. Right-aligned body copy can be hard for users to find and read when they magnify their screen.

Do not ‘justify’ blocks of body copy so that they’re aligned to both the left and right margins. Doing this creates wider spaces between words, which can make the text hard to read.

Font weight

You can use bold to emphasise particular words in a transaction. Use it to highlight critical information that users need to refer to or you’ve seen them miss.

Try to avoid bold. Overuse will make it difficult for users to know which parts of your content they need to pay the most attention to.

Links

Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.

List of variables

All values are stored as variables nested in the type variable.

Type size

Line Height

Letter Spacing

Font Weights

List Styling