# Typography Guidelines

## Font Families

### Libre Bodoni Std 1 Bold — Headlines & Display

The licensed font is **Libre Bodoni Std 1 Bold** (also referred to as Bauer Bodoni in older brand materials). In web/HTML contexts, the Google Fonts fallback is **Bodoni Moda Bold**.

**Usage**: Headlines, display text, short statements, key statistics at large sizes

**Key characteristics**:
- High-contrast serif referencing Ringier's printing tradition
- Works best at 55pt+; loses legibility at small sizes
- **Always use -40 tracking** (CSS: `letter-spacing: -0.04em`) — default tracking is too loose and breaks the brand appearance; this is non-negotiable for brand consistency. A common mistake is using `-0.02em` — this is wrong.
- **Never use italic** (`font-style: italic`) on headline text — this is off-brand. If a word needs visual distinction within a headline, use colour (e.g. magenta `#e6007e`) rather than italic weight.

**Use for**: Presentation headlines, report titles, poster headlines, social media statements, key numbers/statistics

**Never use for**: Body text, long paragraphs, text below 18pt

### Ringier Font Family — Body & Supporting Text

**Usage**: Body text, lead text, captions, subheadings, supporting copy

**Weights**:
- **Light**: Subtle text, captions, metadata
- **Book**: Primary body text (most common)
- **Bold**: Subheadings, emphasis, call-outs
- **Book Italic**: Exceptional use only — emphasis in body text, quotes
- **Black**: Exceptional use only — very high impact needs
- **Bold Italic**: Available but use sparingly

**Characteristics**: Sans-serif, high readability at all sizes, professional and clean, optimized for screen and print.

---

## Fallback Fonts (3-Tier System)

Use fallbacks only when primary fonts are unavailable (external platforms, web environments without font licensing). Always flag to the user:
*"Note: Using [fallback] — Ringier/Libre Bodoni fonts are not available in this environment. Visual weight and metrics will differ slightly from brand standard."*

| Role | Tier 1 (Primary) | Tier 2 (Google Font) | Tier 3 (System-Safe) |
|------|-------------------|----------------------|----------------------|
| Display/Headlines | Libre Bodoni Std 1 Bold | Bodoni Moda Bold | Georgia Bold |
| Body Light | Ringier Light | Lato Light | Helvetica Neue Light |
| Body Regular | Ringier Book | Lato Regular | Helvetica Neue |
| Body Italic* | Ringier Book Italic | Lato Italic | Helvetica Neue Italic |
| Body Bold | Ringier Bold | Lato Bold | Helvetica Neue Bold |
| Body Bold Italic | Ringier Bold Italic | Lato Bold Italic | Helvetica Neue Bold Italic |
| Body Black* | Ringier Black | Lato Black | Helvetica Neue Black |

*Exceptional use only.*

**All headline fallbacks**: Use at **-40 tracking** (CSS: `letter-spacing: -0.04em`) — same rule as Libre Bodoni Std 1 Bold.

**Tier notes**:
- Bodoni Moda Bold is a close approximation but not identical — adjust sizing down ~5% if needed; requires optical sizing override (see below)
- Georgia Bold is wider and less refined — adjust sizing down 5–10% if needed
- Helvetica Neue is macOS/iOS native; use Arial on Windows if unavailable
- Never mix Ringier fonts and Lato in the same document — pick one family and stay consistent

### Web/HTML Font Stack for Headlines

For web and HTML implementations, use `@font-face` to try the locally installed licensed font first, falling back to Bodoni Moda from Google Fonts, then Georgia.

```css
@font-face {
  font-family: 'Ringier Headline';
  font-weight: 700;
  font-style: normal;
  src: local('Libre Bodoni Std 1 Bold'),
       local('LibreBodoniStd1-Bold'),
       local('Libre Bodoni Std 1'),
       local('LibreBodoniStd1'),
       local('Libre Bodoni Bold'),
       local('LibreBodoni-Bold'),
       local('Libre Bodoni'),
       url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@700') format('woff2');
}
```

Then use `font-family: 'Ringier Headline', 'Bodoni Moda', Georgia, serif;` on all headline elements.

**Critical**: Every element using this font family must also set `letter-spacing: -0.04em` and `font-style: normal` (never italic). When Bodoni Moda resolves as the active font (i.e., the primary Libre Bodoni is not installed), headline elements must additionally set `font-optical-sizing: none; font-variation-settings: 'opsz' 26` — see *Bodoni Moda Optical Sizing Override* below.

The multiple `local()` variants maximise the chance of resolving the installed font across different OS font managers, which register fonts under different PostScript and family names.

