Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Text-formatting in CSS

Saturday, August 17th, 2013 by Servage

The Font Properties

When I design a text document (for print or the Web), one of the first things I do is specify a font. In CSS, fonts are specified using a little bundle of font related properties for typeface, size, weight, and font style.

Here are some important syntax requirements:

  • All font names, with the exception of generic font families, must be capitalized. For example, use “Arial” instead of “arial”.
  • Use commas to separate multiple font names, as shown in the second and third examples.
  • Font names that contain a character space must appear within quotation marks.

Specifying font size

Use the aptly named font-size property to specify the size of the text.

You can specify text size in several ways:

  • • At a specific size using one of the CSS length units , as shown here:
h1 { font-size: 1.5em; }
  • As a percentage value, sized up or down from the element’s default or inherited font size:
h1 { font-size: 150%; }

Using one of the absolute keywords (xx-small, x-small, small, medium, large, x-large, xx-large). On most current browsers, medium corresponds to the default font size.

h1 { font-size: x-large; }

• Using a relative keyword (larger or smaller) to nudge the text larger or smaller than the surrounding text:

strong { font-size: larger; }

Working with keywords

The keywords do not correspond to particular measurements, but rather are scaled consistently in relation to one another. The default size is medium in current browsers. The benefit of keywords is that current browsers won’t let text sized in keywords render smaller than 9 pixels, so they protect against illegible type. On the downside, keywords are imprecise and unpredictable. For example, while most browsers scale each level up by 120%, some browsers use a scaling factor of 150%.

The below image shows how each of the absolute keywords renders in a browser when the default text is set at 16 pixels.


Font weight (boldness)

After font families and size, the remaining font properties are straightforward. For example, if you want a text element to appear in bold, use the font-weight property to adjust the boldness of type.

The font-weight property has many predefined values, including descriptive terms (normal, bold, bolder, and lighter) and nine numeric values (100 to 900) for targeting various weights of a font if they are available. Because most fonts commonly used on the Web have only two weights, normal (or roman) and bold, the only font weight value you will use in most cases is bold.

Font style (italics)

The font-style property affects the posture of the text, that is, whether the letter shapes are vertical (normal) or slanted (italic and oblique). Italic and oblique are both slanted versions of the font. The difference is that the italic version is usually a separate typeface design with curved letter forms, whereas oblique text takes the normal font design and just slants it.

Changing Text Color

Using the color property is very straightforward. The value of the color property can be a predefined color name or a numeric value describing a specific RGB color. Here are a few examples, all of which make the h1 elements in a document gray:

h1 { color: gray; }
h1 { color: #666666; }
h1 { color: #666; }
h1 { color: rgb(102,102,102); }

Color is inherited, so you can change the color of all the text in a document by applying the color property to the body element, as shown here:

body { color: fuchsia; }

For the sake of accuracy, I want to point out that the color property is not strictly a text-related property. In fact, according to the CSS specification, it is used to change the foreground (as opposed to the background) color of an element. The foreground of an element consists of both the text it contains as well as its border.

When you apply a color to an element (including image elements), that color will be used for the border as well, unless there is a specific border-color property that overrides it.

Text-formatting in CSS, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials, Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.