Font management

First draft

 

User level: Site Owner; Site Administrator

 

There are two font management modes: Standard and Advanced. When the Font Settings screen loads for the first time, it will be in Standard mode. You can switch between these modes using the font management mode toggle (2) at the top of the screen.

Font settings - Initial screen

Expand All

Clicking the 'Font gallery' (1) button displays a modal for previewing the font options available.

Font gallery modal

The standard settings provide two font schemes to choose from: a preset 'Oxford' font scheme (based on the font scheme of the main University website), or the option to set your own 'Custom font scheme' across a limited set text categories.

font management font scheme - screenshot

The option to use the Oxford font scheme or configure your own.

Custom font scheme

The Custom Fonts settings provides configuration options for 13 text categories within the site. For each text category, users can configure the font family, font size and font weight. Once these settings have been chosen for a text category, they can be previewed using the 'preview font' button.

Standard mode custom fonts - screenshot

Customising font styles in standard mode

Font family

Display and body fonts can be previewed in the the 'Font gallery' (1).

Font size

In the Custom font settings, two font size options are available: 'normal' (i.e. the size set for the text category in the Oxford scheme) and 'bigger'. In order to specify unique font size for text elements (in rems), use the Advanced settings.

Font weight

In the Custom font settings, two font weight options are available: 'normal' and 'bold'. In order to choose from more font weights, use the Advanced settings.

Advanced font management enables users to configure font settings for a 49 site elements, which are grouped into 6 main categories, two of which have sub-categories.

Advanced font settings categories and sub-categories:

  • Header
  • Navigation
  • Main content
  • Widgets
    • Accordion
    • Tabs
    • Image gallery
    • Forms
    • Publications listing
    • Taxonomy terms
  • Item styles
    • Landscape
    • Breaker
    • Tile
    • Row
    • Image text
  • Footer

Advanced font configuration

For each text category, users can configure the font family, font size, font weight, and font style. Once these settings have been chosen for a text category, they can be previewed using the 'preview font' button.

font management advanced categories expanded

Font family

Display and body fonts can be previewed in the the 'Font gallery' (1).

Font size

Font size is specified in rems; rem is a relative unit of font sizing relative to the base font size of the site. The base font size for Mosaic is 16px, so 1rem = 16px, 1.5rem = 24px, 2rem = 32px, etc… Mosaic allows any rem value between 1 and 10.

Font weight

The number of font weights available will depend on the font family you select, most font familes support regular and bold font; others include more weights such as light, hairline, extra bold, etc. 

Font style

Font style consists of two options: 'normal' and 'italic'.

List of site pages