ColivingLiguria

Apply Now

Typography Standards

3 min read

ColivingLiguria Typography Standards

This document defines the official typography used across all ColivingLiguria digital properties, including the Quartz website and web applications.

Font Families

Headers & Body Text

  • Font: Schibsted Grotesk
  • Weights: 400 (Regular), 600 (Semi-Bold), 700 (Bold)
  • Usage: ALL text - headers, body, paragraphs, lists, labels
  • Source: Google Fonts
  • Rationale: Calm, rounded sans-serif providing a serene, grounded aesthetic
font-family: 'Schibsted Grotesk', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

Code & Monospace

  • Font: JetBrains Mono
  • Usage: Code blocks, technical documentation, terminal output
  • Source: Google Fonts
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

Current Implementation (Quartz)

From quartz.config.ts:

typography: {
  header: "Schibsted Grotesk",
  body: "Schibsted Grotesk",
  code: "JetBrains Mono"
}

Note: We use the SAME font for both headers and body to maintain consistency and simplicity. The Schibsted Grotesk family provides enough weights (400, 600, 700) to create clear hierarchy without needing different fonts.

Google Fonts Import

The Quartz system automatically imports these fonts, but for custom applications:

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;600;700&family=JetBrains+Mono&display=swap');

Font Sizes

Headings

h1 { font-size: 1.75rem; font-weight: 700; }  /* 28px, Bold */
h2 { font-size: 1.4rem; font-weight: 600; }   /* 22.4px, Semi-Bold */
h3 { font-size: 1.12rem; font-weight: 600; }  /* 17.92px, Semi-Bold */
h4, h5, h6 { font-size: 1rem; font-weight: 600; }  /* 16px, Semi-Bold */

Body

body { 
  font-size: 16px; 
  font-weight: 400;
  line-height: 1.6; 
}

Small Text

.small-text { 
  font-size: 0.9rem; 
  font-weight: 400;
}  /* 14.4px */

Font Weights

  • Regular (400): Default for body text, paragraphs
  • Semi-Bold (600): Emphasis, labels, smaller headers (H2-H6), buttons
  • Bold (700): Strong emphasis, H1 headers, call-to-actions

Best Practice: Use weight changes to create hierarchy, not just size changes.

Line Heights

  • Body Text: 1.6 (optimal readability)
  • Headers: 1.2-1.4 (tighter for impact)
  • Compact Text (lists, navigation): 1.4

Design Philosophy

Why Schibsted Grotesk?

Our typography choice reflects our aesthetic values:

  • Calm & Serene: Rounded, approachable letterforms
  • Natural: Not overly geometric or rigid
  • Grounded: Readable without being clinical
  • Timeless: Classic sans-serif that ages well

This aligns with our Aesthetics principles of “Organic Minimalism” and “Textural Warmth.”

Best Practices

  1. Consistency: Always use Schibsted Grotesk for ALL text (except code)
  2. Fallbacks: Always include system font fallbacks for performance
  3. Web Performance: Fonts load with font-display: swap (handled by Quartz)
  4. Accessibility: Minimum 14px font size, prefer 16px
  5. Hierarchy: Use size + weight together:
    • H1: Large size (1.75rem) + Bold (700)
    • H2: Medium size (1.4rem) + Semi-Bold (600)
    • Body: Base size (1rem) + Regular (400)

Common Mistakes to Avoid

❌ Don’t use multiple fonts (stick to Schibsted Grotesk + JetBrains Mono only) ❌ Don’t use pure black (#000000) for text, use var(--dark) instead ❌ Don’t forget system font fallbacks ❌ Don’t use font weights outside 400/600/700 ❌ Don’t use font sizes below 14px

✅ Do use Schibsted Grotesk consistently ✅ Do include proper fallback fonts ✅ Do use CSS variables for colors (var(--dark), var(--darkgray)) ✅ Do combine size AND weight for hierarchy ✅ Do test readability on multiple devices

Verification Checklist

Before deploying:

  • Schibsted Grotesk loaded for all text (except code)
  • JetBrains Mono loaded for code blocks
  • Font weights 400, 600, 700 available
  • System fallbacks included
  • Consistent line heights applied (1.6 for body)
  • Accessible font sizes (minimum 14px, prefer 16px)
  • No pure black text (using var(--dark))

Future Considerations

Potential Additions (only if necessary):

  • Italic variants for Schibsted Grotesk (currently not used)
  • Variable font support for smoother weight transitions

Current Status: Our current implementation meets all needs. We prefer to keep typography simple and consistent rather than adding unnecessary variety.

Graph View

Backlinks