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 who can see the page decide within seconds whether or not the content is relevant to them by skimming through headings, glancing over subheadings keeping an eye out for significant keywords. Breaking up content with headings clearly distinguished headings allows the page to be easily scanned by the user
| viewport size: | Weight | 0-465px | 465-756px | 756-990px |
| H1 – Tuba | Light | 36/40.5 | 40.5/45 | 45/54 |
| H2 – Euphonium | Medium | 27/36 | 31.5/40.5 | 36/45 |
| H3 – Baritone | Light | 22.5/27 | 27/36 | 27/36 |
| H4 – Tenor | Medium | 18/27 | 22.5/27 | 22.5/27 |
| H5 – Horn | Bold | 18/27 | 18/27 | 18/27 |
| H6 – Flugelhorn | 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 | |||
| Standfirst – Trombone | #2c3841 | Light | 22.5 / 36 | ||
| Body | #2c3841 | Light | 18 / 27 | ||
| Support – Trumpet | #646f78 | Medium | 15 / 22.5 | ||
| Micro – Cornet | #646f78 | Medium | 12 / 22.5 | ||
Links
Users don’t read, they scan – It’s Important that we offer a consistent experience for links across all our sites.
Light backgrounds
Used on body copy and calls to action
| colour | weight | decoration | background | |
| Body copy | #2c3841 | Light | none | none |
| Default | #007aaa | Medium | underline | none |
| Visited | #75b | Medium | underline | none |
| Focus | #007aaa | Medium | none | #fd6 – 3px solid outline |
| Hover | #e85e13 | Medium | underline | none |
Dark backgrounds
Used on calls to action, Jisc banner and Focused masthead.
| colour | weight | decoration | background | |
| Body copy | #d5dee3 | light | none | none |
| Default | #fff | Medium | underline | none |
| Visited | #d5dee3 | Medium | underline | none |
| Focus | #2c3841 | Medium | none | #fd6 – 3px solid outline |
| Hover | #e85e13 | Medium | 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 from areas where its not in the users interest to know they’ve been to that page before – Login, Site title, Username, etc.