How to adjust line height in Webflow's new UI? Need help with fixing bunched-up heading text.
TL;DR
- Select the heading element and ensure the correct class is chosen.
- In the Style panel, adjust the Line Height under Typography using a unitless value like 1.4 or 1.6 for better spacing.
To fix bunched-up heading text in Webflow's new UI, you need to adjust the line height (or line spacing) within the Typography section of the Style panel.
1. Select the Heading Element
- Click on the heading (e.g., H1, H2) directly on the canvas or use the Navigator to locate it.
- Ensure that the correct class or element is selected before proceeding.
2. Open the Style Panel
- With the heading selected, go to the right-hand panel titled Style (paintbrush icon).
- If necessary, create or select a class to avoid styling all elements globally.
3. Adjust Line Height
- Scroll to the Typography section in the Style panel.
- Find the option labeled Line Height (located under font size).
- Use the slider or manually input a value (e.g., 1.2, 1.4, or 1.6 depending on the font and layout).
- Webflow uses unitless line height by default, which scales proportionally with the font size.
4. Use Preview Mode to Check Spacing
- Enable Preview Mode (eye icon) in the top toolbar to view how the line height adjustment looks in the live layout.
- Adjust again if the spacing still looks too tight or loose.
Summary
To fix heading text that looks too bunched up, select the heading, go to the Style panel, and adjust the Line Height in the Typography section. Use decimals like 1.4 or 1.6 for cleaner spacing between lines.