Fonts
The University’s typeface is Helvetica, which we use for printed publications and when this is not available, Arial and Arial Bold are acceptable substitutes.
For websites, we use the font-family CSS property to specify a font stack or list of operating system fonts. Your operating system is optimized for these fonts, they tend to load more quickly. For example we use font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif; They are listed in order of preference that they should appear on the website. If the web browser can't load a specific font it will try the next in the list.
For some text we also use the CSS class font-type-1 to display a sans-serif and the class font-type-2 serif font.
Font stacks
We use the following font stack on the Oxford Brookes University website.
font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
font-family: "Georgia", Times, "Times New Roman", serif;
| Font family | Operating System |
|---|---|
| BlinkMacSystemFont (San Francisco) | OS X, Chrome |
| -apple-system (San Francisco) | OS X (10.11+), iOS (9+) |
| Segoe UI | Windows |
| Roboto | Android 4.0+, Chrome OS |
| Oxygen | Linux, KDE |
| Ubuntu | Linux, Ubuntu |
| Cantarell | Linux, GNOME |
| Fira Sans | Firefox OS |
| Droid Sans | Android (until 3.2) |
| Helvetica Neue | macOS versions < 10.11 |
| Helvetica | macOS, Windows |
| Arial | macOS, Windows |
Primary font
The primary font is Helvetica, if this is not installed the fallback font Arial or another default browser sans-serif font will be displayed. For example we use the CSS class font-type-1 to display a sans-serif font font-family: Helvetica, sans-serif;. This means that Helvetica will be displayed by the web browser if the font is installed. If Helvetica is not available, the web browser will use the default sans-serif font. For most Windows web browsers this will be Arial.
Secondary font
Georgia may be used sparingly to add a tone of voice by highlighting words and quotes. It should never be used for body copy. For example we use the CSS class font-type-2 to display a serif font font-family: Georgia, serif;. This means that Georgia will be displayed by the web browser if the font is installed. If Georgia is not available, Times New Roman or Times will be used by the web browser.