### Bodoni Moda Optical Sizing Override

Bodoni Moda is a variable font with an optical size axis (`opsz`). By default, browsers apply automatic optical sizing (`font-optical-sizing: auto`), which adjusts letterforms based on the rendered font size. At large display/headline sizes, this automatic adjustment makes the characteristic hairline/thin strokes thinner — to the point where they can disappear or become fragile on screen, especially on projectors or lower-resolution displays.

**Every Bodoni Moda headline/display element must include these two properties:**

```css
font-optical-sizing: none;
font-variation-settings: 'opsz' 26;
```

- `font-optical-sizing: none` disables the browser's automatic optical size adjustment, which would otherwise thin out hairline strokes at large rendered sizes.
- `font-variation-settings: 'opsz' 26` locks the optical size axis to 26 — a value specifically chosen and tested to keep thin strokes visible at display sizes without over-thickening them.

**This is non-negotiable for the same reason as the -40 tracking rule**: without it, Bodoni Moda headlines look visually wrong at the sizes the brand uses them. The value 26 was tested across projection and screen environments and confirmed as the right balance.

**When to apply**: Any element using Bodoni Moda at headline/display sizes (typically 24pt+). This includes presentation headlines, report titles, poster text, social media statements, and key statistics. Does not apply to Libre Bodoni Std 1 Bold (the licensed primary font) or to Georgia (Tier 3 fallback), only to Bodoni Moda (Tier 2 Google Fonts fallback).

---

## Font Color Rules

- **Light backgrounds** (white, yellow, light gray, light tints): Black `#000000` — not marine `#162d46`. Marine passes WCAG contrast ratios but is visually softer than black for serif headlines, especially in projection environments. The brand spec is black on light, white on dark.
- **Dark backgrounds** (magenta, cyan, marine, photos): White `#ffffff`
- **Yellow is light** — always use black text on yellow despite it being a primary color

**Colored periods (signature style)**: End key statements with a contrasting primary color period, set in the same font and size as the preceding text:
- On white: any primary color (magenta, cyan, or yellow)
- On magenta: yellow or cyan
- On cyan: yellow or magenta
- On yellow: magenta (preferred)
- On photos: choose the color that stands out against the image

---

## Type Hierarchy & Sizing

### Font Matrix

| Element | Font | Size | Line Spacing | Tracking |
|---------|------|------|--------------|----------|
| Display Headline | Bauer Bodoni Bold | 55–115pt | match size | **-40** |
| Document Title | Bauer Bodoni Bold | 24–36pt | 30–42pt | **-40** |
| Presentation Headline | Bauer Bodoni Bold | 50–80pt | 1.0× | **-40** |
| Subtitle / Titeltext | Ringier Book | 25pt | 30pt | 0 |
| Body Text (standard) | Ringier Book | 15pt | 20pt | 0 |
| Body Text (A4 primary) | Ringier Book | 22pt | 28pt | 0 |
| Subheading | Ringier Bold | 18pt | 23pt | 0 |
| Caption / Kurztexte | Ringier Book | 11pt | 14pt | 0 |
| Presentation Body | Lato Light / Ringier Book | 22–18pt | 1.3× | 0 |

### A4 Portrait Full Hierarchy

| Style | Font | Size | Line Spacing |
|-------|------|------|--------------|
| Headline | Bauer Bodoni Bold | 55–115pt | 55–115pt |
| Titeltext (subtitle/date) | Ringier Book | 25pt | 30pt |
| Lauftext 1 (primary body) | Ringier Book | 22pt | 28pt |
| Lauftext 2 (secondary body) | Ringier Book | 18pt | 23pt |
| Lauftext 3 (tertiary body) | Ringier Book | 14pt | 18pt |
| Kurztexte (captions) | Ringier Book / Bold | 11pt | 14pt |

### PowerPoint (1920×1080px)

| Element | Font | Size | Notes |
|---------|------|------|-------|
| Slide headline | Libre Bodoni Std 1 Bold | 50–80pt | -40 tracking (`-0.04em`); primary color or white on colored bg |
| Slide subtitle | Ringier Book / Lato Light | 25pt | Match headline or secondary color |
| Body / bullets | Ringier Book / Lato Light | 22–18pt | Scale by content volume; 1.3× line spacing |
| Level 1 bullets | Lato Light / Lato Black | 22pt | |
| Level 2 bullets | Lato Light / Lato Black | 18pt | |
| Level 3 bullets | Lato Light / Lato Black | 14pt | |
| Level 4+: avoid | — | — | Simplify content instead |
| Captions / source notes | Ringier Book / Lato Light | 11–14pt | Gray `#8a96a2` |

