Typographic scale

A typographic scale means that no matter
what medium we’re designing in, all of our
type relationships will be consistent with other communications. It also means that all of our
type is working in harmony.

Big is good. That’s because big is friendly, big is approachable. This is how you have to think when setting type for Harmoney.

The system of the Augmented Fourth

Our scale is based on the Augmented Fourth
(a factor of 1.414 which we round to the nearest
four). Having a mathematical approach to typography means clean relationships between our headers,
sub-headers, and body copy.

But there’s a little looseness to the system, we want to stick to a 4px baseline and so we always round to the nearest 4.

To work out this scale start with your body copy. As a rule of thumb—when picking what size this should be—be generous with it.

Below is an example of a scale stemming from 24px.
Use the website type-scale to quickly generate some sizes for your next layout. Remember to round to the nearest 4!

1rem/24.00px

So a needle pulling thread

0.707rem/16.97px

La a note to follow so

0.5rem/12.00px

Ti a drink with jam and bread

1.414rem/33.94px

Fa a long long way to run

1.999rem/47.99px

Mi a name I call myself

2.827rem/67.85px

Re a drop of golden sun

3.998rem/95.94px

Do a deer a female deer

Tracking

Neue Haas Grotesk Round is set naturally tight,
but we like it just a little bit tighter because we use it so big. This means we normally set our tracking or letter spacing at -0.5% for Figma or -5 in Adobe. It should feel like a solid block without the type looking too crunched.

-5%

Too tight

+5%

Too loose

-0.5%

Just right

Leading

Tight on the headlines loose on the copy. If we remember this we can’t go wrong. We set our large type solid—that means the leading matches the type size. For our body copy we set it at 1.4x the type size rounded to the nearest factor of four.

Here’s the leading settings for the sizes from our typographic scale above.

Use for highlights

Display 1: 96/96

The big heading

Heading 1: 68/68

Normally used for section titles

Heading 2: 48/48

For page or section introductions

Page intro: 32/44

Text for longer reading

Paragraph text: 24/36

Line lengths

Take great care in selecting your line lengths. It’s the difference between making content that’s easy to digest and one that makes you cross-eyed. Shorter line lengths are easier to read and with our big type this shouldn’t be a problem!

Cases

Write content in sentence case—unless it’s a button where we use all caps or title case when we are referring to product names.

Avoid using all caps in your paragraphs and text unless it’s obviously an acronym like MVP.

I’m easy to read

I’M HARDER TO READ

Flush left with a little centre

Flush left creates strong alignments for your eyes to follow as it browses content. This is our standard setting for all typography across all communications. It’s functional and timeless and serves most of our communication purposes.

Centre aligned type is only used for T&C’s or foot-notes. This should be used sparingly and normally only in difficult situations like web banners where space is very limited and creative utilisation
of space is a must.

OR FOR LITTLE
SPEECH BUBBLES

Centred elements for advertisement screens

This is an example of flush left copy. It may not all be aligned to the same left margin, but it still counts!

Morbi non scelerisque tellus. Aenean ornare dignissim auctor. Cras cursus quis magna eget porttitor. In congue non erat sit amet faucibus. Suspendisse potenti.

In sed dolor iaculis, laoreet sem vitae, ultricies lectus. Sed efficitur, purus ac convallis porttitor, ex mi dictum lacus, a sollicitudin ante nunc vitae est.

Little page details

Flush
left text

Use: Details

Font: Roboto Mono

CONTENTS

Gradients and shadows

The rule of four