Working with Different Type Faces and Sizes

By default, eBay displays all the text in your item description using Times Roman font. Times Roman is a nice font, but it isn't the only font you can useand it may not be the most effective for your purposes. You can elect to display your text in any font face you like; you can even use different type faces for different elements in your listing.

Caution

Just because you have a specific font installed on your computer doesn't necessarily mean that all potential buyers who'll be viewing your listing have the same font installed on their PCs. If you change fonts in your listing, change to a common font that is likely to be preinstalled on all personal computers. Arial, Times Roman, and Verdana are always safe bets; choosing something more obscure might mean that your listing displays unpredictably on other computers.

You should, however, use a little self-control when using fonts for your item listing. While changing fonts from here to there might be fun (and relatively easy, as you'll see), combining too many different fonts within an item listing looks garish. To that end, you may want to make an initial font choice at the beginning of your description and leave it the same throughout the entire listing.

Template 6.12. Arial Title and Description

eBay's default Times Roman font is a serif font, meaning that most letters have a short cross stroke at the ends. Serif type is easy to read in long passages, which is why it is used for most books (like this one) and magazine articles. However, it is not the most dynamic type face for headings and titles; for those elements, many page designers prefer a sans-serif font (without the cross strokes), such as Arial or Helvetica. To that end, this template changes the entire text of your item listingboth the title and descriptionto Arial, as shown in Figure 6.12.

Figure 6.12. Arial title and description.

The simple way to do this is to enclose all the title and description text within <font> and </font> container tags, with the face="arial" attribute, like this:

<font face="arial"> <h1 style="text-align: center">This is the title</h1> <p style="text-align: left"> This is the first paragraph of the description </p> <p style="text-align: left"> This is the second paragraph of the description </p> </font="arial">

That said, a cleaner way of achieving the same effect is to add a second rule to all the style attributes, defining font-family: Arial. This CSS-based code looks like this:

<h1 style="text-align: center; font-family: Arial"> This is the title</h1> <p style="text-align: left; font-family: Arial"> This is the first paragraph of the description </p> <p style="text-align: left; font-family: Arial"> This is the second paragraph of the description </p>

Template 6.13. Arial Title and Times Roman Description

Given that a serif font is easier to read for body text and a sans-serif font is more dynamic for titles and headings, let's try mixing the two by using Arial text for the title and Times Roman for the description. The resulting template is shown in Figure 6.13.

Figure 6.13. Arial title and Times Roman description.

This is another instance where the slightly complicated layout instructions are easier to implement with CSS code, such as the following:

<h1 style="text-align: center; font-family: Arial"> This is the title</h1> <p style="text-align: left; font-family: Times Roman"> This is the first paragraph of the description </p> <p style="text-align: left; font-family: Times Roman"> This is the second paragraph of the description </p>

Template 6.14. Verdana Title and Description

Verdana is a common sans-serif font that isn't as widely used as it might be. Because it's a little weightier than Arial, I find Verdana a perfect choice for both titles and body text, as you can see in Figure 6.14.

Figure 6.14. Verdana title and description.

While we could code this one with a master <font face="verdana"> code, I find it cleaner to use CSS declarations instead. Here's how this code looks:

<h1 style="text-align: center; font-family: Verdana"> This is the title</h1> <p style="text-align: left; font-family: Verdana"> This is the first paragraph of the description </p> <p style="text-align: left; font-family: Verdana"> This is the second paragraph of the description </p>

Template 6.15. Extra-Large Bold Title

The <h1> HTML tag creates large, bold text. But what if you want your title to be even larger and bolderas shown in Figure 6.15?

Figure 6.15. Extra-large bold title.

There are two solutions to this challenge. The first approach takes the standard <h1> tag and enhances it, by using the <strong> tag and the size="6" attribute within the <font> tag, like this:

<font size="6"><strong> <h1 style="text-align: center; font-family: Arial"> This is the title</h1></strong></font> <p style="text-align: left; font-family: Times Roman"> This is the first paragraph of the description </p> <p style="text-align: left; font-family: Times Roman"> This is the second paragraph of the description </p>

The only problem with this approach is that it only pumps the title text up to about 24 points. The key to making the title even larger is to use CSS declarations within the <h1> attribute tag. Using CSS, we can define a precise type size (36 points) and bold weight.

<h1 style="text-align: center; font-family: Arial; font-size: 36pt; font-weight: bold">This is the title</h1> <p style="text-align: left; font-family: Times Roman"> This is the first paragraph of the description </p> <p style="text-align: left; font-family: Times Roman"> This is the second paragraph of the description </p>

Template 6.16. Large Times Roman Description Text

This template is for those potential buyers who may have poor eyesightwhich, as the eBay population ages, includes more and more people. What we want to do is bump the standard body text up a few points, to make it larger and more legible, as shown in Figure 6.16.

Figure 6.16. Large Times Roman description text.

This code uses CSS declarations to increase the font size in the body of the description to 14 pointswhich should be large enough to see for most people with vision problems or aging eyesight.

<h1 style="text-align: center">This is the title</h1> <p style="font-size: 14pt"> This is the first paragraph of the description </p> <p style="font-size: 14pt"> This is the second paragraph of the description </p>

Of course, when you use this CSS-based approach, you can specify any type size you want. If 14 points isn't big enough, bump it up to 16 points. Or if 14 points is too large, go with a slightly smaller 12 points instead.

Note

You can get a similar effect by using the standard HTML <font> tag and specifying a font size of "4" or larger. The only drawback to the straight HTML approach is that you're only defining relative type size; you can't specify a precise type size, as you can with CSS.

Template 6.17. Arial Title and Times Roman Description with Arial Section Subheadings

If you have a really long text description (more than two paragraphs), it can be a little difficult to hold readers' attention. To that end, "chunking" your text into two or more discrete sections, each with its own subhead, helps improve readabilitywhich ultimately improves the salability of your item. Figure 6.17 shows what I mean.

Figure 6.17. Arial title and Times Roman description, with Arial section subheadings.

The approach we're taking in the following code is to define the subheadings as 12 point bold Arial text. We also want the subheads to be visually connected to the following section text, which we do by using the margin-bottom and margin-top CSS rules, applied to the section headers and section text, respectively. Setting each of these properties 0" positions the section header directly on top of the following section text, which helps the reader register the discrete sections in the description.

<h1 style="text-align: center; font-family: Arial"> This is the title</h1> <p style="text-align: left; font-family: Arial; font-size: 12pt; font-weight: bold; margin-bottom:0"> Subheading 1 </p> <p style="text-align: left; font-family: Times Roman; margin-top:0"> This is the first paragraph of the description </p> <p style="text-align: left; font-family: Arial; font-size: 12pt; font-weight: bold; margin-bottom:0"> Subheading 2 </p> <p style="text-align: left; font-family: Times Roman; margin-top:0"> This is the second paragraph of the description </p>

Template 6.18. Times Roman Title and Description with Larger Overview Section

Back in Chapter 1, "The Good, the Bad, and the Ugly: Do's and Don'ts for Effective Auction Listings," I discussed the value of including a brief overview section before the main descriptive text in your listing. This overview section is even more effective when it's formatted slightly differently from the following textfor example, with slightly larger type, as shown in Figure 6.18.

Figure 6.18. Times Roman title and description with larger overview section.

The coding approach for this template is deceptively simple. All you have to do is define the overview paragraph with a slightly larger type size than the descriptive textin this instance 14 points versus 12 points.

<h1 style="text-align: center">This is the title</h1> <p style="text-align: center; font-size: 14pt"> This is the overview paragraph. </p> <p style="text-align: left; font-size: 12pt"> This is the first paragraph of the description </p> <p style="text-align: left; font-size: 12pt"> This is the second paragraph of the description </p>

Template 6.19. Arial Title with Times Roman Description and Larger Arial Overview Section

Building on the previous template, you can even more effectively set off the overview paragraph by using a different type face than used in the main description. In the template shown in Figure 6.19, we use Arial type for the overview (and title), and Times Roman for the main description.

Figure 6.19. Arial title, Times Roman description, and larger Arial overview section.

Again, the font size shift is effected by using CSS declarations for each element on the page, as shown here:

<h1 style="text-align: center; font-family: Arial"> This is the title</h1> <p style="text-align: center; font-size: 14pt; font-family: Arial"> This is the overview paragraph. </p> <p style="text-align: left; font-size: 12pt; font-family: Times Roman"> This is the first paragraph of the description </p> <p style="text-align: left; font-size: 12pt; font-family: Times Roman"> This is the second paragraph of the description </p>

Template 6.20. Times Roman Title and Description with Smaller Terms of Service

The overview paragraph isn't the only text element that you might want to put in a different type size. Some people call the terms of service (TOS) at the bottom of a listing the "fine print," which leads us to this templatewith the TOS in smaller type than used for the main description, as shown in Figure 6.20.

Figure 6.20. Times Roman title and description, with smaller terms of service.

This code uses CSS declarations to define the font size for each page element. We've also added a bold subhead for the TOS, which is accomplished by use of the <strong> tag for the first line of the TOS paragraph, which then leads (after a line break) for regular-strength text for the body of the TOS.

<h1 style="text-align: center">This is the title</h1> <p style="text-align: left"> This is the first paragraph of the description </p> <p style="text-align: left"> This is the second paragraph of the description </p> <p style="text-align: left; font-size: 8pt"> <strong>Terms of Service</strong><br> This is the terms of service. </p>

Template 6.21. Arial Title with Times Roman Description and Smaller Arial Terms of Service

Another way to set off the TOS is to put it in a different type face. In this template, shown in Figure 6.21, we use Time Roman for the main description and a smaller Arial font for the TOS.

Figure 6.21. Arial title, Times Roman description, and smaller Arial terms of service.

As you can see, the code for this template is similar to that for Template 6.20, with the addition of font-family properties for each page element.

<h1 style="text-align: center; font-family: Arial"> This is the title</h1> <p style="text-align: left; font-family: Times Roman"> This is the first paragraph of the description </p> <p style="text-align: left; font-family: Times Roman"> This is the second paragraph of the description </p> <p style="text-align: left; font-size: 8pt; font-family: Arial"> <strong>Terms of Service</strong><br> This is the terms of service. </p>