How to Change Text Style Using OzSpeed hPanel

Customizing the text style on your website is a key part of creating a visually appealing and cohesive design. The text style includes elements like fonts, size, color, alignment, and spacing. With OzSpeed’s Website Builder, you can easily update these settings to match your brand’s style and improve the readability of your content. Here’s a step-by-step guide on how to change the text style on your website.

---

Step 1: Access the Website Editor #

To start editing the text style, open the page editor in hPanel.

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Builder > Edit Site.
3. Click on any Text Block on the page to select it.

Tip: #

• Identify key areas where changing the text style will have the most impact, such as headers, call-to-action text, and body content.

---

Step 2: Choose a New Font #

Selecting the right font is important for conveying your brand’s tone and enhancing readability.

How to Change the Font: #

1. Click on the Text Block to open the Design Settings panel.
2. Go to the Typography tab.
3. Click on the Font Family dropdown menu and choose a new font from the list.
4. Click Apply.

Tip: #

• Use a consistent font for body text and a different, more impactful font for headings.

---

Step 3: Adjust the Font Size #

The size of your text affects readability and the visual hierarchy of your content.

How to Change the Font Size: #

1. In the Typography tab, adjust the Font Size slider or enter a specific value (e.g., 18px for body text).
2. Click Apply to save the changes.

Tip: #

• Use larger font sizes for headings (e.g., 24px or higher) and smaller sizes for body text (e.g., 16px-18px).

---

Step 4: Change the Text Color #

You can update the color of your text to match your brand’s color palette or create contrast against the background.

How to Change Text Color: #

1. In the Typography tab, click on the Text Color option.
2. Choose a color from the color picker or enter a hex code (e.g., #333333 for dark gray).
3. Click Apply.

Tip: #

• Use dark colors for text on light backgrounds and light colors for text on dark backgrounds to ensure readability.

---

Step 5: Update Text Alignment #

Text alignment helps structure your content and improve the visual flow of your website.

How to Align Text: #

1. Click on the Text Block to open the Design Settings panel.
2. Choose from left, center, right, or justify alignment.
3. Click Apply.

Tip: #

• Center alignment works well for headings and short text blocks, while left alignment is best for body text.

---

Step 6: Customize Line Height and Letter Spacing #

Line height and letter spacing adjustments can enhance readability and give your text a polished look.

How to Adjust Line Height and Letter Spacing: #

1. In the Typography tab, adjust the Line Height slider to increase or decrease the space between lines.
2. Adjust the Letter Spacing slider for more or less space between characters.
3. Click Apply.

Tip: #

• Use a line height of 1.5-2 times the font size for optimal readability.

---

Step 7: Add Text Effects (Optional) #

You can add effects like bold, italic, underline, or text shadow to highlight important text.

How to Apply Text Effects: #

1. Highlight the text you want to style.
2. Click on the Bold, Italic, or Underline icons in the toolbar.
3. To add a text shadow, go to the Effects tab in the Design Settings and enable the Text Shadow option.
4. Click Apply.

Tip: #

• Use text effects sparingly to avoid clutter and maintain a clean design.

---

Step 8: Preview and Test Your Text Changes #

Before publishing, preview your site to ensure the new text style looks good across different devices.

How to Preview: #

1. Click Preview in the top toolbar.
2. Check the text style on both desktop and mobile views.
3. Ensure that all text is readable and fits well within the layout.

Tip: #

• Use an incognito window or clear your browser cache to see the changes as a new visitor would.

---

Step 9: Publish Your Changes #

Once you’re happy with the updated text style, publish your website to make the changes live.

How to Publish: #

1. Click Publish in the top right corner of the editor.
2. Confirm your changes to go live.

Tip: #

• Announce the new design style in your email newsletter or on social media if it’s part of a broader brand update.

---

Troubleshooting Tips #

1. Text Not Updating Correctly:
   • Ensure you’ve clicked Apply and Save after making changes.
   • Clear your website cache in hPanel and your browser cache.
2. Inconsistent Text Styles Across Pages:
   • Use the Global Typography Settings to apply changes consistently across all pages.
   • Double-check individual text blocks that may have custom overrides.
3. Text Hard to Read on Mobile:
   • Use the responsive design settings to adjust the font size and spacing for mobile views.
   • Test the text style on different devices to ensure readability.

---

Additional Tips: #

• Stick to Your Brand’s Fonts: Use your brand’s official fonts for a consistent look across your website.
• Keep It Simple: Avoid using too many different fonts or text styles, as it can make your site look cluttered.
• Test for Accessibility: Ensure there’s enough contrast between your text and background colors to meet accessibility standards.