Three Tips for Terrific Text

In the past couple of weeks, we’ve talked about the use of graphics, images and Flash technology to add interest and movement to your site. Today, I’m going to talk a little about how you can use text to spice up your website as well.

Text Font and Color

I’ve seen several websites that had some interested tactics in emphasizing text. They ranged from colorizing to highlighting their text. I also have seen sites that used 3 different types of fonts in one sentence. Let me let you in on a couple of tasteful ways to use text.

My first suggestion to you would be to try to use as little color within your text as possible. Let your site’s graphics and photos add the color for you and use bold, underline and italics to emphasize text. If you do want to use color to emphasize words or phrases, try sticking to one color and using bold as well. For example, if I wanted to emphasize this phrase, I could do it this way. I used red, because it complements the rest of the website.

My second suggestion is to use only 1 font (text style) on your website. This keeps the site uniform and easy to read. There are a few cases in which changing the font might be appropriate. For example, if I were to give you the HTML code for an image, I could use a font called “Courier New” to clearly show what part of the content is the code.

You’ll also notice that I placed a little space in between the paragraph before and after and centered the example code. This also helps to differentiate the code from the rest of the content.

Another good use of fonts can also be found on this page. Did you notice that I began each section of this blog with a header or title? Did you notice that it was a different font? I’m willing to bet you did not notice and that’s exactly the way it should be. Changes in font and color should be subtle and should blend with the rest of the site.

Long Pages of Text

When entering content into a website, you’ll sometimes come across a subject that you have a lot to talk about. Before you start typing your novel, think about this. Most web surfers do exactly that; surf the web. They do not want to sit there a read a web page that would force them to scroll down more than 2 times the amount of their computer monitor.
One way to do this is to think ahead and split up your content into more than one page. Then at the bottom of each page, you would invite them to read more by offering them a link to move on to the next page. If they want to read more, they’ll click. If not, they’ll move on, but at least they read what you had to offer and were not turned off by the 50-page journal that you had originally planned to put on one page.

Hyperlinks

What is a hyperlink? A hyperlink is defined as “a reference or navigation element in a document to another section of the same document or to another document that may be on a (different) website. A hyperlink on a web page (also known as a link) can be an image, movie, Flash feature or almost anything. I want to talk about a great way to use text as a hyperlink.

A hyperlink on a web page is most commonly used to link users to another URL or web page. It uses the HTML element (or tag) “a” with the attribute “href”. Here is an example of the HTML code for a hyperlink:

The code above would produce this: Click here to visit OurChurch.Com

Here is another example that helps to explain each part of the code:

A lot of times, you will see text like this in a content page:

OurChurch.Com offers free Christian web hosting (http://www.ourchurch.com/hosting), web design (http://www.ourchurch.com/design), and search engine services (http://marketing.ourchurch.com).

The content of the sentence is interrupted by a web addresses. This works, but why not just do the following. These links are known as “inline” links:

OurChurch.Com offers free Christian web hosting, web design, and search engine services.

Not only is the content not interrupted, but it is shorter and easier to read as well. Because of the color and underline of the link, the website visitor will know it is a link. Also, because the text is definitive enough, the website visitor knows where he or she will be going when they click the link.

This is a great technique to use when writing your content. There may be another page on your website that you refer to within your content. Simply make that text into a hyperlink.

Were any of the concepts new to you? Did this article make you rethink some of the design practices that you have incorporated into your website? Do you have some tips to add to this article? Leave a comment below.

If you enjoyed this article or found it interesting, vote for it on Blogs4God so that others can benefit from it as well.

Mike joined OurChurch.com as Web Designer/Developer in September, 2006. Born and raised in Houston, TX, he is now married and has 3 adorable children. In his spare time he enjoys playing piano/keys and singing throughout the local area as well as at church. You may also see him acting in church dramas as well as a local Improv Comedy Troupe!

6 Responses to “Three Tips for Terrific Text”

  1. Thanks, again, for providing such a wonderful service. However, one of things I miss about the original host service is the variety of Christian and holiday theme layouts that could be changed quickly. NE1 is more professional looking in general, but those of us who cannot afford a package that would include moving visual elements are limited. My question is: are more layouts available when a package is purchased?

    God bless, Mary

  2. I liked very much your article about hyperlinks. I would like to learn how to create a hyperlink and a “inline” link. Thank you.

  3. I am trying to inset a hyperlink on my site using the instructions listed above, but have not been successful. I tried using the link format above, but it just inserts the link on the website, without the ability to access it. What advice can you give me?

    Thanks

  4. Thank you for your help in developing a web site. I haven’t used everything you’ve shared but I do read it and put it into my little brain.

  5. I guess I should have added this to the article: A lot of web builders (including the NE1 Website Builder) have a button that will help create a hyperlink for you. Most of the time, this button looks like a small chain (chain link, get it?).

    To create an inline link, just highlight/select the text you want to create the link out of, then click the hyperlink button. Usually a small window will open up asking you what URL (web address) the link should point to. Simply enter the URL in and click “OK” or “Insert”. Your text should then look like a link (different color, underlined, etc.).

    I hope this helps out.

  6. In response to Mary’s question: “My question is: are more layouts available when a package is purchased?”

    By “packages” I assume that you are talking about the custom NE1 design services that we offer or the Custom CMS Express. I’ll explain both.

    The custom NE1 design services allow you to purchase certain customizations to your NE1 template. You can order a custom header to change the look of your site or have us create an entire custom template for you.

    The Custom CMS Express also has different templates for you to choose from, but they are not interchangeable. This means, that you can’t change the template any time you want. You can also have us customize a template or create one from scratch.

    As far as Holiday templates and such, every month we place a vote for new NE1 templates to create. We first take users’ template ideas (colors, themes, images, etc.) and then place them in the OCC forums for a vote. We take the top 3 template ideas (based on the number of votes) and create new templates. The plan is to create at least 3 new templates a month. I’m sure that when we get close to a holiday, users will recommend and vote for holiday templates.

    I hope this answers your questions.