CSS
/* B2B Typography System Template */
:root {
  /* Fluid Typography (Major Third 1.25×) */
  --text-xs: clamp(0.64rem, 0.61rem + 0.15vw, 0.75rem);
  --text-sm: clamp(0.8rem, 0.76rem + 0.19vw, 0.94rem);
  --text-base: clamp(1rem, 0.95rem + 0.24vw, 1.17rem);
  --text-lg: clamp(1.25rem, 1.19rem + 0.31vw, 1.46rem);
  --text-xl: clamp(1.56rem, 1.48rem + 0.38vw, 1.83rem);
  --text-2xl: clamp(1.95rem, 1.85rem + 0.48vw, 2.28rem);
  
  /* Font Stacks */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Source Serif Pro", Georgia, serif;
}

body { 
  font-family: var(--font-sans);
  line-height: 1.5;
  letter-spacing: 0;
}

h1, h2, h3 { 
  font-family: var(--font-serif);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.label-caps {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

Progress:

• Define typographic personality
• Select font pairing (geometric sans + humanist serif)
• Establish type scale ratio
• Set line-height rules
• Configure letter-spacing
• Implement fluid responsive sizing
• Test across devices

1. Define Typographic Personality

Ask: Professional tone? (Conservative vs. Progressive vs. Innovative)

• Conservative: Classic serifs, tight spacing, formal hierarchy
• Progressive: Modern sans-serif primary, serif accents, balanced
• Innovative: Geometric sans, wide letter-spacing, bold contrasts

2. Font Pairing Strategy

B2B Credibility Formula: Geometric Sans + Humanist Serif

• Primary (Sans): Inter, Neue Haas Grotesk, Proxima Nova
• Secondary (Serif): Source Serif Pro, Crimson Pro, PT Serif
• Avoid: Script fonts, decorative fonts, trendy display fonts

3. Type Scale Selection

Major Third (1.25×): Subtle, professional

12px → 15px → 19px → 24px → 30px → 37px

Perfect Fourth (1.333×): Stronger hierarchy

12px → 16px → 21px → 28px → 37px → 50px

4. Line-Height Rules

• Body text: 1.4–1.6 (longer content = higher)
• Headings: 1.1–1.3 (larger headings = tighter)
• UI elements: 1.2–1.4

5. Letter-Spacing Guidelines

• Body text: 0 (never positive)
• Large headings: -0.01em to -0.02em
• All-caps labels: +0.02em to +0.05em
• Button text: +0.01em

6. Fluid Typography Implementation

CSS
font-size: clamp([min]rem, [min]rem + [scale]vw, [max]rem);

Use Utopia.fyi for calculations.

Example 1: Professional Services Firm Input: Law firm needs trustworthy, readable typography Output:

• Personality: Conservative
• Primary: Inter (geometric sans)
• Secondary: Source Serif Pro (headings)
• Scale: Major Third (1.25×)
• Body: 16px, 1.5 line-height, 0 letter-spacing

Example 2: Tech Startup Input: B2B SaaS needs modern but credible feel Output:

• Personality: Progressive
• Primary: Proxima Nova
• Secondary: Crimson Pro (accent serif)
• Scale: Perfect Fourth (1.333×)
• Headings: -0.01em letter-spacing, 1.2 line-height