When you’re building your website, the appearance of your text is almost as important as the words you use. In fact, it may be even more important, because if your website is hard to read, the words won’t matter. Your website visitors will bounce away before your copy has had a chance to deliver its compelling message. So while writing captivating website copy is important—you also have to consider readability and how that copy will show up on your site. Polishing both the copy and how it appears will increase your website conversion rate, which can be critical in growing your practice.
Fonts for Website Conversion
Let’s start with a quick tutorial on the different types of fonts. You’ve got serif, sans serif, and script fonts. There are also more decorative type fonts that don’t fit into these categories, but those should almost never be used for body copy.
Script fonts are beautiful and fancy and look like cursive handwriting. They can sometimes work as headers fonts, but a lot of people struggle with comprehending words in a script font. So it’s usually better to select a serif or sans serif for legibility.
I was taught to think about the difference between serif and sans serif fonts this way: Serif means “with feet” and sans serif means “without feet.” The feet here are the extra little marks at the tops and bottoms of letters, like with the standard Times New Roman font. A sans serif font is a more simplistic font without the extra marks, something like Arial.
In general and very simply, serif fonts, those with feet, are easier on the eye in printed materials.
But online, it’s been found that sans serif fonts aid in comprehension and are easier to read, and will therefore aid in website conversions.
To learn more about font styles click here.
Now let’s talk about font size. Yes, sometimes size DOES matter! The older your target market is, the more it matters. We often tend to design our websites with small fonts, when in reality, most of us respond better to larger font sizes.
Try experimenting with a body font size that’s 14 to 18 px, instead of the standard 11 or 12 px, and see if your website is easier to read. Ask someone else for their opinions, too, on which font size makes for greater usability of your site.
Be aware, though, that different font types show up differently. So Font A might look larger at 14 px than Font B, which is naturally smaller.
To learn more about font sizing, click here.
In regards to color, the optimal color combination is black text on a white background. The reverse, white text on a black background, makes the eyes work harder and can impair readability.
For accessibility, where you’re specifically designing with vision-impaired users in mind, you’ll want less harsh combinations. For instance, a dark gray text on a white background, or a white text against a dark gray background.
Colors can be fun, but you must make sure the font colors and the backgrounds play nice together.
In general, don’t make your backgrounds too busy or too colorful because the text overlaying those images or textures will become much more difficult to read.
To learn more about text color click here. And for those interested in accessibility accommodations, check out this site.
Spacing
Another area to consider when designing a readable website that consistently converts visitors is spacing. You have to think about how the words appear on the page, how they are spaced out and how they are aligned.
The only time it’s a good idea to center ALL of your website text is when you don’t actually want to convert very many visitors to clients.
Centered text can be extremely difficult to comprehend. Since we read from left to right in English, our eyes naturally seek out the consistent visual starting point on the left. When it varies from line to line, as in centered text, we can easily lose our place and suffer from lower comprehension and heightened frustration. The same issue is associated with right justified text.
Fully justified text, where the left and right sides of the block of text are even, can cause weird spacing issues, which also interferes with readability.
So the best justification or alignment option for your body copy is left justified. You won’t make your website visitors work too hard to comprehend your message, which means you have a better chance of reaching them.
Headers can be centered or left justified, and sometimes even right justified, depending on the overall layout of the page and the other design elements you’re using.
When it comes to the lengths of your paragraphs, the trend has been getting shorter and shorter over the years, I suspect, because we’re accessing the web on smaller and smaller devices.
As a rough rule of thumb, consider limiting your paragraphs to 2 to 3 short sentences or 5 lines of text max. You also want to vary the length of your paragraphs because that makes it more interesting for the eye, and therefore contributes to overall readability.
You should also consider white space, also known as negative space, which is just that: the white space around your copy and other design elements.
White space helps your reader to see and understand the elements on your page, it can be used to lead their eye where you want them to go, makes the logic of your layout and message more clear. Appropriate white space helps a site look less cluttered, which helps your message stand out. Website visitors are more likely to convert into clients if they can immediately grasp that your service is what they’ve been looking for.
Images & How the Eye Travels
When you’re laying out your page, think about how the eye naturally travels around a page, whether physical or virtual. In cultures where the standard reading pattern is from left to right, there are two primary paths our eyes naturally take. One is called the F pattern and the other is the Z pattern. Both acknowledge that the first thing our eye tends to do is start at the upper left corner.
In the F pattern, the eye travels down the left side from top to bottom, scanning for the general gist of the information that will be revealed.
In the Z pattern, the eye begins in the upper left and then goes straight across to the upper right corner. The next logical place for the gaze to travel is back to the left side of the page/site and then to the right edge again.
Depending on what you want the reader to see first will determine which journey you take their eyes on around your site. You can arrange each element so that the most important items (headline, subheadings, and CTA) are in the points the eye naturally takes in first. Putting the CTA, or call to action, in the lower left hand corner of the screen ensures your visitors will be more likely to click it and convert.
Read more about eye patterns and visual layouts here.
The words on the page definitely go a long way toward painting the picture of the outcome your client is longing for. But you know the saying, “A picture is worth a thousand words?” A well-placed and appropriate image can do some of the heavy lifting for you. It can convey at a glance what it might take hundreds of words to describe. And that image will complement and reinforce the written message.
So what kinds of images should you select for your site? First, think about what emotions you want to elicit from your website visitors. Remember, humans make decisions based on emotions first, then they justify their decisions with logic. So if you want to make a reader feel closer to their partner after working with you, your website design should do whatever it can to create that emotion in your reader. So how do you do that?
So a pretty picture of an orchid could be an abstract way to convey female genitalia (a la Georgia O’Keefe), but it doesn’t elicit the emotional response you’re seeking. For someone wanting to be closer to their partner, showing an image of two people snuggled up together and smiling will take your viewer further down that path.
When considering which images to use on your site and where to place them, there are few things to keep in mind. First, make sure all faces/eyes are turned inward, looking at your content, not away from it. Your reader will subconsciously follow the direction of the pictured person’s gaze or body language, so making sure that image is facing toward your content ensures that the audience’s attention isn’t drawn away from your content.
And when we’re talking about layout design and where the path of the eye travels, it’s also been proven that our eyes gravitate toward images of faces faster than anything else.
There’s lots more to learn about using faces in your website imagery. Read more here.
The intro to that article sums this up beautifully:
“Human faces elicit emotional responses. In UX design, adding human faces means creating an emotional experience for your users, and therefore, engagement. Furthermore, humans are born with a visual preference for faces, over other images, that begins less than an hour after birth. As UX designers, we can employ faces to influence user reactions or behavior, establish relationships, and earn trust.”
While this might seem like a lot to consider when pulling together your website—it doesn’t have to be a complicated task. Just implementing a few of these tips will make your website much better at converting website visitors into clients!
Curious about training to become a Certified Sex Coach™? Join the next live Info Session to meet the SCU team and participate in a live Q&A!
