Our font
Roboto is the Jisc brand font and must be used on all digital services.
“Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.”
Headings
Users don’t read your page, they scan it, deciding in seconds if it is relevant to them. By breaking up your page with concise and meaningful headings you’re helping users find the content they want – faster.
| Weight | 0-465px | 465-756px | 756-990px | |
| Heading 1 | Light | 36/41 | 41/45 | 45/54 |
| Heading 2 | Medium | 27/36 | 32/41 | 36/45 |
| Heading 3 | Light | 23/27 | 27/36 | 27/36 |
| Heading 4 | Medium | 18/27 | 23/27 | 23/27 |
| Heading 5 | Light | 18/27 | 18/27 | 18/27 |
| Heading 6 | Medium | 15/27 | 15/27 | 15/27 |
Body copy
Our objective is optimal readability at all screen sizes, on any device. Our body copy font-size of 18px (with 27px line height) is intentionally generous so that large chunks of copy have plenty of space, feel lighter and easier to consume.
| Colour | Weight | Size / line height | |||
| Intro | #333 | Light | 21/27 | ||
| Body | #333 | Light | 18/27 | ||
| Support | #666666 | Medium | 15/21 | ||
Links
Users will scan, rather than read, your content. Along with headings, they’ll be drawn to linked text. It’s important we offer a consistent visual experience for links across all our sites to make this as easy as possible.
For light backgrounds
Used on body copy and calls to action
| colour | weight | decoration | background | |
| Body copy | #333 | Light | none | none |
| a:link | #069 | Light | underline | none |
| a:visited | #609 | Light | underline | none |
| a:focus | #069 | Light | underline | #fd6 – 3px solid outline |
| a:hover | #ae460e | Light | underline | none |
For dark backgrounds
Used on calls to action, Jisc banner and focused masthead.
| colour | weight | decoration | background | |
| Body copy | #fff | Light | none | none |
| a:link | #fff | Light | underline | none |
| a:visited | #fff | Light | underline | none |
| a:focus | #069 | Light | none | #fd6 – 3px solid outline |
| a:hover | #d9d9d9 | Light | underline | none |
Variations
- Underline can be removed from link styles if there is no surrounding text. For example in a call to action where the full block of text is a link.
- Visited link colour should be removed when such a visual reminder is unnecessary. For example the site title or login and username links.