How to format text correctly on a website page using the text editor field

When you add your copy to a website page using the text editor fields, how can you ensure what you add is formatted nicely so it’s consistent with the rest of the website?

Title and body fonts

You website has a default title font and a default body font which were chosen when the website was first built. Title and subtitles will always use the title font, main bodies of content will always use body font.

  • If you're entering text into the Title or Subtitle fields, the website will automatically use the Title font and assign a specific font size to that text. This ensures all your Title and sub titles format in the same way.

  • If you're entering text into the Content field, the website will automatically use the Body font and assign a specific font size to that text. This ensures all your main bodies of text format in the same way.

Simply using the title, subtitle and content fields when adding text to pages or items is the best way to ensure your styling remains consistent across the website

Customising fonts and text sizes

If you want to customise the fonts and font size within the text editor itself.

  • Highlight the text you want to format

  • Click the Paragraph Format icon (which looks like a backwards P)

  • Select the formatting you want to apply to the text. The Heading options will all use the title font, the normal selection will use the body font

  • We recommend you use a Heading 2, Heading 3 or Heading 4 option for titles and Normal for your main body of text. Do not use the Heading 1 (H1) option unless you have good knowledge of SEO. Each website page should only have one H1 otherwise it could be detrimental to your website’s SEO, so it’s important not to simply allocate an H1 without knowing what else is contained on that website page

image-20240202-103429.png

Clearing the text/font formats on a page or item

If you copy and paste text from another document, you could inadvertently paste in additional formatting that will output on the website. Or, you might find that a website page’s formatting has just got a little messy as it’s been edited by various people.

To clear the formatting of an item or page so you can start again, you can use the Clear Formatting option. Simply highlight the text you want to clear the formatting on (we recommend highlighting all) and click the clear formatting button

image-20240202-104713.png

This will simply restore all the highlighted text to the default font size and font style

Top Tips

  • Try not to use the font size selector. Unless you know what font sizes are used across the website, it could mean you simply select font sizes which may be larger or smaller than the text around it, but doesn’t match the sizing used across the rest of the website. This would be fine if you were creating an individual Word document, but a website’s styling should be consistent across all of it’s pages. Individually selecting your font size on a page per page basis is time consuming and can lead to inconsistencies

  • Use the Paragraph format option button instead. This is both quicker and ensures the formatting stays consistent

  • If you cannot decipher what formatting has been used to correct it, feel free to start again. Highlight the text and use the clear formatting button to restore the default size and font. You can then simply start again from scratch and allocate your formatting as required