*** From the Archives ***

This article is from April 19, 2002, and is no longer current.

Understanding Typography Controls with CSS

This story is taken from “Inside Web Design” (Element K Journals).

Creativepro.com readers can subscribe to Element K Journals at a discount. Click here to learn more.


Cascading Style Sheets (CSS) aren’t a new thing. The CSS standard was finalized by the W3C back in 1996. What’s new is that most of the popular browsers finally support CSS pretty well. In the last year, there’s been a big improvement in browser support of CSS and there’s little reason not to start incorporating CSS into your site design.

One of the big advantages of CSS is in the area of typographic control, as illustrated in the example, using 100 percent text, shown in Figure A. Typography has been a big sore spot on the Web, as HTML gives next to no control over typography compared to what’s available in page layout applications. Because of this, many designers have found the Web to be a frustrating and ugly place. As you’ll see, that isn’t entirely true any longer.

It’s All About Style
To get an idea of how CSS has come of age, we’ll provide you with an overview of the properties and information that you’ll need to know to make your pages better looking, more compatible, and easier to read with CSS. First, we’ll take a look at how CSS was first developed and then how it’s changed over the few years of its existence. Next, we’ll show you how to use it to precisely position type, including a discussion on margins, indents, kerning, leading and word spacing. We’ll then take a look at how units are defined within CSS and finish up by discussing compatibility issues.


Figure A: This site is an example of what can be done with just text and CSS.

CSS to the Rescue
When the specifications for CSS were being de-veloped, much time was invested in its typographic abilities. Understandably, many designers wanted to have control similar to what they had in print, so the W3C added a lot of text properties to the standard. Unfortunately, it’s taken almost five years for browsers to implement CSS standards to the point where you can take advantage of its benefits without having to worry about it breaking all the time.

A Better Type of Type
Due to the limitations of HTML, typography on the Web has been pretty grim, forcing designers to use graphical text anywhere on their pages where looks are important. With just HTML, you can’t do much with text. You’re pretty much limited to determining your font and its size from one of the seven sizes of text that can be set through the font-size property. Text layout is mostly limited to right, left and center justification and whatever you can hack together using tables. There’s no way to refine the appearance of text using just code.

Fortunately, CSS adds quite a few new prop-erties to type-some of which are basic and versatile, such as the font-size property. This property denotes any size of font you want from 1 pixel to 10 inches. Another basic property is the text-align property, which works much like justification in HTML.

While the previous properties we outlined cover those that HTML can handle, CSS also allows you to specify much more, including all aspects of the margins for a body of text (top, bottom, left and right). They’re set by the margin-top, margin-bottom, margin-right and margin-left properties. These can be set independently or together, and nested styles will combine their margins together. You can also indent specific lines using the text-indent property. This property is added on to any margins that you’ve already set.

By utilizing a little trick, you can even specify a hanging indent. If you specify a negative value for the text-indent property, you’ll cause the first line of your text block to be indented less than the remaining lines, thus creating a hanging indent.

Kerning and Leading
Probably the most interesting of the new properties are the kerning and leading settings. If you don’t already know, kerning is the spacing between letters and leading is the spacing between lines. Leading controls are an especially nice feature of CSS, as there’s no such thing as one-size-fits-all leading. Some fonts need more, while others need less to make them more readable.

About Kerning
There are actually two types of kerning, or horizontal text spacing, in CSS. One type is letter-spacing, which is the standard type of kerning. This modifies the space between each letter of a word. This allows you to deal with problematic letters such as A, W and T. Because CSS also supports the em unit, which we’ll discuss later, you can use traditional kerning units to adjust letter spacing if you want to.

You probably wouldn’t want to kern an entire text block, as creating the styles for such a venture would be hideously time consuming. You may, however, want to adjust kerning for headlines or subheadings.

CSS also supports a form of tracking called word-spacing, which only affects the distance between each word. However, both letter-spacing and word-spacing should be used sparingly. While they can add a nice effect or improve readability if used properly, they can also easily reduce the readability of your text if you’re not careful with them.

Fine-tune Leading
Leading is controlled by the line-height property. This property specifies the distance from the baseline of one line to the baseline of another line. Like most software programs, the CSS default leading is 120 percent of the type size. So, if your text is 14 points, then your leading is about 17 points. As your type size increases, automatic leading starts to look too spacious, especially in headlines. You may want to specify less leading to make headlines and such hold together visually. In print, this is called set solid, which is when the leading and the font size are equal.

Weight and Style
Font weight refers to how heavy the font is. The CSS standard supports nine different font weights from 100 to 900. Unfortunately, most browsers only support one or two. The font-weight property can be set as a number (100 to 900) or as a name-bold, bolder or lighter. Internet Explorer 5+ and Netscape Navigator 4.5+ support bold and bolder, but not lighter. These names can also be referred to as 600 and 700+. Netscape 6 supports only one bold, which is 600+. Currently, no browser supports lighter and everything under 600 is shown as normal.

A number of different styles can be changed for your fonts. The only one actually set by the font-style property is italics and it functions much like the <I> tag in HTML. In addition, there’s the font-variant property, which allows you to set small caps for the font. Unfortunately, this is only supported in NS 6+ and Opera. In IE 5, the font is shown in all caps but not small caps.

Another text style property is text-transform. This allows you to force the case of the text in your paragraph. The property values are capitalize, uppercase and lowercase. Capitalize automatically capitalizes the first word in each paragraph and upper- and lowercase force the case of the whole paragraph.

Finally, there’s the text-decoration property. This property allows you to apply styles like underline, overline and line-through. You can even set your hyperlinks as none to remove the underline from your links if you really feel like it. This isn’t recommended, as the underline helps users easily identify hyperlinks.

It’s Units, not Size, that Matters
CSS gives you a bewildering array of options when it comes to specifying the size of items and text on your pages. There are 10 different units for designating size in your style sheets. These are broken down into two categories, absolute and relative. Interestingly enough, all the modern browsers (NS 6+, IE 5+, Opera 5+) interpret the units the same. NS 4.5+ has a slightly different interpretation of all units, though the sizes are similar.


1 2 Next

>
Notice: We use cookies on our websites to give you a great online experience. If you keep browsing, we'll assume you're ok with this. For more information, see our privacy policy. By closing this banner, you agree to the use of cookies.I AGREENo