Pár fontů a typografická hierarchie

# Typografický systém: Design & Architecture Magazine

## 1. Font Pairing

**Heading Font: Freight Display Pro** (Serif)
- **Why:** High-contrast serif s moderními proporčními stylistickými detaily
- **Personality:** Sophisticated without being stuffy, editorial quality
- **Usage:** H1-H3, pull quotes, section headers
- **Best at:** Large sizes (36px+) where details shine

**Body Font: Inter** (Sans-serif)
- **Why:** Excellent readability at small sizes, designed for screens
- **Personality:** Neutral, clean, doesn't compete with content
- **Usage:** Body copy, UI elements, captions
- **OpenType Features:** Tabular figures for data, contextual alternates

**Monospace: JetBrains Mono** (for code samples)
- **Usage:** Technical tutorials, CSS snippets
- **Why:** Clear distinction between characters (0 vs O)

**Fallback Stack:**
```css
/* Headings */
font-family: "Freight Display Pro", "Georgia", "Times New Roman", serif;

/* Body */
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

/* Code */
font-family: "JetBrains Mono", "Courier New", monospace;
```

## 2. Type Scale (Desktop Base: 16px)

**Modular Scale:** 1.25 (Major Third)

```
H1: 3.052rem (48.83px) [Freight Display Bold]
H2: 2.441rem (39.06px) [Freight Display Semibold]
H3: 1.953rem (31.25px) [Freight Display Medium]
H4: 1.563rem (25px) [Inter Bold]
H5: 1.25rem (20px) [Inter Semibold]
H6: 1rem (16px) [Inter Bold]

Body: 1rem (16px) [Inter Regular, line-height: 1.6]
Large: 1.25rem (20px) [Intro paragraphs, Inter Light]
Small: 0.875rem (14px) [Captions, Inter Regular]
Tiny: 0.75rem (12px) [Meta info, Inter Medium]
```

**Line Height:**
- Headings: 1.2 (tight, for impact)
- Body: 1.6 (comfortable reading)
- Small text: 1.5 (tighter for compact info)

## 3. Weight Hierarchy

**Freight Display (Headings):**
- **Light (300):** Never use (too delicate for web)
- **Book (400):** H3 when space is limited
- **Medium (500):** H3 standard
- **Semibold (600):** H2
- **Bold (700):** H1, important callouts

**Inter (Body):**
- **Light (300):** Intro paragraphs, large body text
- **Regular (400):** Standard body copy
- **Medium (500):** UI labels, meta info
- **Semibold (600):** H5, subtle emphasis
- **Bold (700):** H4, strong emphasis

**Avoid:**
❌ Faux bold (browser-generated bold on non-bold font)
❌ Mixing too many weights (3 max per font family)
❌ Light weights on small text (< 16px)

## 4. Character Limits

**Body Copy:**
- Optimal: 60-75 characters per line
- Max-width: 42rem (672px at 16px base)
- Mobile: 40-60 characters (narrower screens naturally constrain)

**Headings:**
- H1: 20-30 chars max (2-4 words ideal)
- H2-H3: 40-50 chars
- Wrap naturally, never force single line if it breaks semantically

**Columns:**
- Single column < 768px
- Two columns ≥ 1200px (35-40 chars each)
- Add column-gap: 3rem between columns

## 5. Readability Guidelines

**Minimum Sizes:**
- Body text: 16px (never smaller for primary content)
- UI labels: 14px minimum
- Legal/fine print: 12px absolute minimum (use sparingly)

**Contrast:**
- Headings on white: #1A1A1A (WCAG AAA: 16.9:1)
- Body on white: #333333 (WCAG AAA: 12.6:1)
- Subtle text: #666666 (WCAG AA: 5.7:1)
- Never pure black #000000 (harsh, causes eye strain)

**ALL CAPS Usage:**
- Add letter-spacing: 0.05em (improves readability)
- Use sparingly (labels, short headings only)
- Never for body text (slower reading speed)

