Typography System
Comprehensive Brand Guidelines for Portfolio Excellence
version 1.0 - December 2025
Typography Foundations
Our typography system balances editorial sophistication with digital clarity. Playfair Display brings warmth and personality to headlines, while Inter ensures readability and professionalism in body text.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog. This sentence demonstrates the clarity and readability of Inter at body text sizes. Notice the balanced letter spacing and comfortable line height.
When to Use Each Font
- Playfair Display: Hero titles, section headers, lens titles, card titles, timeline dates, pull quotes
- Inter: Body text, navigation, buttons, labels, metadata, captions, form fields
- Never mix in the same line: Keep font families separate within text blocks
Type Hierarchy
A clear hierarchy guides the reader's eye and establishes information priority. Our system uses size, weight, color, and spacing to create rhythm and scanability.
| Level | Element | Font Family | Size (Desktop) | Weight | Line Height |
|---|---|---|---|---|---|
| H1 | Hero Title | Playfair Display | clamp(3rem, 8vw, 7rem) | 600 | 1.1 |
| H2 | Section Title | Playfair Display | clamp(2rem, 5vw, 4rem) | 600 | 1.1 |
| H3 | Lens Title | Playfair Display | clamp(2rem, 4vw, 3rem) | 500 | 1.1 |
| H4 | Card Title | Playfair Display | 1.5rem | 600 | 1.3 |
| H5 | Timeline Title | Inter | 1.3rem | 600 | 1.4 |
| Body Large | Lens Body Text | Inter | 1.1rem | 400 | 1.8 |
| Body | Standard Paragraph | Inter | 1rem | 400 | 1.6 |
| Small | Metadata / Caption | Inter | 0.9rem | 400 | 1.5 |
✓ Do
- • Use clamp() for fluid typography
- • Maintain consistent line heights
- • Apply proper spacing between sections
- • Use Playfair for all major headings
- • Keep body text at comfortable sizes
✗ Don't
- • Use fixed pixel sizes for headings
- • Mix fonts within the same element
- • Use all caps for long passages
- • Set body text below 16px base
- • Ignore mobile readability
Type Scale & Spacing
Vertical rhythm and consistent spacing create visual harmony. Our system uses proportional spacing based on element hierarchy.
Spacing Guidelines
- Section Spacing: 120px between major sections (60px mobile)
- Element Spacing: 40-60px between related elements
- Paragraph Spacing: 1.5rem margin-bottom for body paragraphs
- Heading Margins: 2-3rem top margin, 1-1.5rem bottom margin
Typography Colors
Color hierarchy reinforces information hierarchy. Our palette ensures WCAG AA compliance while maintaining brand personality.
#2a2a2a
#666666
#FF6B6B
#1a1a2e
Color Application Rules
- Primary Text: Headlines, body text, navigation – highest contrast
- Secondary Text: Supporting text, descriptions, metadata – reduced emphasis
- Coral Accent: Interactive elements, highlights, CTAs – sparingly for impact
- Deep Navy: Card titles, important labels – strong hierarchy marker
Component Typography
Reusable components with consistent typography ensure brand cohesion across all portfolio pages.
Origins & Operations
Where syntax meets stories, and systems become human
Three Ways of Seeing
I didn't set out to be a strategist. I set out to make sense of things. Syntax, stories, systems: all languages waiting to be decoded. Born in Venezuela, I landed in the U.S. with a scholarship and a stubborn belief: building from scratch is a feature, not a flaw.
Responsive Typography
Our typography scales fluidly across devices using clamp() and strategic breakpoints. Mobile-first readability is paramount.
| Element | Desktop (1024px+) | Tablet (768-1023px) | Mobile (320-767px) |
|---|---|---|---|
| Hero Title | 7rem (112px) | 4rem (64px) | 3.2rem (51px) |
| Section Title | 4rem (64px) | 3rem (48px) | 2.6rem (42px) |
| Lens Title | 3rem (48px) | 2.4rem (38px) | 2rem (32px) |
| Body Text | 1.1rem (17.6px) | 1rem (16px) | 1rem (16px) |
Live Examples
See the typography system in action with real content examples.
Systematic Intelligence
I don't rely on intuition alone. Every campaign, every brand story, every launch is built on frameworks that turn complexity into clarity.
Origins
Born with a big heart and a hunger for perspective. A curious kid who learned early that building from scratch isn't a limitation—it's a superpower.
Before & After
See the dramatic transformation when the typography system is applied to inconsistent content.
My Portfolio Project
This is a sample portfolio project showcasing my work. The typography here is inconsistent, using different fonts without a clear system.
Project Overview
The line heights are inconsistent, creating uneven rhythm. Spacing feels arbitrary rather than intentional.
My Portfolio Project
This is the same content, now elevated with the brand typography system. Playfair Display brings sophistication to headlines, while Inter ensures clarity in body text.
Project Overview
Line heights create natural rhythm. Spacing is intentional and proportional. The type scale ensures clear hierarchy at every level.
Quick Start Guide
Get up and running with the typography system in minutes.
Complete CSS Reference
Copy this complete stylesheet to ensure consistent typography across all portfolio pages.