Appearance

Typography ​

File Information ​

  • Path: app/assets/scss/base/_typography.scss
  • Purpose: Typography styles for headings and text elements
  • Type: Base (outputs CSS)

Overview ​

The typography file defines consistent heading styles and text formatting across the application. It establishes a clear typographic hierarchy using the Space Grotesk font for headings and Inter for body text.

Heading Styles ​

H1 (Heading 1) ​

  • Font Size: 34px ($font-size-34)
  • Line Height: 1.1765
  • Font Family: Space Grotesk ($font-family-header)
  • Font Weight: Medium ($font-weight-medium)
  • Use Case: Main page titles, hero headings

H2 (Heading 2) ​

  • Font Size: 28px ($font-size-28)
  • Font Family: Space Grotesk ($font-family-header)
  • Font Weight: Medium ($font-weight-medium)
  • Use Case: Section titles, major headings

H3 (Heading 3) ​

  • Font Size: 22px ($font-size-22)
  • Font Weight: Medium ($font-weight-medium)
  • Use Case: Subsection titles

H4 (Heading 4) ​

  • Font Size: 18px ($font-size-18)
  • Font Weight: Medium ($font-weight-medium)
  • Use Case: Minor headings, card titles

H5 (Heading 5) ​

  • Font Size: 16px ($font-size-16)
  • Font Weight: Medium ($font-weight-medium)
  • Use Case: Small headings, labels

H6 (Heading 6) ​

  • Font Size: 14px ($font-size-14)
  • Font Weight: Medium ($font-weight-medium)
  • Use Case: Smallest headings, captions

Common Heading Properties ​

All headings share:

  • Margin: 0px (reset)
  • Line Height: 1.2
  • Letter Spacing: Normal

Page Title Class ​

.page-title ​

Special styling for page titles:

  • Overflow: Hidden
  • Text Overflow: Ellipsis
  • White Space: Nowrap
  • Margin Right: 16px

Prevents long page titles from breaking layout.

Responsive Typography ​

Tablet and Below (max-width: 1280.98px) ​

Heading sizes are reduced for smaller screens:

  • H1: 34px → 28px
  • H2: 28px → 22px
  • H3: 22px → 18px
  • H4: 18px → 16px

This ensures headings remain proportional on smaller screens.

Usage Examples ​

Basic Heading ​

html
<h1>Main Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

Page Title ​

html
<h1 class="page-title">Very Long Page Title That Might Overflow</h1>

Typography Scale ​

The typography follows a consistent scale:

  • 34px - H1 (largest)
  • 28px - H2
  • 22px - H3
  • 18px - H4
  • 16px - H5
  • 14px - H6 (base body size)

Best Practices ​

  1. Use semantic HTML - Use appropriate heading levels (h1-h6) for structure
  2. Maintain hierarchy - Don't skip heading levels (h1 → h2 → h3, not h1 → h3)
  3. Use page-title class - Apply .page-title to prevent overflow on long titles
  4. Respect responsive sizes - Headings automatically adjust on smaller screens
  • Reset Styles - Base element reset that typography builds upon
  • Variables - Typography variables (font families, sizes, weights)