**Italic:**
- Use true italic fonts (not oblique)
- Max 2-3 sentences continuously (harder to read long passages)
- Book titles, emphasis, quotes

## 6. Responsive Behavior

**Fluid Typography (CSS clamp):**

```css
/* H1: 36px mobile → 48px desktop */
h1 {
font-size: clamp(2.25rem, 1.5rem + 2vw, 3.052rem);
}

/* Body: 16px mobile → 18px desktop (larger screens = more readable) */
body {
font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
}
```

**Breakpoint Adjustments:**

```css
/* Mobile (< 768px) */
- Reduce type scale (1.2 ratio instead of 1.25)
- Tighter line-height (1.5 for body)
- Smaller max-width (90vw)

/* Tablet (768px - 1024px) */
- Standard scale
- Introduce columns for long articles

/* Desktop (> 1024px) */
- Full scale
- Wider measure (max-width: 42rem)
- Two-column layouts for listicles
```

## 7. Special Cases

**Pull Quotes:**
```css
blockquote.pull-quote {
font-family: "Freight Display Pro", serif;
font-size: 1.953rem;
font-weight: 500;
font-style: italic;
line-height: 1.4;
color: #2C5F2D; /* Brand accent */
border-left: 4px solid #2C5F2D;
padding-left: 2rem;
margin: 3rem 0;
}
```

**Code Blocks:**
```css
code, pre {
font-family: "JetBrains Mono", monospace;
font-size: 0.875rem;
background: #F5F5F5;
padding: 0.2em 0.4em;
border-radius: 3px;
}

pre {
padding: 1.5rem;
overflow-x: auto;
line-height: 1.5;
}
```

**Emphasized Text:**
- **Bold:** Strong importance, key takeaways
- *Italic:* Subtle emphasis, terms being defined
- <mark> Highlight: Critical info (yellow bg, dark text)

**Lists:**
- Bullets: Use • (centered bullet, not hyphen)
- Line-height: 1.8 (more breathing room)
- Nested lists: Indent 2rem, switch to ◦ or – markers

## 8. Technical Implementation

**Font Loading:**

```css
@font-face {
font-family: "Freight Display Pro";
src: url('/fonts/FreightDispPro-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap; /* Show fallback immediately, swap when loaded */
}

@font-face {
font-family: "Inter";
src: url('/fonts/Inter-Variable.woff2') format('woff2');
font-weight: 100 900; /* Variable font, all weights */
font-style: normal;
font-display: swap;
}
```

**Variable Font Benefits (Inter):**
- Single file for all weights (300-700)
- Smooth weight transitions (can use 450, 550, etc.)
- Smaller total file size than multiple static fonts

**Performance Optimization:**

1. **Subset Fonts:**
- Latin only (removes Cyrillic, Greek if not needed)
- Reduces file size by 70%+

2. **Preload Critical Fonts:**
```html
<link rel="preload" href="/fonts/Inter-Variable.woff2" as="font" type="font/woff2" crossorigin>
```

3. **Font-display Strategy:**
- `swap`: Show fallback text immediately (prevent FOIT = Flash of Invisible Text)
- Better UX than waiting for fonts

**FOUT Handling (Flash of Unstyled Text):**

```css
/* Minimize layout shift */
body {
/* Fallback font similar metrics to Inter */
font-family: -apple-system, sans-serif;
}

.fonts-loaded body {
font-family: "Inter", -apple-system, sans-serif;
}
```

Use FontFaceObserver.js to add `.fonts-loaded` class when ready.

## Testing Checklist

✓ Test on actual devices (not just DevTools)
✓ Verify WCAG contrast ratios (use Stark plugin)
✓ Check readability at arm's length (typical reading distance)
✓ Test with dyslexia-friendly settings (some users increase line-height/spacing)
✓ Ensure graceful degradation if custom fonts fail to load