utopia-ai
/
Finance-Accounts
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Finance-Accounts/.claude/skills/brand/references/typography-specifications.md

4.9 KiB
Raw Blame History

Typography Specifications

Guidelines for defining and implementing brand typography.

Font Stack Structure

Primary Fonts

/* Headings - Display font for impact */
--font-heading: 'Inter', system-ui, -apple-system, sans-serif;

/* Body - Readable for long-form content */
--font-body: 'Inter', system-ui, -apple-system, sans-serif;

/* Monospace - Code, technical content */
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;

Font Loading

<!-- Google Fonts (recommended) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Type Scale

Base System

  • Base size: 16px (1rem)
  • Scale ratio: 1.25 (Major Third)

Scale Definition

Element Size (rem) Size (px) Weight Line Height
Display 3.815rem 61px 700 1.1
H1 3.052rem 49px 700 1.2
H2 2.441rem 39px 600 1.25
H3 1.953rem 31px 600 1.3
H4 1.563rem 25px 600 1.35
H5 1.25rem 20px 600 1.4
Body Large 1.125rem 18px 400 1.6
Body 1rem 16px 400 1.5
Small 0.875rem 14px 400 1.5
Caption 0.75rem 12px 400 1.4

Responsive Adjustments

/* Mobile (< 768px) */
h1 { font-size: 2rem; }    /* 32px */
h2 { font-size: 1.5rem; }  /* 24px */
h3 { font-size: 1.25rem; } /* 20px */
body { font-size: 1rem; }  /* 16px */

/* Desktop (>= 768px) */
h1 { font-size: 3rem; }    /* 48px */
h2 { font-size: 2.25rem; } /* 36px */
h3 { font-size: 1.75rem; } /* 28px */
body { font-size: 1rem; }  /* 16px */

Font Weights

Weight Scale

Name Value Usage
Regular 400 Body text, paragraphs
Medium 500 Buttons, nav items
Semibold 600 Subheadings, emphasis
Bold 700 Headings, CTAs

Weight Pairing

  • Headings: 600-700
  • Body: 400
  • Links: 500
  • Buttons: 600

Line Height Guidelines

Rules

Content Type Line Height Notes
Headings 1.1-1.3 Tighter for visual impact
Body text 1.5-1.6 Optimal readability
Small text 1.4-1.5 Slightly tighter
Long-form 1.6-1.75 Extra comfortable

Letter Spacing

Guidelines

Element Tracking Value
Display Tighter -0.02em
Headings Normal 0
Body Normal 0
All caps Wider 0.05em
Small caps Wider 0.1em

Paragraph Spacing

Margins

/* Heading spacing */
h1, h2 { margin-top: 2rem; margin-bottom: 1rem; }
h3, h4 { margin-top: 1.5rem; margin-bottom: 0.75rem; }

/* Paragraph spacing */
p { margin-bottom: 1rem; }
p + p { margin-top: 0; }

Maximum Line Length

  • Body text: 65-75 characters (optimal)
  • Headings: Can be wider
  • Code blocks: 80-100 characters
.prose {
  max-width: 65ch;
}

CSS Implementation

Full Variables

:root {
  /* Font Families */
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
}

Tailwind Config

theme: {
  fontFamily: {
    heading: ['Inter', 'system-ui', 'sans-serif'],
    body: ['Inter', 'system-ui', 'sans-serif'],
    mono: ['JetBrains Mono', 'monospace'],
  },
  fontSize: {
    xs: ['0.75rem', { lineHeight: '1rem' }],
    sm: ['0.875rem', { lineHeight: '1.25rem' }],
    base: ['1rem', { lineHeight: '1.5rem' }],
    lg: ['1.125rem', { lineHeight: '1.75rem' }],
    xl: ['1.25rem', { lineHeight: '1.75rem' }],
    '2xl': ['1.5rem', { lineHeight: '2rem' }],
    '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
    '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
    '5xl': ['3rem', { lineHeight: '1.1' }],
  }
}

Common Font Pairings

Clean & Modern

  • Heading: Inter
  • Body: Inter

Professional

  • Heading: Playfair Display
  • Body: Source Sans Pro

Startup/Tech

  • Heading: Poppins
  • Body: Open Sans

Editorial

  • Heading: Merriweather
  • Body: Lato

Accessibility

Minimum Sizes

  • Body text: 16px minimum
  • Small text: 14px minimum, not for long content
  • Caption: 12px minimum, use sparingly

Contrast Requirements

  • Text on background: 4.5:1 minimum (AA)
  • Large text (18px+): 3:1 minimum

Best Practices

  • Don't use all caps for long text
  • Avoid justified text (use left-align)
  • Ensure adequate line spacing
  • Don't use thin weights (<400) at small sizes