Typography — Starshot Brand Guide

Family

Hanken Grotesk, a free Google Font, is Starshot's only typeface. Labels don't use a monospaced font; they use the label-caps style (see Labels).

Aa

Hanken Grotesk

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0⁠1⁠2⁠3⁠4⁠5⁠6⁠7⁠8⁠9 ¿? ¡! áéíóú € @ &

Name (token)

Value

When to use it

font-family-brand

Hanken Grotesk

Web, slides, print and labels.

Weights

Five font weights. Headlines of 24 px or more use SemiBold (600); the rest use Regular (400).

font-weight-light

300 · Light

To highlight something specific; the scale does not use it by default.

Hanken Grotesk Light

font-weight-regular

400 · Regular

Body text and all sizes below 24 px.

Hanken Grotesk Regular

font-weight-medium

500 · Medium

To highlight something specific; the scale does not use it by default.

Hanken Grotesk Medium

font-weight-semibold

600 · SemiBold

Headlines of 24 px or more (text-h6 and larger) and labels (label-caps).

Hanken Grotesk SemiBold

font-weight-bold

700 · Bold

To highlight something specific; the scale does not use it by default.

Hanken Grotesk Bold

Type scale

The sizes for web and slides (1920 × 1080). On the web, large sizes get smaller on mobile: each row says so.

text-display-xl

120 px · 100 % · −2 % · SemiBold

Slide covers.

Starshot

text-display

110 px · 100 % · −2 % · SemiBold

Main headline of the website (40 px on mobile).

Starshot

text-h1

86 px · 120 % · −2 % · SemiBold

Section titles on the website (32 px on mobile).

Digital product

text-h2

72 px · 120 % · −2 % · SemiBold

Slide titles.

Digital product

text-h3

56 px · 120 % · −2 % · SemiBold

Section subtitles on the website (28 px on mobile).

We build product

text-h4

40 px · 120 % · −2 % · SemiBold

Block subtitles on web and slides.

We build digital products

text-h5

32 px · 120 % · −1 % · SemiBold

Card and slide titles.

We build digital products

text-h6

24 px · 120 % · −1 % · SemiBold

Body text in slides (minimum size) and small headlines.

We build digital products for companies

text-subtitle

20 px · 140 % · 0 % · Regular

Intro text (the opening paragraph).

We build digital products for companies that want to grow.

text-body-l

18 px · 150 % · 0 % · Regular

Large body text on the website (16 px on mobile).

We build digital products for companies that want to grow.

text-body

16 px · 150 % · 0 % · Regular

Default body text and slide footers.

We build digital products for companies that want to grow.

text-small

14 px · 150 % · 0 % · Regular

Small text and secondary data (dates, author).

We build digital products for companies that want to grow.

text-label

12 px · 140 % · 0 % · Regular

Captions and lowercase labels; base of label-caps.

We build digital products for companies that want to grow.

text-micro

11 px · 140 % · 0 % · Regular

Legal notices and very small text.

We build digital products for companies that want to grow.

How to read each row

Size · line height (height of a line) · letter spacing · weight. In slides, body text is 24 px or more (text-h6) and footers are 16 px (text-body).

Labels

label-caps: short uppercase texts above a title, categories, table headers and status tags.

label-caps

12 / 16 px · +8 % · SemiBold · UPPERCASE

Replaces labels in a monospaced font.

Case studies · Digital product

Line height

The height of each line: four values, one per kind of text.

Name (token)

Value

When to use it

leading.tight

100 %

Cover text: text-display-xl and text-display.

leading.snug

120 %

Headlines: from text-h1 to text-h6.

leading.normal

140 %

Intro text, labels and small text: text-subtitle, text-label and text-micro.

leading.relaxed

150 %

Body text: text-body-l, text-body and text-small.

Letter spacing

Tighter in large sizes, normal in body text and more open only in uppercase.

Name (token)

Value

When to use it

tracking.tight

−2 %

Cover text and headlines of 40 px or more.

tracking.snug

−1 %

Headlines smaller than 40 px.

tracking.normal

0

Body text and text on the website or app.

tracking.wide

+8 %

Only uppercase labels (label-caps).

What to do and what to avoid

Dedicated teams that join your product from the first week.

Dedicated teams that join your product from the first week, with agile methods, two-week sprints, demos and weekly reporting for management and product.

CASE STUDIES

// CASE STUDIES

Digital product

Dedicated teams that join your product.

Digital product

Dedicated teams that join your product.

To read better

Align text to the left, never justified. On the web, body text is 16 px or more with generous line height (leading.relaxed). Text colors (text-primary, text-body, text-secondary and text-muted) read well on color-white and color-surface-subtle.

Related pages