Breakdance allows you to control typography globally, ensuring consistent styling across your site. Typography settings can be applied directly to global text types (like headings and body text) or managed through reusable Typography Presets.
Global Typography Settings
- Heading Font: Define the default font used for Heading elements.
- Body Font: Defines the default font for Body text, which should cover anything other than Heading tags.
- Base Size: Defines the default font size for body text across your site. This acts as the root measurement from which other text sizes (e.g., headings) are derived.
- Ratio: determines the mathematical scaling factor used to size headings (H1–H6) relative to the Base Size. Instead of setting each heading size manually, Breakdance applies a modular scale, multiplying the Base Size by the Ratio to generate proportional heading sizes.
- Advanced: This is where you can set the default font-based values for the body, heading tags, and links.
- Presets: Create and manage Typography Presets.
Typography Presets
Typography Presets allow you to create reusable text styles for headings, body text, buttons, and more. They provide flexibility beyond the standard global typography settings, and you can even assign your presets for the default Advanced typography settings for Breakdance.
Creating A Preset
There are two ways to create a Typography Preset. The first is from the Global Settings, and the second is while you’re working on an element.
From Global Settings
- Open the Settings Menu.
- Navigate to Global Settings > Typography > Presets.
- Click Add Preset
- Name the preset (e.g., Big Heading).
- Define the properties for the Preset
From An Element
- Go to Design > Typography
- Set the desired font properties.
- Click the “Save as Preset” button to create a new preset.
Applying Presets
Applying a Preset can be easily done in the Properties Panel through the Typography Control Section. When viewing Presets, you’ll see the attributes (weight, size, style, line height, etc) next to the Preset name.
- Select an element
- Go to Design > Typography in the Properties Panel
- Select Preset
- Choose a Preset from the dropdown or begin typing in a Preset name and suggestions will appear automatically.
Modifying a Preset
You can modify any Preset by going to Global Settings > Typography > Presets, or by clicking “Manage Presets” when working in the Typography Control Section of an element.
After you make your changes, all elements using that Preset will update automatically across your site.
