Using our NIHR typeface

Lato is our corporate typeface family - an open source (free) collection of typefaces alongside Google and the Sans Serif collection. There are ten variations of the Lato typeface selected as part of NIHR's visual identity.

Lato-Regular and Lato-Light work well for display copy and body text for print-on-demand or digital documents and the Web. Lato-Black can be used for headings and subheadings. Lato-Hairline may be used for decorative and formal purposes, such as invitations to special events. Lato-Hairline is not to be used as body text or in all caps.

Bold and Italic variations of the typefacescan be used as described in NIHR’s style guide.

Lato is the typeface of choice when designing websites and when designing print-on-demand and digital communication materials.

Arial is to be used as a generic typeface back-up. If Lato is not available, Arial can be used for correspondence, business documents and emails. Arial can also be used when writing on external web platforms, such as Eventbrite.

The recommended font size for text is 16 points.

Our selected typefaces can be downloaded from the NIHR Hub.

Spacing is everything in UI design.

• It improves data consumption through better legibility
• It provides customers with a more consistent user experience
• It eliminates guesswork and decision fatigue whilst designing and developing
• It drives consistent scalability
• It conveys meaning by giving elements a visual hierarchy
• If you’re a designer, your output will just… look better.

To begin, set out base numbers for your grid. We use material design principles so divisions of 8: 8px / 16px / 24px / 32px / 40px / 48px / 56px and so on for all padding / margin between elements (sometimes 4px if you need to go in tight).

So the layout for a set of elelments; H1, p tag, text/input field and cta could be vertically like this

You can see that the line heights, heights and all spacing is scaled by 8

These are the font values for mobile and desktop with vertical rhythm applied

h1 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse repellendus ducimus vel totam dolore doloremque officiis fugiat maxime, nam consectetur optio tempora repudiandae itaque excepturi consequuntur provident veritatis. Voluptatibus, enim?

h2 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse repellendus ducimus vel totam dolore doloremque officiis fugiat maxime, nam consectetur optio tempora repudiandae itaque excepturi consequuntur provident veritatis. Voluptatibus, enim?

h3 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse repellendus ducimus vel totam dolore doloremque officiis fugiat maxime, nam consectetur optio tempora repudiandae itaque excepturi consequuntur provident veritatis. Voluptatibus, enim?

h4 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse repellendus ducimus vel totam dolore doloremque officiis fugiat maxime, nam consectetur optio tempora repudiandae itaque excepturi consequuntur provident veritatis. Voluptatibus, enim?

h5 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse repellendus ducimus vel totam dolore doloremque officiis fugiat maxime, nam consectetur optio tempora repudiandae itaque excepturi consequuntur provident veritatis. Voluptatibus, enim?

h6 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse repellendus ducimus vel totam dolore doloremque officiis fugiat maxime, nam consectetur optio tempora repudiandae itaque excepturi consequuntur provident veritatis. Voluptatibus, enim?

p - Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse repellendus ducimus vel totam dolore doloremque officiis fugiat maxime, nam consectetur optio tempora repudiandae itaque excepturi consequuntur provident veritatis. Voluptatibus, enim?

p-bold - Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse repellendus ducimus vel totam dolore doloremque officiis fugiat maxime, nam consectetur optio tempora repudiandae itaque excepturi consequuntur provident veritatis. Voluptatibus, enim?

p-link Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse repellendus ducimus vel totam dolore doloremque officiis fugiat maxime, nam consectetur optio tempora repudiandae itaque excepturi consequuntur provident veritatis. Voluptatibus, enim?

Desktop

Mobile