Typography

Typography is a tool for clarity, not decoration. It delivers the substance without pressure. We use Geist exclusively across all touchpoints. It is a highly legible, technical sans-serif that perfectly balances mechanical precision with total accessibility.

Digital Typography

Typography System Hub – Rico Brunner

Typeface: Geist

The Rico Brunner brand utilizes Geist to amplify clarity. It embodies directness and structure, ensuring content is easily readable without playful or esoteric touches.

Level	Desktop (≥1024)	Tablet (768)	Mobile (≤767)	Weight	Line Height
H1	64px	48px	36px	700	1.1
H2	42px	32px	26px	600	1.1
H3	24px	20px	18px	500	1.1
Body L	22px	20px	18px	400	1.65
Body M	18px	16px	16px	400	1.6
Body S	15px	14px	14px	400	1.65

Letter Spacing Tracking: Universal tracking of 0.014em (Equivalent to Canva tracking 14) across all scales.

H1

Main Headline | 64px

Substance, not pressure.

H2

Section Title | 42px

The energetic causes

H3

Sub Section Title | 24px

Energy field restoration

Body L

Lead Paragraph | 22px

Rico Brunner has worked exactly there since 1998.
Not on the symptoms, but on the energetic causes.

Body M

Standard Body | 18px

Some problems sit deeper than the body and work differently than the mind. Constant exhaustion, despite sleep. Fears with no obvious cause. The feeling of no longer being yourself.

Body S

Small Text | 14px

Web strategy

Instead of abrupt «jumps» between breakpoints, the web typography should scale smoothly (fluidly) using CSS clamp(). This ensures perfect proportions on any screen size.

Example CSS Implementation (H1)

h1 {
  /* Scales fluidly from 36px at 320px viewport, 
     up to 64px at 1024px viewport */
  font-size: clamp(2.25rem, 1.4545rem + 3.977vw, 4rem); 
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.014em;
}

Web Fallback Stack

Designed to gracefully degrade across different operating systems if Geist fails to load.

Apple System: Helvetica
Windows: Arial
Android: Roboto
Linux: Ubuntu

body { 
  font: 1em "Geist", Helvetica, Arial, Roboto, Ubuntu; 
}

Email strategy

Fluid typography (clamp) is not supported in email clients. Email development MUST use fixed pixel values that switch at specific media query breakpoints.

Fixed Steps via Media Queries

/* Email Default (Desktop) */
h1 { 
  font-size: 64px !important; 
  line-height: 70px !important; 
}

/* Email Mobile (max-width: 480px) */
@media only screen and (max-width: 480px) {
  h1 { 
    font-size: 36px !important; 
    line-height: 40px !important; 
  }
}

Email Safe Fallback

Many email clients (especially Microsoft Outlook) block custom web fonts. Email clients will strip ‚Geist‘ and render the next available system font.

Arial, sans-serif

Note: Arial is chosen over Helvetica for email because it is universally pre-installed on all Windows desktop machines, guaranteeing the closest structural match to Geist in Outlook.

Vertical Rhythm

To maintain the architectural grid logic, the vertical spacing (margins) between text elements must follow a predictable rhythm, rather than arbitrary values.

Element	Margin Bottom	Purpose
H1, H2, H3	`16px` (1rem)	Keeps headings closely tied to the paragraph they introduce.
Body L, M, S	`24px` (1.5rem)	Provides clear visual separation between distinct thoughts/paragraphs.
Last child	`0px`	The last text block in a container should have no margin to prevent breaking the outer grid padding.

UI Color Application

Strict color mapping for typography to ensure contrast and architectural clarity.

Background Base

#FAFAFA (Off-White)

Primary Text

#141414 (Near Black)

Secondary / Meta Text

#6B7280 (Medium Gray)

Used for Body S when indicating dates, legal text, or minor captions.

Interactive / Links

#002FA7 (Brand Blue)

Web Hover: Underline expands or text color shifts to #141414.
Email Links: Must be explicitly colored #002FA7 inline.

Email Development Specialties

To ensure the typography renders cleanly across hostile email clients (like Outlook on Windows), developers must adhere to the following strict rules.

A. Line-Height Enforcements

Outlook often ignores standard CSS line-heights and crushes text together. You must force the line height using Microsoft-specific code (MSO) on the block level elements (like <td> or <p>).

<!-- Example of forcing line height in HTML Email -->
<td style="font-family: Arial, sans-serif; font-size: 18px; line-height: 29px; mso-line-height-rule: exactly; color: #141414;">

Note: Always convert line-height multipliers to exact pixel values for email. E.g., Body M 18px * 1.6 = 28.8px -> round to 29px.

B. Cap-Height Snapping

Because web fonts and system fonts have different internal baselines, text inside email tables often appears slightly «pushed down,» breaking the top alignment of the grid. To optically snap the cap-height of the text to the top of the grid module, a negative top margin workaround should be applied to heading classes where possible.

.grid-snap-top {
  margin-top: -0.22em; /* Pulls text up to offset line-height gap */
}

C. Prevention of Font-Resizing

Apple iOS Mail sometimes automatically enlarges small text. To prevent this and maintain the design integrity of Body S, apply this fix to the <body> of the email.

body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}