Skip to main content Jisc logo

User experience and design

  • About
  • Key considerations
  • Get started
  • Foundations
  • Guidance
    • Principles
    • Building your layout
    • Design patterns
    • Jisc style
    • User interaction
    • Technical considerations
    • Making resources accessible
  • Resources
  • Assets
  • User experience and design
  • Guidance
  • Jisc style
  • Typography

Typography

Use of our font including weights and sizes

Contents

  • Our font
  • Headings
  • Body copy
  • Links

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

  1. 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.
  2. Visited link colour should be removed when such a visual reminder is unnecessary. For example the site title or login and username links.
Useful links
  • Cookies
  • Privacy and your data
Contact
  • user.experience@jisc.ac.uk
Archive
  • Looking for the old pattern library?
Jisc logo

We’re a membership organisation, providing digital solutions for UK education and research

jisc.ac.uk

Areas
  • Connectivity
  • Cyber security
  • Cloud
  • Data and analytics
  • Libraries and research
  • Student experience
  • Advice and guidance
Explore
  • Guides
  • Training
  • Consultancy
  • Events
  • R&D