How to prepare text for your web site

}
5 min read
Preparing text ready to put up on your site can be a useful time saver in the long run. Websites are different to document creation software like Word or Pages for Mac and there are some rules that are necessary to keep your pages looking consistent and viewed well on different sized devices. Here are a few ways you can adjust how you use text to get the best results.

One space, or two…

It may come as a surprise to you that since the arrival of the PC you no longer need two spaces after your full-stop! Since the arrival of websites it is an absolute no, no.

Preparing text for your websiteThose of us taught to type way back (I learnt on a manual typewriter!) were always told to double space after a full-stop. Not doing this after years of the habit is actually quite hard, but I’ve had to retrain myself.

All the characters on an old typewriter were monospaced; they all took up the same amount of space, so an ‘i’ took up the same amount of space as a capital ‘M’, because of this we needed to type two spaces to separate one sentence from the one before. The PC gave us proportional characters where an ‘i’ and a capital ‘M’ differ emmensly, the look of proportionally spaced text does away with the need for the double space.

When you type directly into your text editor on your site, or if you type it up in Word and copy it across you will need to go through the text editing out any double spaces after a full-stop. If you don’t take them out it can cause display problems when the width of a browser changes from laptop to mobile phone and the text realigns itself.

Unformatting text

How to unformat textMost sites are pre-formatted with their own styles to keep them looking good, copying across text from other doucments can also copy across hidden styles that can caused display issues. Clients often send me their words and page contents in a Word document, I can then copy it across in chunks into the right sections but before I copy it I have to ‘unformat’ the text.

To un-format the text you can use the in-built buttons within Word or partially remove it in Pages on a Mac (why Mac isn’t ahead of this I don’t know!). In Word highlight the text you would like to unformat and use the unformat icon, below to remove the formatting before you copy it and paste it into your website text editor or website pages.

Unformatting text - Kite Web Design

On Pages for Mac you can remove most of the formatting by converting the whole page to plain text by using Command+Shift+T. Then copy it and paste it into your website text editor or website pages.

Special characters

Special characters on websites are just general characters found on your keyboard. On occasion these are not displayed as you wished them to be. You may be familiar with reading a website and finding in the middle a jumble of letters like ‘A%6^’, this happens when a character is carried forward and the browser is not reading it correctly. To change the display of this you will need to use characters ready for the web. In a WordPress or other web editing platforms there is a special character icon (an Omega) sign at the top of the text editing box that will open up a selection for you to use. These special characters are useful for using accents on letters and currency amongst others. You may be particular about using different dashes as a point of good grammar, if so you will also find ’em-dashes’ and ‘en-dashes’ in this list.

If you are entering the text straight onto a web page and it doesn’t display well you can enter the ‘HTML’ version (ASCII) of these symbols that begin with an ‘&’. To find a list of the ASCII characters click here. This HTML version will need to be entered in ‘code’ view of the editor, in WordPress this can be found on a tab above the text editing box called ‘Text’.

Adding font colours

Kite Web Design - Changing font colour on WordPressUnformatting the text (above) may strip out any colours you had originally put in. It is much better to put them back in within your text editing box.

Your web designer can set up colour options for different text on your site to fit with your branding. In WordPress you can use the colour drop-down option in the text editing icons. Custom colours will appear at the bottom of the colour selection. If you can’t see this option you will need to click on the Toggle Toolbar option first – this opens a second row of editing icons.

Wordpress toggle toolbar and drop-down colour options

Try not to use random colours throughout your site as it is very confusing to the eye. Drawing attention to a particular word or sentence is fine, but if you do that to too many words and sentences it will not draw attention to anything in particular but just look messy.

 

Taking these steps are good practice and will ensure your text looks at its best on your website. Give it a go!

If you feel you need more training in elements of editing or building your site please get in touch: info@kitewebdesign.co.uk.