Get Started

Typography Presets

Use predefined typography styles with responsive sizing, proper line heights, and optimized letter spacing.

BreakMade Typography Presets provide a complete typographic system with fluid, responsive sizing using CSS clamp().

Heading Presets

LevelDesktopMobileLine HeightLetter SpacingWeight
H13rem (48px)~2.25rem110%-0.02em800
H22.25rem (36px)~1.75rem120%-0.02em700
H31.875rem (30px)~1.5rem125%-0.01em700
H41.5rem (24px)~1.25rem130%-0.01em600
H51.25rem (20px)~1.125rem140%0600
H61rem (16px)1rem150%0600

Body Text

  • Size: 1rem (16px)
  • Line Height: 160%
  • Letter Spacing: 0
  • Weight: 400

Installing Typography Presets

  1. Navigate to BreakMade settings
  2. Click Install Typography Presets
  3. Presets merge with your existing Breakdance typography

Enable Typography Only toggle to preserve other global settings.

Using Presets in Breakdance

Method 1: Typography Dropdown

  1. Select a text element
  2. Open Style panel → Typography settings
  3. Choose a preset from the dropdown

Method 2: Custom CSS

.custom-heading {
  /* Match H2 preset */
  font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
}

Why These Values?

Line Height

  • Headings (110-130%): Tighter for visual impact
  • Body (160%): Looser for readability

Letter Spacing

  • Large text: Negative spacing brings letters together for cohesive headlines
  • Body text: Default spacing for optimal reading

Usage Recommendations

ElementWhen to Use
H1Page titles, hero headlines
H2Major section headings
H3Subsections, feature titles
H4Card titles, minor sections
H5Sidebar headings, labels
H6Captions, meta information

Combining with Other Features

.section-title {
  /* Typography */
  font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;

  /* Color from palette */
  color: var(--primary-heading);

  /* Spacing */
  margin-bottom: var(--s4);
}

Best Practices

  • Semantic markup: One H1 per page, don’t skip levels
  • Trust preset sizes: Use H3 instead of overriding H2 size
  • Consistent application: All page titles = H1, section titles = H2

Troubleshooting

Presets not appearing?

  1. Click Install Typography Presets
  2. Refresh Breakdance editor
  3. Check Breakdance Global Settings > Typography

Wrong sizes displaying?

  1. Clear browser cache
  2. Check for conflicting custom CSS