Line spacing (also known as leading) is the space between lines of text. Adjusting line spacing can significantly improve the readability of your content and give your website a clean, professional look. With OzSpeed’s Website Builder, you can easily customize line spacing to fit your design preferences. Here’s a step-by-step guide on how to manage line spacing effectively.
Step 1: Access the Website Editor #
To begin adjusting line spacing, open the page editor in hPanel.
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Edit Site.
- Click on the Text Block where you want to modify the line spacing.
Tip: #
- Adjusting line spacing can make large blocks of text easier to read and improve the overall appearance of your website.
Step 2: Select the Text Block #
Click inside the text block to enter edit mode and highlight the text you want to adjust.
How to Select the Text: #
- Click directly on the Text Block element.
- Ensure the text block is outlined, indicating it is selected for editing.
Tip: #
- For a more uniform look, consider adjusting line spacing for all similar text blocks (e.g., body text, headings) across your website.
Step 3: Open the Typography Settings #
The Typography Settings panel allows you to adjust various text properties, including line spacing.
How to Access Typography Settings: #
- Click on the Design Settings panel for the selected text block.
- Go to the Typography tab.
- Locate the Line Spacing (Line Height) option.
Tip: #
- Line height is typically expressed as a ratio (e.g., 1.2, 1.5) or in pixels (e.g., 20px). A higher value increases the space between lines.
Step 4: Adjust the Line Spacing #
You can increase or decrease the line spacing to achieve the desired look.
How to Adjust Line Spacing: #
- Use the Line Spacing Slider to increase or decrease the spacing.
- Smaller values (e.g., 1.0-1.2) create tighter spacing, ideal for headings.
- Larger values (e.g., 1.5-2.0) provide more space, suitable for body text.
- Alternatively, enter a specific value (e.g., 1.5 or 24px) for precise control.
- Click Apply to save the changes.
Tip: #
- For optimal readability, use a line height of 1.5-2.0 for body text and 1.2-1.4 for headings.
Step 5: Preview the Changes #
Before finalizing, preview your website to see how the adjusted line spacing looks across different pages and devices.
How to Preview: #
- Click Preview in the top toolbar.
- Check the text spacing on both desktop and mobile views.
- Ensure the text is readable and well-spaced.
Tip: #
- Use an incognito window or clear your browser cache to see the changes as a new visitor would.
Step 6: Apply Consistent Line Spacing Site-Wide #
For a cohesive look, consider applying the same line spacing settings to similar text elements throughout your website.
How to Apply Site-Wide Changes: #
- Go to Website Settings > Global Typography in hPanel.
- Set the desired Line Spacing for Body Text and Headings.
- Click Apply to update all related text elements.
Tip: #
- Consistent line spacing helps create a polished, professional appearance across your entire website.
Step 7: Publish Your Changes #
Once you’re satisfied with the line spacing adjustments, publish your updates to make them live.
How to Publish: #
- Click Publish in the top right corner of the editor.
- Confirm the changes to go live.
Tip: #
- Let your audience know about any major design updates, especially if the new layout improves readability.
Troubleshooting Tips #
- Text Overlapping Issues:
- Increase the line spacing value if text lines are too close together or overlapping.
- Clear your website cache in hPanel and your browser cache to see the latest changes.
- Inconsistent Line Spacing Across Text Blocks:
- Use the Global Typography Settings to ensure uniform line spacing throughout your site.
- Double-check individual text blocks for any custom overrides.
- Line Spacing Looks Different on Mobile:
- Use responsive design settings to adjust the line spacing specifically for mobile devices.
- Test the text on multiple devices to ensure it displays correctly.
Additional Tips: #
- Avoid Tight Spacing: Tight line spacing can make text difficult to read, especially for longer paragraphs.
- Consider Readability: Use larger line spacing for text-heavy sections to improve readability.
- Test for Accessibility: Ensure the line spacing is sufficient for users with visual impairments. A line height of 1.5 or higher is recommended for accessibility.
