Changing the Appearance of Text

Adding Bold and Italics

A big part of editing a web page is changing the text to suit your needs and your design. One of the first things you can do is make your text bold or italic. There are two ways to do this.

This way would be used if the change was just for mere decoration.

<b>bold</b>
<i>italics</i>

However if you are trying to convey meaning you would want to use one of these. They will change the tone a screen reader uses for a blind person to reflect what you have made bold or italic.

<strong>bold</strong>
<em>italics</em>

You can also make text bold (for decoration) through the use of CSS.

p { font-weight:bold; }

You can also use numbers ranging from 100 - 900 to set your level of bold. Although they will only all work if your font has a file a different set of weights for each number.

Adding Text Decorations

Let's say you want to underline your text, you could do it by using the text-decoration tag.

p { text-decoration:underline; }

This will also work for links to remove the underline if you change the value to none.

Changing Your Font Family

Changing your font family is both simple and difficult. The computer will only use a font if it is currently on the system so you need to specify a list of fonts you would be happy with. The last on the list being either serif, sans-serif, script or fantasy. You can test which fonts it will target on these by putting typos in the names of your other fonts, just make sure to fix them afterwards. If you font has more than one word in the name, make sure to put it in quotes.

p { font-family:helvetica, arial, sans-serif; }

The other option, to avoid a large amount of this hassle is to use a service like Font-Squirrel. They will create a package to embed your font and provide you with the files and the CSS to make it work. Just make sure to upload your font files with your website and link the external CSS like you were show in the layout section, or copy and paste it into your own CSS.

Changing Your Font Size

The size of your text should generally be changed through the use of percentages or ems. The only exception to this is if you are making the size of your text relate to something else that is measured in pixels, like an image for example.

p { font-size:2em; }

Changing Text Alignment

Text alignment is easily changed through the use of the text-align property. You can set your alignment to either left, right, or center.

p { text-align:center; }

Changing Leading And Tracking

When considering your font size you also want to be able to change your leading and tracking. The tracking doesn't play as large a role in readability. But your leading should always be at least 140% for optimal readability.

p { line-height:140%;
letter-spacing:5px; }

Changing Text Color

When picking a color you also want to consider readability, if the colors are to close together people may not be able to read them. There is a contrast calculator that can be used to determine if people will have issues reading your text.

p { color:#00ff00; }

The biggest thing to keep in mind with text is that it should always be easy to read, otherwise you will be turning people away from your web page, and thus turning away business.