Brought to you by Layout Master page layout editor

text style properties

Text style properties affect how text appears on a page. While appearance-based HTML gave you some control over font, font color, font size and font weight, CSS extended extends and gives much more sophisticated control.

CSS1 provided the following text properties:

color
font-weight
font-family
font-size
font-style
text-decoration
text-transform

CSS2 introduced

text-shadow
font-size-adjust
font-stretch

color

What it does

This property sets the foreground color of an element. Essentially this means the text color.

Possible values

The color property, not surprisingly, takes color values. For a detailed description of color values, see our section on values.

Default values

There is no specified default color value. The color chosen when this property is not set is dependent on the browser. The value that a browser uses by default is likely to be black (#000), but remember, most browsers allow users to specify default text characteristics, and it is the user's preference which may well be used as the default value for color.

Is it inherited?

Child elements inherit the color of their parent elements. Remember, inherited properties can be overridden.

Hints and suggestions

Non US speakers of English please note that colour is not an accepted variant spelling for the purposes of CSS syntax.

Browser support

Detailed browser support information for this feature can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table.

font-weight

What it does

The weight of a font is how bold it is. The font-weight property affects how heavily text is drawn on a page.

Possible values

font-weight may take two kinds of values, keywords and numerical values.

You may use the following absolute keywords: normal, bold,

or the following relative keywords: bolder, lighter.

bolder specifies that the text should be one degree bolder than the text of the parent element.

lighter specifies that the text should be one degree lighter than the text of the parent element.

font-weight can also be specified using numerical values: 100, 200, 300, 400, 500, 600, 700, 800, 900.

Each value is one degree bolder than the previous. normal is equivalent to 400. bold is equivalent to 700.

Default values

By default, the font-weight of an element is normal.

Is it inherited?

Elements have the same absolute font-weight as their parents. This means an element inherits the numerical value of its parent, or the keyword values of normal or bold. If the parent element's font weight is a relative value, say bolder, the child will be drawn with the computed font-weight of its parent.

Hints and suggestions

As you can see from the browser support information below, while font-weight has largely been supported by browsers for a long time, particular implementations have varied. It is safe to use the value bold to create text that will appear bold, and normal to create text that will appear not bold. Beyond this though, there will always be some degree of variation in how values are actually drawn in user agents.

Browser support

See the Westciv CSS Guide, or our CSS Browser Support Table.

font-family

What it does

If you are familiar with the <font face="font name"> element in HTML, you'll find that the font-family property works similarly. This property specifies a hierarchical list of preferred fonts that a browser should use to draw the element.

A browser will use the first font in the list which is installed on the system it is running on.

Because none of the desired fonts may be on the system a browser is running on, CSS introduces the idea of a font family. A font family is a generic name for a type of font. The specified font families are:

serif (e.g. Times)
sans-serif (e.g. Helvetica)
cursive (e.g. Zapf-Chancery)
fantasy (e.g. Western)
monospace (e.g. Courier)

CSS2 introduced the concept of system fonts. The font-family in CSS2 can be specified as one of several system fonts, that is one of the fonts that the system uses for its major components, such as menu items and window titles. When a system font is chosen, the font family, size, weight and style that the system uses for this kind of item (for example for menu items) are all used.

Possible values

The font-family property is a list of font names and font family names. Each item in the list is separated by a comma.

Font names should be capitalized. So for example, write Ariel, not ariel. When the name of a font is more than one word, it should be quoted, as in "Times New Roman".

System fonts can be one of the following

caption Used for (captioned controls (e.g. buttons, drop-downs, etc.).
icon Used to label icons.
menu Used in menus (e.g., dropdown menus and menu lists).
messagebox Used in dialog boxes.
smallcaption Used for labeling small controls.
statusbar Used in window status bars.

Note that when one of these values is used, this affects the choice of font, along with the style, size and weight of the font. If these values are also set, they are overridden by the style, size and weight that the system uses for drawing the chosen element.

Default values

There is no specified default value for font-family. It is up to browsers to choose a default font. As with other properties, users can often specify their own default font in a browser.

Is it inherited?

An element will have the same font as its parent element, unless it has a font-family property of its own.

Hints and suggestions

The font-family property helps you go a long way to ensuring that your text looks a lot like what you want it to on various platforms, as each operating system usually has a default set of fonts, which largely differ from those of other users. By using a list of fonts, you can provide alternatives for the major operating systems. It is recommended that you choose a generic font family as the last option in the font-family list. This ensures some semblance of your design being displayed in the reader's page.

Keep in mind that there are a number of free fonts designed specifically for onscreen reading that are becoming widely distributed. These include Verdana, Minion Web, Georgia and others. These might be good options.

Browser support

h3>

See the Westciv CSS Guide, or our CSS Browser Support Table.

h3>

See the Westciv CSS Guide, or our CSS Browser Support Table.

font-size

What it does

The font-size property lets you specify how large text appears on a web page. With HTML, you are restricted to 7 relative sizes that have no relationship with traditional type measurements such as points, ems, exs and picas. Nor do HTML text sizes even have any relationship with pixels.

CSS allows you to specify the size of font in any of these measures, and in a number of other ways.

Possible values

Length values

The font-size property can specify the size of a text element in several units. You can specify font sizes in the following units:

points
ems
exs
picas
pixels
inches
millimeters
centimeters

In our section on values, we cover each of these in some detail.

Keyword values

In addition, font-size can be specified using both relative and absolute keywords.

The following are the relative keywords: larger and smaller

larger specifies a font-size one degree larger than the parent element.

smaller specifies a degree smaller than the parent element.

As with all keyword values the exact appearance is determined by the browser, and the same text may appear differently in different browsers.

The absolute keywords are:

xx-small
x-small
small
medium
large
x-large
xx-large

Again, it is up to the browser to determine the exact appearance of text that has a keyword font-size property applied to it.

Default values

By default, text appears with a font-size of medium. Keep in mind, it is a matter for browsers to determine what this size in fact appears like.

Is it inherited?

Yes - the size of text is the same as that of the element which contains it, unless a font-size is applied to it.

Hints and suggestions

The choice of how to specify font-size is quite tricky. Note that specifying size in absolute values such as points and pixels is very problematic. 9pt text on a Windows computer might look acceptable, but may be illegible on a Macintosh, due to their differing logical resolutions. Rather than go into detail here, you might like to take a look at this discussion of text sizes by a renowned web page developer, Tod Fahrner.

Note that the keyword medium will not necessarily be the same as the default text size.

Browser support

See the Westciv CSS Guide, or our CSS Browser Support Table.

font-size-adjust

What it does

CSS2 introduced this sophisticated property to allow for better substitution of fonts when a first choice font is not available.

The font-family property allows the specification of several fonts to be used for an element. When the first choice font is not available, the browser will use the next font in the list that is available, or failing that a generic font. For more see the font-family property. This leads to problems, because very few fonts have similar "metrics", that is, look similar.

One of the important aspects of fonts that make them look similar is the ratio between the font-size of the font, and the x-height of the font. If you divide the font-size by the x-height you get what is called the aspect ratio of a font. Fonts with a similar aspect ratio look similar (to be more precise, are very similar in their apparent size when given the same size in pixels, points, etc.). The higher the aspect value, the more likely it is that a font at smaller sizes will be legible. By scaling fonts based on their aspect ratio, similar sized text will appear, regardless of the font that is actually used.

With font-size adjust you can specify an aspect value that will preserve the x-height of your first choice font in the substitute font that is actually used.

Possible values

font-size-adjust takes a value of none, or a decimal value.

When a value of none is specified, the aspect ratio of the second choice font is not adjusted.

When a decimal value is specified, the aspect ratio of the font that is actually used is scaled using this value so that it appears similar in size to how it would appear were the first choice font available.

Default values

By default, font-size-adjust is set to none.

Is it inherited?

font-size-adjust is inherited, but it is the parent's font-size, not the adjusted font-size that is inherited.

Browser support

See the Westciv CSS Guide, or our CSS Browser Support Table.

font-variant

What it does

The font-variant property lets you specify that text should appear in small capitals.

Possible values

font-variant can take the value of normal or small-caps.

normal specifies that text should appear using capital or lowercase letters as it appears in the source.

small-caps specifies that lowercase letters (but not capitals) should appear as small capital letters. These are capital letters that have more or less the same size as the lowercase letters. Letters which are capitalized in the source appear as they would normally.

Default values

By default, text appears with a font-variant of normal.

Is it inherited?

The variant of text is inherited from a parent element.

Browser support

h3>

See the Westciv CSS Guide, or our CSS Browser Support Table.

font-style

What it does

In traditional typography, there are several different styles of font. With CSS, you can specify the style of the font that is to be applied to an element, using the font-style property.

The three styles of font supported by CSS are normal, italic and oblique. Without going into any detail, normal font is the standard form of a font, referred to as "roman" in traditional typographic terminology. italic and oblique font-styles will in all likelihood appear the same. It is beyond the scope of this discussion to go into detail about why, and what exactly the difference is.

Possible values

The font-style property can take one of three values: normal, italic and oblique.

Default values

If not otherwise specified, the font-style of an element is normal.

Is it inherited?

The font-style of an element is that of its parent element, unless a font-style is specified for the element.

Hints and suggestions

You probably think of italic as a style (or cue), as this is the way that desktop publishing categorizes the effect. CSS in part uses more traditional typographical terminology and concepts, in addition to DTP. Italic is often thought of in the same breath as underlining, and other visual effects. The text-decoration property, discussed below, provides control over a number of these kinds of effect.

Browser support

See the Westciv CSS Guide, or our CSS Browser Support Table.

font-stretch

What it does

CSS2 introduced the font-stretch property. This allows you to condense and expand the characters of text.

Possible values

Keyword Values

font-stretch takes one of 9 absolute keyword values, which specify how far the text is expanded or condensed. These keywords are

ultra-condensed
extra-condensed
condensed
semi-condensed
normal
semi-expanded
expanded
extra-expanded
ultra-expanded

In addition, font-stretch takes one of two relative keywords, wider and narrower.

Default values

By default, text appears with a font-stretch of normal. Keep in mind, it is a matter for browsers to determine what this in fact appears like.

Is it inherited?

The stretch of text is the same as that of the element which contains it, unless a font-stretch is applied to it.

Browser support

See the Westciv CSS Guide, or our CSS Browser Support Table.

text-decoration

What it does

The text-decoration property enables you to specify a number of effects that might be thought of as styles. With text-decoration you can apply the following styles to text: none, underline, overline, line-through, blink.

An element can have either a text-decoration of none, or any number of the other styles.

Possible values

text-decoration can be either none, or a list of one or more of underline, overline, line-through, blink. If there is more than one value in the list, values are separated by spaces.

Default values

By default, the text-decoration of an element is none.

Is it inherited?

Technically, text-decoration is not inherited. In practice, it is.

Confused? If you aren't interested, assume that text-decoration is inherited. If you are interested in what I mean, read on.

text-decoration spans an entire element, and so affects child elements. Even though they don't strictly inherit the property, they will be affected by it.

The value underline for the property text-decoration has a special quality which makes it different to the other values for this property. When a parent element has the value underline, children of that parent should also be underlined, even when those children are given a text-decoration value of none.

Also when a child element inherits underline and the child is a different color from its parent then the underlining should be the same color as the parent, regardless of the color of the child.

Hints and suggestions

Many of what we might think of as styles (thinking in word processing terms) are lumped into this property. If you are looking for other related styles, you might look at font-weight for bold, font-style for italic, and font-family to specify the font in which an element appears.

Browser support

h3>

See the Westciv CSS Guide, or our CSS Browser Support Table.

text-transform

What it does

text-transform allows you to specify the capitalization of text. There are three types of capitalization, and as well you can specify that an element not be affected by text transformation.

Possible values

The text-transform property allows you to ensure that an element conforms to a specific type of capitalization. The three types of capitalization supported are

capitalize, where every word is capitalized, ie the first letter of each word is in capital letters
uppercase, where every letter is in uppercase
lowercase, where every letter is in lowercase

Regardless of the actual capitalization of the text in the source, the browser transforms the text to conform to the desired capitalization.

Alternatively, you can specify a text-transform of none. This ensures that inherited text-transform values have no effect.

Default values

By default, an element has a text-transform of none.

Is it inherited?

Elements have the text-transform value of their parent element.

Hints and suggestions

Many properties, among them text-transform, have a possible value of none. These values exist to let you override the effect of inherited values.

Browser support

h3>

See the Westciv CSS Guide, or our CSS Browser Support Table.

text-shadow

What it does

CSS2 introduced the text-shadow property.

text-shadow allows the simple creation of text shadow effects. The drop shadow is the most commonly seen version of these).

Text shadows are specified by a series of shadow effects that can be applied to the same element simultaneously.

A shadow effect is specified by setting the top left hand corner of the effect (for example to drop it below or push it above the text being shadowed), as well as an optional radius value that determines the extent of the blur in the effect. All of these can be specified using various units.

In addition, a color can be specified for the effect, using any of the possible color units (keywords, rgb and hexadecimal values). For more on color units see our section on color values.

Possible values

text-shadow is a list of shadow effects, each separated by a comma.

A shadow effect is specified by two unit values (for the top and left hand side of the effect) and an optional blur radius, all of which can be specified in any length units (pts, pxs, ems, exs, etc.).

In addition a color value can be specified in any of the ways in which colors can be specified.

Default values

If no text-shadow is specified, the text-shadow of an element is none.

Is it inherited?

An element does not inherit the text-shadow of its parent.

Hints and suggestions

There was a time in web design history when the drop shadow effect available in applications such as Photoshop was used extensively to create image-based text which made web pages conform to a certain fashionable design language. The inclusion of the text-shadow property in CSS2 was an attempt to discourage the practice of using images instead of text. Unfortunately no real attempts have been made to implement this property in any browsers. Ironically, fashion has moved on and the whole text shadow effect is no longer very popular either.

Browser support

next: text layout properties