Choose Text and Heading Colours for Author Websites

Introduction

The colours you choose for text and headings play a critical role in the readability and professionalism of your author website. In this lesson, we’ll show you how to set global text and heading colours using Breakdance, creating subtle contrasts that make your content easier to scan and read. You’ll also learn how to update your website’s colour grid to align with your brand while maintaining a cohesive design. These steps ensure your website offers an engaging experience for visitors and reflects the unique style of your author brand.

Text and Headings

We could set our text and heading colours to total black with no issues but because we have global settings we can easily try out subtle combinations to improve the reading experience for visitors.

I like to set the headings to be darker than the body text. This helps the visitor scan for the information they want before zeroing in to text area that’s comfortable to read.  

Set Global Text Colour

For this example I’m going to set the text to the hex code #333333 for smoky grey which has plenty of contrast to the existing website background.

• From inside Global Settings > Colors
• I’ll set Text colour to #333333

Set Global Heading Colour

• Just below text I’ll make the global header colour #000000 for total black.

Using these two different colours is a subtle effect as we want to avoid shocking the visitor OUT of the reading experience.

Update the Colour Grid

Now that we have selected our text and heading colours lets update the Colour grid on the website.

• Click on the Text Div inside the colour grid
• Change the Div background to the Text option from the global colour palette
• Click on the Heading Div
• Change the background to the Heading option from the global colour palette

We have a problem.

We can barely make out the heading in the text Div and not at all in the Heading Div.

We can fix that right away by adding colours to our Global Palette.

• Go back to the Colours menu dropdown under Global Settings
• Click on the edit icon beside Palette
• Add a colour
• Name this colour Alt Text
• I’m going to give this palette item an off white colour of #F9FAFB
• Next I’m going to add another colour.
• I’ll name this one Alt Heading and make it WHITE
• I’ll click on the text element inside the TEXT div in the colour grid and give it the ALT TEXT palette choice
• I’ll click on the text element inside the HEADING div in the colour grid and give it the ALT HEADING palette choice
• Click save.

Summary

In this lesson, we explored how to select and apply global text and heading colours to improve readability and consistency on your author website. By using Breakdance’s global settings and customising your palette, you can create a visually appealing design that enhances your site’s usability and aligns with your branding. Now it’s time to look for inspiration from other author websites and refine your colour palette to reflect your genre and personal style.

Take this opportunity to look through other websites you like. What colours are they using on their buttons, for their headers, footers, fonts and backgrounds? What colour schemes do authors in your genre use on their sites? Start making notes of colour schemes you like and where they fit on your palette.