Typography

Ultramarine

Ultramarine is the typeface of 66°North. It is a bespoke typeface designed for 66°North by Guðmundur Úlfarsson of the type foundry Or Type. Ultramarine references 19th-century British grotesque typefaces in a modern, legible grotesque, which hints at 66°North’s fisherman heritage with subtle ‘hooks’ in certain letters.

It is a clear, unique, yet legible sans-serif typeface that reflects both simplicity and directness but references the company’s heritage with a distinct character.

Ultramarine must be used for all brand communications.

Styles and weights

Ultramarine comes in both a display and text style with bold and regular weights. Originally it only came in one style. The family has been expanded to cover a broader range of applications for digital.

• Text Regular is used for paragraphs of text and anything smaller than 16px/16pt
• Display Regular is used for headlines or large short sentences. The minimum size is 24px/24pt.

When to use bold
Both styles come in a bold weight, this should be reserved for when the emphasis is really needed. For example, on the website buttons use bold to further emphasize they are to be clicked. However, before using bold, try out a tone of color.

Hierarchy

The content should define what kind of hierarchy you will need to use. A poster for a campaign would want the tag line to be the largest scale step, while the website and Instagram handle would be smaller.

The following guidelines should be a starting point:

• Use scale changes over font-weight changes to differentiate and contrast between pieces of information
• Four steps difference is a good basis for creating a contrast between different pieces of text
• Use color tones to create a hierarchy within a group a text lockup that is using the same scale

Guidance

• Keep sizes per application to 2 – 3
• Where possible, use regular over bold
• Use color-tone over font-weight to create a hierarchy
• Avoid mixing colors; keep it monotone
• Do not use all capitals for headlines or body copy (we aren’t shouting at people)
• Keep text left-aligned where possible

What sizes do I use?

Context of the information, format, and distance from reading all affect what size you should use. What size do I use for my body text? How larger should my headline be than the body?

To help make those decisions and keep visual output consistent, we set our typograph sizes and line heights to a ratio. The ratio we use is 1.2 (also known as a minor third). This ratio is paired with the idea of a scale and steps.

A scale is composed of multiple steps going up or down from your base size, known as step 0.

Getting the sizes

There are presets available for different applications:

• Figma
• Adobe Suite
• Web

If you aren't using presets and want to roll your own styles, use the calculator below to work out what sizes your project needs.

How to use

First, define a base size. This size should be what you would use for the paragraph copy in that design. This ensures that you will the steps on either side fit within the design.

Micro-adjustments

The "adapt to canvas size" toggle provides values if you wish to add micro size adjustments to your design based on the canvas size. You may wish to do this for digital applications where the same design is surfaced on multiple screen sizes. You can see these in action on 66north.com today.

How the sizes are calculated

First, define a base size. This size should be what you would use for the paragraph copy in that design. This ensures that you will the steps on either side fit within the design.

16px in digital is a common starting place. In print, it can vary from 8pt to 14pt

Each increase in the scale:

If we set our base size as 16m, our first step would be

... our second step

This equation can also use negative values to get a smaller scale than your base

Line-heights

These are general guidelines for how we tackle headings and body. At very large sizes you headings can be further reduced to 1.1 to 0.8 depending on viewing distance.

Line heights for digital

1. Headlines and labels are 1.2x the font size.
2. Body text is are 1.6x the font size.

For example a headline:

and a paragraph

Line heights for print

1. Headlines and labels are 1.2x the font size.
2. Body text is are 1.4x the font size.

For example, a headline:

and a paragraph

Paragraph spacing

Paragraphs are spaced using the line-height value. If we use the previous example of the paragraph set at 16px/25.6px the spacing between each paragraph would be 25.6px

InDesign defaults to mm. Ensure that you update it to pt, and it will convert the pt size to mm for you.

Breaking the scale

The scale provides a solid basis for our work; it makes it predictable, thoughtful, and intentional to the viewer. The scales can be broken out for specific purposes – content is greater than the brand. Examples include a particular advert or a piece of editorial design. In these situations, define an internal logic to the work and stick to that. For example, the headline should always be 80% width of the page width, with the type size adjusting to fit.

Help!

Typography is challenging to get right; minor adjustments can change the meaning of a message or make information easier to digest. If you need any assistance, message the team at brand@66north.com