---

## Stacked Word Typography

Stack words vertically with varying sizes to create visual impact — a signature Ringier style.

**Principles**:
1. Highlight the key word by making it the largest on the stack
2. Tight line spacing — match line spacing to font size (55–115pt leading for 55–115pt text)
3. All lines at **-40 tracking** (CSS: `letter-spacing: -0.04em`)
4. Left-aligned or centered based on layout; never right-aligned
5. Logical reading order top to bottom
6. End the final word with a colored period in a contrasting primary color
7. Avoid more than 4–5 stacked words — becomes cluttered

```
This is the    (55pt)
new            (55pt)
Ringier.       (115pt, colored period)
```

**Apply to**: Presentation title slides, poster headlines, report covers, social media graphics

---

## Special Typography Applications

### Numbers & Statistics

| Element | Font | Size | Tracking | Color |
|---------|------|------|----------|-------|
| Key number / statistic | Bauer Bodoni Bold | 80–120pt | **-40** | Primary color |
| Unit text (CHF, %, million) | Ringier Book | 30–40pt | 0 | Black or gray |

### Quotes & Testimonials

- **Quote text**: Ringier Book Italic (one of the approved exceptional cases), 18–24pt, 1.5× line spacing, primary color or black
- **Attribution**: Ringier Bold, 14pt, black or gray, formatted as: Name — Title, Company
- Optional large quotation mark as a graphic element in a primary color

### Lists & Bullets

- **Bullet style**: Simple disc (•) or colored disc — color matches text or uses accent color; proportional size (not oversized)
- **Numbered lists**: Ringier Book, period after number (1. 2. 3.)
- **Nested lists**: Indent 1cm per level; maximum 3 levels

---

## Accessibility

**Minimum sizes**:
- Body text: 16px / 12pt minimum
- Captions: 14px / 11pt minimum
- Presentations: 18pt minimum (must be readable from the back of the room)

**Line spacing**: Minimum 1.3× font size for body text; 1.5× for WCAG AA compliance

**Line length**: Ideal 50–75 characters per line; maximum 90 characters; use columns for wide formats

**WCAG AA contrast** (body text 4.5:1, large text 18pt+ 3.0:1):
- ✅ Black on white, white on black
- ✅ Black on yellow `#ffde14`
- ✅ White on magenta `#e6007e`
- ✅ White on cyan `#009fe3` — large text only
- ✅ White on marine `#162d46`

**Readability best practices**: Avoid justified text (use ragged right); use sans-serif (Ringier family) for body; avoid italic for long passages; use bold for emphasis over italic.

---

## Do's and Don'ts

### ✅ Do

- **Always use -40 tracking for Bodoni headlines** (CSS: `letter-spacing: -0.04em`) — critical, non-negotiable for brand. `-0.02em` is wrong.
- **Override optical sizing on Bodoni Moda headlines** (`font-optical-sizing: none; font-variation-settings: 'opsz' 26`) — prevents hairline strokes from disappearing at display sizes.
- Use Ringier Book for body text (optimal readability)
- Stack words for impact in headlines with tight leading
- Add colored periods to key statements
- Ensure sufficient contrast: black on light backgrounds, white on dark
- Flag fallback font usage to the user whenever primary fonts are unavailable
- Test readability at the intended viewing size or distance
- Maintain a consistent hierarchy throughout a document

### ❌ Don't

- Use default Bodoni tracking — it appears too loose for the brand. Must be -40 tracking / `letter-spacing: -0.04em`
- Use Bodoni Moda at headline sizes without the optical sizing override — automatic optical sizing thins hairline strokes to the point of disappearing. Must set `font-optical-sizing: none; font-variation-settings: 'opsz' 26`
- Use Bodoni for body text — poor readability at small sizes
- Use italic (`font-style: italic`) on headline text — Bodoni headlines are Bold only, never italic. Use colour for emphasis within headlines instead
- Use marine `#162d46` as a heading colour on white/light backgrounds — use black `#000000`. Marine passes contrast but is visually softer for serif headings, especially in projection environments
- Use more than 2–3 font sizes on a single page — creates visual chaos
- Use Ringier Black or Ringier Book Italic casually — both are restricted to exceptional cases only
- Set white text on yellow — poor contrast
- Mix Ringier and Lato fonts in the same document — choose one family
- Stretch, condense, or distort letterforms in any way
- Set body text in all caps — severely reduces readability
- Use excessive font weights on a single page — Light, Book, and Bold are sufficient for most layouts
- Use decorative or off-brand fonts

---

*For font pairing with colors, see `color-usage.md`*
