Context in writing is very important when it comes to building a base of readers who are passionate on your subject. The best websites online which offer static content are very friendly towards incoming visitors. The text is simple to read and broken down into a very simple layout. You want to guide your readers through the article from beginning to end while presenting helpful conclusions along the way.

writing desk tools features webcopy featured photo

Most designers or webmasters are not considering the importance of their writing. But it can go a long way towards drawing an audience onto your website. In this article I would like to present some ideas for writing better webpage copy. This could be related to your new mobile app, or product landing page, or your company blog. Writing styles may change based on the topic but following the same general rules will result in a greater approval rating among visitors.

Emphasizing Words

Plenty of techniques already exist for adding definition into certain words. Bold & italicized text can work well, especially in headers where the typography is much larger. But consider other more unique trends which haven’t been around for as long.

CSS pull-quotes are a fine example where you might take a phrase or sentence from any paragraph and blow up the text on the page. You can see my recent article on pullquotes in web design which delves into the topic a bit more. These quotes often float along the right or left side of the page so as not to appear like a distraction. Also the text is usually repeated from somewhere else in the content, so it is not vital to understand the final conclusion.

Another method is to use colored text as formatting symbols. This isn’t as useful outside of subtitles or extended text such as you’d find on landing pages. But colored words may be used in some type of key or reference frame. A slightly easier alternative is to use superscript sources which can be listed and linked at the bottom of the page. This is the best method for writing more professional pieces which may require citing other articles or books.

Creative Layouts

The design style of your typography will speak volumes about your work. There are numerous tricks of the trade you may apply to headings which will attract plenty of attention. Codrops released an awesome jQuery plugin named Arctext.js which realigns your page text into circles and curves.

Arctext js javascript open source library

This free plugin is just one example of how to spice up your typography. Formatting and readability are still vitally important, so you can’t sacrifice the easy styles for more complex ideas. But if you can find other websites in your niche it’ll help when brainstorming a design presence for your own product branding.

Big Lucious Typography

It should come as no surprise that big text will sell much faster. The average Internet user can read bigger text much quicker and will find pages less frustrating. Even if there is a lot of content on the page it can appear less menacing if you are only focusing on 2-3 paragraphs at a time.

Now it is worth bringing up that you shouldn’t try pushing outside of some limits and going too big. If the text is jumbo oversized then you can imagine how annoying this would be for smaller screens or mobile devices. Media queries may be able to handle adjustments, but find the perfect sizes which work in your own layout. It’s easy to tell when you have gone too far or when your paragraphs are just too small in comparison.

The better choice would be to aim for adjustable typography instead of fixed sizes. When your visitors have a large enough monitor to handle big fonts it is worth the design effort. I’d recommend sizing units in ems compared to points or pixels.

Custom Web Fonts

Selling a product or service comes down to your skillset and abilities. But you will also need a good presentation. Any custom fonts you can include will do wonders for the aesthetics on your landing page. The most popular solution would be including a series of Google Web Fonts in your CSS code.

Google web fonts ttf open source webpage

By using CSS3 @font-face properties it is also possible to implement your own font styles. Web browsers haven’t come to a full consensus on the best font typefaces. But generally you should include .eot, .ttf, and .woff. SVG fonts are also possible but not necessary for complete support. And using a tool like Font2Web it is very easy converting a single file into all the other standard web font types.

open source webfont converter ttf woff

Even just 1-2 custom font styles can dramatically improve the quality of any website layout. Think about customizing not just the headers, but also paragraph text as well. You will need to include some page content and this is crucial for selling your visitors on whatever product is being pitched. Also the CSS Font Stack website is home to dozens of various web-safe font family choices. Dig through their resources and you can surely put together outstanding web copy that sells.

Final Thoughts

It is not easy to write and the process can become dull after extended periods of time. You need to make sure that you can write on a subject which is genuinely interesting. These tips are merely a starting point in a much longer process which extends over the lifespan of your website.

I am hoping these tips will be put to good use by at least a few webmasters. Writing webpage copy is a difficult task alone, nevermind trying to adjust your content for a specific audience. However you will notice the best results if you can stay focused, interested, and use plenty of colorful vocabulary. Along with my writing suggestions I would love to hear thoughts or questions from readers in the post discussion area below.

Posted by Jake Rocheleau

Jake is a writer & digital designer/illustrator. He writes about all things web and creative. Check out his website for work samples and follow his latest updates on Twitter @jakerocheleau.

Leave a reply

Your email address will not be published. Required fields are marked *