Typography

The Frive type system uses two font families. Frive Jokker is the primary typeface used across body, sub-headline, overline, CTA, menu, callout, footnote, tag and stat text, in Regular, Medium, SemiBold, Bold, and Heavy weights. Perfectly Nineties is the serif display face and owns the hero/headline tiers, set upright at weight 400 — emphasis within a headline comes from italic and hierarchy, never weight (ADR 0013). Headline 2 is kept in Frive Jokker, including its bold and heavy weights.

Font Families

Frive Jokker - The quick brown fox jumps over the lazy dog

Primary typeface. Weights: Regular (400), Medium (500), SemiBold (600), Bold (700), Heavy (800).

Perfectly Nineties - The quick brown fox jumps over the lazy dog

Display serif. Owns the hero/headline tiers, upright weight 400 only; italic is the emphasis accent.


Type styles

The current type tiers, by role: hero and headlines, sub-headlines, body and links, CTAs and buttons, menu, callout, footnote, then the labels (overline, stat, attribution).

Hero

Hero 1 Highlight Italic
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Hero 2
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Hero 2 Highlight Italic
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…

Headline 1

Headline 1 Highlight Italic
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…

Headline 2

Headline 2 Bold
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Headline 2 Heavy
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Headline 2 Highlight Italic
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…

Headline 3

Headline 3 Highlight Italic
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…

Sub-headline 1

Sub-headline 1 Bold
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Sub-headline 1 Heavy
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…

Sub-headline 2


Body

Body Highlight
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Body Highlight Italic
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Body Medium
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Body Bold
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Body Heavy
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Body Heavy Highlight
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Body Heavy Highlight Italic
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…

Link


CTA

CTA Uppercase
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
CTA Small
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…

Button


Menu

Menu Small
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…

Callout

Callout Highlight
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Callout Highlight Italic
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Callout Medium
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Callout Bold
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Callout Heavy
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Callout Heavy Highlight
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Callout Heavy Highlight Italic
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…

Footnote

Footnote Medium
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Footnote Bold
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…

Overline

Overline 2
Class:
Font:…
Weight:…
Tracking:…
Transform:…
Decoration:…
Desktop Size:…
Desktop Line-height:…
Mobile Size:…
Mobile Line-height:…

Stat


Attribution