Typography
Spaceship explores two typographical environments: a technical rounded typeface Gotham Rounded and a plainer and more geometric Proxima Nova typeface..
Confident and straightforward, tipography enables a friendly and conversational tone with our audience.
Primary font
Gotham Rounded is a friendly typeface, keeping a technical DNA. It is used exclusively in the Spaceship logo, product sub-brands, tools, and the team’s identities. The only permitted weights are Medium, book, and light.
Secondary font
Proxima Nova is a key element of the Spaceship’s graphical environment. It is the main typeface for our text and information through all communications. Bold, medium, regular and light are the only weights that can be used when working with this typeface.
Scale
We built our type scale system using the Golden Ratio (1:1.618), and determined all the necessary size steps we need.
Using the Typographic Scale Calculator modularscale.com, we can create a complete type scale set from a primary base size. Because the Golden Ratio creates large jumps between sizes, we must add a secondary base size (2x the base size) to generate a more useful range. In this example, we show a type scale based on a 16px base size.
Text styles
Proxima Nova can be used both in small-sized body text and large headlines with maximum optical consistency. Its wide range of weights makes it easy to match any tone or message. Text should be preferably left‑aligned, though centered alignment can be used when appropriate.
For big headlines use bold weight, optical kerning, auto leading, and 80% word space.
For regular headlines use bold weight, optical kerning, auto leading, and 80% word space.
For short subheads use medium or regular weights, optical kerning, auto leading, and 100% word space.
For long subheads use medium or regular weights, optical kerning, auto leading, and 100% word space.
For paragraph use regular or light weights, metrics kerning, auto leading, and 100% word space.
For small body use regular or light weights, metrics kerning, auto leading, and 100% word space.
Guidance
Do not use specific kerning values, neither positive or negative.
Do not use specific leading values, not tighter or losser.
Do not use right aligned paragraphs
Type hierarchy
Typography should clearly show the hierarchy between headlines, subheads, and body text. Pairing the right weights and sizes creates strong visual contrast and helps guide the reader. This is the key to an effective content hierarchy.
Guidance
Do not use the same body weights for different types of content
Keep the weight relationship from top to bottom, that is stronger headlines, lighter subheads or body texts.
Do not use similar font size and weights for different content types.
Safe margins
To guarantee maximum readability we use the headline leading measure as the reference to establish safe margins to the following text blocks.
Color combinations
Type when used with solid color backgrounds should only be used in the color combinations presented below.
Guidance
Do not use other colors, SDS auxiliary or sub-brand colors on any type of typeface.
Do not use SDS Blue color type over auxiliary or sub-brand colors. Only use white or dark grey.
Be aware of the contrast ratio between type and background. Do not use auxiliary colors, tints or shades.
Backgrounds
Contrast and legibility are key elements to take into consideration when using type over images or color backgrounds.
Guidance
Avoid using SDS Blue color over complex imagery or illustrations. This is valid for light or dark images.
Do not place text over contrasting images. This is valid for light or dark images.
Do not overcrowd images with text. Balance is key to effective communication.