Style guide / Typography
Type Hierarchy
Hierarchy is established through size, weight, and spacing—not through multiple fonts. One system. One voice.
Headlines lead. Supporting text explains. Metadata stays quiet.
Title H1
- Line-height: 1.1x
- Text indent: no adjustment
- Usage: Fullscreen header sections (ie. Portfolio pages)
Standard H1
- Line-height: 1x
- Text indent: no adjustment
- Usage: Minimal header sections (ie. Style guide, CV, etc.)
Standard Title H2
- Line-height: 1.1x
- Text indent: no adjustment
- Usage: Typically this is used in the "Title" components (except the extra large versions)
Other Title Heading H2
- Letter-spacing: standard
- Line-height: 1x
- Text indent: no adjustment
- Usage: This is used in the Works title component, and in the title component used on the Portfolio pages.
Standard h3
- Letter-spacing: .01em
- Line-height: 1.3x
- Text indent: .01em
- Usage: This isn't used very much in a traditional sense. Ideally this is used in hierarchical components like list headings or card titles.
Font Families & Pairings
Use the approved primary font only. Pairing is achieved through weight and scale, not font changes.
Multiple fonts introduce noise and reduce cohesion.
Titles
Font Family: Playfair Display
Letters: AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Numbers: 1234567890
Weighs: Bold, Demi-bold
Line-heights: 1x–1.3x
Body
Font Family: Titillium Web
Letters: AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Numbers: 1234567890
Weighs: Bold, Demi-bold
Line-heights: 1.4x–1.5x
Usage by Context
Headings establish structure. Paragraphs communicate substance. Captions support, never compete.
Every text style has a job. Do not reuse styles casually.
Responsive Scaling
Every text style has a job. Do not reuse styles casually.
Typography must scale fluidly across breakpoints. No abrupt jumps. No edge cases ignored.
| Base Font Size | Breakpoint | Example |
|---|---|---|
| 16px | ≥ 1920px | This is an example of the base text sizing |
| 14px | < 1920px ≥ 1440px | This is an example of the base text sizing |
| 1vw | < 1440px ≥ 992px | This is an example of the base text sizing |
| 12px | < 992px ≥ 768px | This is an example of the base text sizing |
| 11px | < 768px | This is an example of the base text sizing |
Readability Standards
If text breaks on a device, the system is broken.
Legibility beats aesthetics every time. Line length, spacing, and contrast must support effortless reading.
If it requires effort, it fails.