Typography

Typography establishes visual hierarchy and brand personality. Each brand uses distinct typefaces while maintaining consistent sizing and spacing.

Switch brands to see different typography styles:

Font Families

Brand uses a dual-font system: one for headings and another for body text. Currently viewing House of Brands typography.

Heading Font

Larken

'Larken', 'Playfair Display', Georgia, serif

Body Font

Open Sans

'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif

Type Scale

A consistent type scale ensures visual hierarchy across all pages and components.

H160pxThe quick brown fox jumps

H250pxThe quick brown fox jumps over

H342pxThe quick brown fox jumps over the lazy dog

H436pxThe quick brown fox jumps over the lazy dog

H530pxThe quick brown fox jumps over the lazy dog

H624pxThe quick brown fox jumps over the lazy dog

Body20pxThe quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Small16pxThe quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Caption14pxThe quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Font Weights

Available font weights for creating emphasis and hierarchy within text content.

regular400The quick brown fox jumps over the lazy dog

medium500The quick brown fox jumps over the lazy dog

semibold600The quick brown fox jumps over the lazy dog

bold700The quick brown fox jumps over the lazy dog

Line Heights

Line height tokens for different text contexts. Use tighter line heights for headings and more relaxed values for body text.

Token	Value	Use Case
`tight`	1.2	Headings, display text
`normal`	1.5	Body text, paragraphs
`relaxed`	1.75	Long-form content, improved readability

Usage

CSS Variables

1/* Using CSS Variables */
2h1, h2, h3 {
3  font-family: var(--font-heading);
4}
5
6body {
7  font-family: var(--font-body);
8  font-size: var(--font-size-body);
9}
10
11.heading-1 {
12  font-size: var(--font-size-h1);
13}

Brand-Specific Notes

House of Brands Typography Guidelines

Use Larken for headlines and subheads
Primarily use straight (regular) fonts; italics for special emphasis
Open Sans allows all weights for body copy based on context
Always ensure purposeful size difference between heading levels

Design Token Reference

Token	Value
`--font-heading`	'Larken', 'Playfair Display', Georgia, serif
`--font-body`	'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif
`--font-size-h1`	60px
`--font-size-h2`	50px
`--font-size-h3`	42px
`--font-size-body`	20px
`--font-size-small`	16px
`--font-size-caption`	14px