Typography

Three Google Fonts families carry the brand.

All three are free under the Open Font License. The four font samples below are live: click one and type your own line.

04.1

Headline

Headlines, titles and key display moments. The slight slant echoes the italic wordmark without competing with it.

Google Sans Flex · 500 · slant −2

Give great ideas character.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789 &?!

FamilyGoogle Sans Flex

Weight500

Slant−2

Line height110–120%

Web size64 / 40 px

font-family: "Google Sans Flex", sans-serif;
font-weight: 500;
font-variation-settings: "slnt" -2;

google fonts ↗

04.2

Subheadline

Subheadlines and short supporting lines under a headline. Upright, so the headline keeps the only slant in the hierarchy.

Google Sans Flex · 400 · slant 0

Creative partner for brands on a mission.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789 &?!

FamilyGoogle Sans Flex

Weight400

Slant0

Line height120–130%

Web size32 / 20 px

font-family: "Google Sans Flex", sans-serif;
font-weight: 400;
font-variation-settings: "slnt" 0;

google fonts ↗

04.3

Body

Body copy, paragraphs and longer reading. The serif adds warmth next to the geometric headlines.

Lora · 400

Supercube started as a character. As a kid, Joseph drew a cube with superpowers: it could control every other cube around it.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789 &?!

FamilyLora

Weight400 Regular

StyleUpright

Line height140–150%

Web size16 / 16 px

font-family: "Lora", serif;
font-weight: 400;

google fonts ↗

04.4

Eyebrow and label

Eyebrows, labels, tags, section numbers, HEX values, file names, dates and keyword lists. Never full sentences.

Cascadia Mono · 350 SemiLight

About this hub · 03.4 Square logo · #39A7E4 · supercube-colors.css

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789 &?!

FamilyCascadia Mono

Weight350 SemiLight

CaseSentence case

Line height120%

Web size12 / 12 px

font-family: "Cascadia Mono", monospace;
font-weight: 350;

google fonts ↗

04.5

Line height

Larger type gets tighter line height; smaller type gets more room. The blue lines mark each line box.

110%Headlines · 110–120%

Give great ideas character.

130%Subheadlines · 120–130%

We help founders who move fast dress their product or service in an identity that shows what makes it unique.

145%Body · 140–150%

Today we work with founders who move fast. They turn ideas into products quickly and build momentum early. We give what they build a face that shows what makes it unique.

Eyebrows and labels always sit at 120%.

04.6

Size relationship

Every size comes from the headline, H. The headline itself is set by the layout (see 07 Layout).

H64 pxHeadline

H ÷ 232 pxSubheadline

H ÷ 416 pxBody copy in Lora, for longer reading.

H ÷ 512 pxEyebrow / label

Web tokens

HSHBodyLabel

Desktop64321612

Mobile402016*12*

*Raised to the floor: 40 ÷ 4 would give 10 px body and 40 ÷ 5 would give 8 px labels.

Floors for readability

Body never goes below 16 px on screens or 9 pt in print; eyebrows never below 12 px or 7 pt. When a floor kicks in, raise only the size that is too small and keep the rest.

Going above the calculated size is fine when the hierarchy asks for it: with no body text, an eyebrow can be set at 16 px so it doesn't look lost.

04.7

Hierarchy

The style a text gets depends on its job in the piece, not on its length or position.

One entry point

The headline is the one idea you want read first. If a piece has only one text and it's the message, it's the headline.

8 words at most

A headline never passes 8 words or three lines. Longer lines get rewritten shorter or set as a subheadline.

The logo can lead

When the lockup or wordmark dominates, it takes the headline's place and the line beside it becomes a subheadline.

CombinationWhen

HeadlineStatement posts, covers, posters: one short idea.

HeadlineSubheadlineThe subheadline completes or explains the headline in one or two lines.

HeadlineBodyThe body is a real paragraph that explains the headline.

HeadlineSubheadlineBodyFull hierarchy: web sections, the first slide of a carousel, decks.

SubheadlineBodyText-led pieces with no single hook: descriptions, "about" cards.

SubheadlineCaptions and sign-offs over a strong image.

Eyebrow+ anyAdds context before the entry point: a section name, a category, a date.

1HeadlineThe only text, and it's the message. Google Sans Flex 500, slant −2, at 10% of the content box.
2SymbolSign-off in the opposite corner, at margin height.

Post: a city street photo with the line Supercube is the creative partner for founders who move fast — 1SubheadlineTen words is past the headline's limit of 8, and the photo is the message, so the line is set as a subheadline.
2SymbolCorner sign-off, same as every post.

04.8

What to avoid

Don't

Give great ideas character.

Use other fontsNo other families, and no system fallbacks in finished pieces.

Don't

Keep building. We've got the details.

Slant anything but headlinesThe −2 slant belongs to headlines only.

Don't

Supercube started as a character. As a kid, Joseph drew a cube with superpowers: it could control every other cube around it.

Headline weight on paragraphsWeight 500 is for short display lines.

Don't

Give great ideas character.

Swap the rolesNo headlines in Lora, no body copy in Google Sans Flex.

Don't

Supercube started as a character. As a kid, Joseph drew a cube with superpowers: it could control every other cube around it.

Long text in Cascadia MonoIt's for short labels and data, never sentences.

Don't

Give great ideas character.

Fake italics or boldUse the real axes and weights, never software effects.

Google Sans Flex's other axes (width, optical size, roundness, grade) stay at their defaults.