Typography

Design

Make reading easy

Typography plays an essential role in design and communication. More than 95% of information on the web is in the form of written language. Well-chosen and considered typographic design helps content to be easily understood and digested by the user.

Our font choice was based on the results of a survey completed by 434 Turas users. We asked participants to view the same content page presented using different font combinations. They were then asked to provide feedback on the combination they found the easiest to read. The range of participants included people with accessibility requirements.

Font CSS

Sizes are specified in rem, which is a relative length unit. In CSS this means root em, which represents the font size of the root element, usually 16px. This relative unit size scales better between different rendering mediums.

More about rem in CSS.

Font colour

Headings and body font are the same colour.

Near black

Hex: #1d1d1d

RGB: 29,29,29

Headings

Headings are Hind madurai.

We use one heading level 1 (H1) per page. The H1 is in the header area of the page templates. There are styles for heading level 2 (H2) down to heading level 6 (H6). We do not recommend nesting content any deeper than a heading level 4 (H4).

Heading level 2

font-weight: 700
font-size: 1.9rem
line-height: 1.2
margin-top: 50px
margin-bottom: 15px

Heading level 3

font-weight: 700
font-size: 1.6rem
line-height: 1.2
margin-top: 30px
margin-bottom: 15px

Heading level 4

font-weight: 700
font-size: 1.35rem
line-height: 1.2
margin-bottom:0.5rem

Heading level 5

font-weight: 700
font-size: 1.2rem
line-height: 1.2
margin-bottom: 0.5rem

Heading level 6

font-weight: 700
font-size: 1.1rem
line-height: 1.2
margin-bottom: 0.5rem

Body

Body font is Open sans.

The body font is 1.0625rem. When converted to pixels this is 17px.

Guidance

Do:

use the font Hind madurai for headings on Turas products
use the font family Open sans for body text on Turas products
use headings to chunk content to allow the user to scan a page quickly
make the colour contrast between your type and background compliant to WCAG 2.1 Level AA

Avoid:

changing the font sizes specified in our CSS
your page design dictating the width of your text
text spanning 12 columns on desktop, the max column width for body text is 9 columns
using all capitalised letters as this hinders the user’s ability to scan and read the content
using blinking text as it is difficult to read, distracting and can cause seizures to susceptible users

Consider accessibility

Remember, it is important to:

avoid text colour combinations that cause issues for colour blind users
avoid making lines of text too long or short, although short text is fine for headings and form labels
to communicate the hierarchy of your content use headings
left align text as standard, centred text shouldn't go over more than two lines
avoid writing in all caps, this is perceived as shouting and is difficult to read
use a single space after a full stop because 2 spaces cause rivers of white making it difficult to read