DandyLine · Brand Detail · 03 of 09

Typography

Two typefaces. One for display, one for everything else. Syne handles brand moments — the wordmark, headlines, and taglines. Outfit handles the entire product interface. They never swap roles.

2 typefaces · clearly defined roles Syne: 5 weights · 400–800 Outfit: 5 weights · 200–600 Type size ramp · 8 levels 4 combination patterns

The Two Typefaces

Syne and Outfit were chosen as a pairing because they live in different tonal registers — Syne is architectural and distinctive, Outfit is approachable and readable. Together they create the tension between brand presence and product usability that DandyLine needs.

DandyLine

Display · Wordmark · Headlines · Taglines

Syne

The brand voice. Used for everything that announces DandyLine — the wordmark, section headings, display callouts, and the animated tagline. Never used for body copy or UI labels.

400 · Regular 500 · Medium 600 · SemiBold 700 · Bold 800 · ExtraBold

The internet forgot how to wait.

UI · Body · Labels · Captions · Chips

Outfit

The product voice. Every word inside the app — body copy, card text, labels, navigation, chips, timestamps, form fields, and all interface text — is set in Outfit. It's legible at very small sizes and reads warmly at body scale.

200 · ExtraLight 300 · Light 400 · Regular 500 · Medium 600 · SemiBold

Both faces are loaded via Google Fonts with display=swap to prevent invisible text during load. Always include both in every brand guide page and product layout — never subset to a single face.

Syne — Weight Scale

Five weights available, but only four are used in practice. 800 is reserved for hero moments and the animated tagline. 700 is the default heading weight. 600 handles section titles and card headings. 400 is the "Line" half of the wordmark — and nothing else.

ExtraBold

800

DandyLine

Hero display · App Store · Launch campaigns

Bold

700

Page Heading

Page titles · Wordmark "Dandy" · Primary callouts

SemiBold

600

Section Title

Section headings · Card titles · Detail page H2s

Medium

500

Sub-heading Text

Tertiary headings · Pull quotes · Accent labels

Regular

400 · limited

Line

Wordmark "Line" only — no other uses

Alphabet Sample · Syne 700

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 & . , : ! ? ( ) " " ' '

Outfit — Weight Scale

Five weights, all actively used. 200 is for atmospheric moments — large decorative numbers. 300 carries the tagline and hero subtext. 400 is the everyday workhorse for body copy. 500 handles UI labels, chips, and active states. 600 is for emphasis within body text only.

ExtraLight

200

The quiet moment.

Decorative large numbers · Atmospheric hero text

Light

300

The internet forgot how to wait.

Tagline line 1 · Hero subtext · Pull quotes

Regular

400

Body copy reads clearly at this weight. DandyLine stores moments you can actually find later — organized by Vault, not by date.

Body copy · Card text · Descriptions · All default UI

Medium

500

ACTIVE NAV LABEL · Chip text · Tagline line 2

Nav labels · Chips · Active states · Tagline line 2

SemiBold

600

Key term used inline to add emphasis without switching typefaces.

Bold inline emphasis · Button labels · Strong values

Alphabet Sample · Outfit 400

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 & . , : ! ? ( ) " " ' '

Type Size Ramp

Eight levels cover every context from hero display down to micro captions. Sizes are defined in px for predictability at specific viewport sizes — not rem or em — so they remain consistent across the brand guide and the app shell.

Display

Syne 800 · 48–64px · -.02em

DandyLine

Hero sections · App Store · Launch

Heading 1

Syne 700 · 26–32px · -.01em

Page Title

Page headers · Brand guide titles

Heading 2

Syne 600 · 17–20px · -.005em

Section Heading

Section titles · Feature headers

Heading 3

Outfit 600 · 14–16px · 0em

Card Title

Card headings · Modal titles

Body

Outfit 400 · 11–14px · line-height 1.7

The internet forgot how to wait. DandyLine remembers — and keeps it organized.

All paragraph text · Descriptions

Body Small

Outfit 400 · 10–11px · line-height 1.65

Supporting descriptions, card helper text, and usage notes at comfortable small scale.

Card notes · Help text · Rules

Label / Eyebrow

Outfit 500 · 8.5–10px · .14–.22em UC

Section Eyebrow Label

Eyebrows · Chip text · Section tags

Micro / Caption

Outfit 400–500 · 8–9px · .1em UC

128PX · FULL RENDER · TIMESTAMP · v1.0

Timestamps · Size labels · Version tags

Combination Patterns

Four approved patterns for pairing the two typefaces. Each has a specific context — the wordmark pairing, the hero lockup, the gradient display title, and the two-color section header. Don't mix patterns or invent new combos without reviewing the system.

DandyLine

The internet forgot how to wait.

The internet forgot
how to wait.

DandyLine is the memory layer the internet is missing — organized by vault, not by date.

Waiting is the feature.

Brand voice · Campaign headline

DandyLine · Memory Layer

Organized by vault, not by date.

Use this pattern for feature section headers where a key phrase needs to feel branded but the rest stays readable and approachable.

These four patterns are the only approved Syne + Outfit combination layouts. For any content that doesn't fit one of these four, default to Outfit only at the appropriate weight. Don't reach for Syne to add emphasis — use Outfit 600 or color instead.