Fonts

Our University typeface is Helvetica. 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 so 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

Our primary font is Helvetica, if this is not installed 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.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

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.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9