Page tree
Skip to end of metadata
Go to start of metadata

Typography

Noto Sans and Noto Serif typefaces

The new templates on www.bath.ac.uk are set with Noto Sans and Noto Serif. We use Google Fonts to serve the webfonts to the site.

Both typefaces are free to use in commercial applications and have a wide and varied character set. Versions of both Noto Sans and Serif are available in over 800 languages.

Use of Noto in mobile applications provides visual consistency with www.bath.ac.uk, which is our most visible digital touchpoint for most of our users.

Webfont performance

On the website we use a sub-set of the Noto typefaces for optimal performance, only loading the minimum font weights and variants we require.

However, embedding selected fonts in an application should allow a wider range of weights and variants to be leveraged.

Make sure application load times and overall performance aren’t compromised with the addition of a few extra font weights or variants.

Colour palette

The Lens colour palette was developed to provide a vibrant, cohesive and accessible range of colours for use on all types of digital products.

We would recommend taking colours directly from the design system, ensuring sufficient contrast between text and background to maintain legibility.

The University logo must be used in accordance with the guidance: https://www.bath.ac.uk/guides/using-the-university-of-bath-logo/

The University of Bath logo should never be smaller than 56px tall.

If space is at a premium, use the wordmark logo instead.

The University of Bath logo must be surrounded by a minimum of 14px ‘breathing room’.

Use the wordmark version of the University logo when the full logo does not fit the available space.

The University of Bath wordmark logo must be surrounded by a minimum of 14px ‘breathing room’.

Sulis head icon

The Sulis head icon must not be used without the accompanying text, except in very particular circumstances.

The Sulis head is well-suited to positioning on squares, rounded squares and circular shapes and can be used for application icons.

Care should be taken to make sure the Sulis head icon is legible at the smallest possible icon size on each device.
 

The Sulis head icon must not be placed directly next to any text other than the official ‘University of Bath’ logotype.

Components

The Lens Design System details a number of web-specific components. We would not suggest that these are directly re-purposed for use in mobile applications.

However, all Lens components are responsive and have layouts optimised for viewing on mobile/small devices.

These layouts can be used as starting points for native app design as they provide a broad overview of our approach to spacing, alignment and page structure.