Responsive Typography

Using Global Typography Settings in Breakdance

In this article, learn how to use Breakdance’s global typography settings. It shows how to create responsive typography styles that affect your entire website, enabling you to adjust text sizes and styles across different devices quickly.

Configuring Global Typography Settings

Accessing Global Settings

1. Go to the ‘…’ menu near the top right of the Breakdance interface and click ‘Global Settings’.
2. Navigate to the ‘Typography’ section.

Adjusting Base Size and Ratio Controls

1. Use the ‘Ratio Control’ to set the difference in size between one heading and the next. You can use the breakpoint button next to the control label to set a different ratio per breakpoint.
2. Change the ‘Base Size’ for body text, which is also responsive. You can use the breakpoint button next to the control label to set a different base size per breakpoint.

Advanced Typography Options

Under ‘Advanced’, control typography styles for all headings or each heading size (H1 to H6) and body text. You can set specific sizes, font families, colors, line heights, letter spacings, and more for each element.

Additional Notes

Breakdance’s global typography settings streamline the process of creating consistent and responsive typography across your website. With just a few clicks, you can ensure your text is readable and aesthetically pleasing on all devices.