| Text Values
Absolute: pt/pc/cm/mm/in
Absolute Units
Relative Units
|
ou can measure most font and text properties in either absolute or relative units. The tables below show the values and their options. | Font Size: {font-size: XXunits/%/sizevalue} The font-size property lets you specify the size of the element’s text. You can specify text as:
|
| Font Family: {font-family: name,name generic name} The font-family property lets you specify a font for the element’s text. To display, the font must be on the reader’s system folder. Example: This sets a style rule making paragraphs appear in Helvetica: If you are using a CSS-enabled browser and your computer has the helvetica font, this paragraph appears in helvetica. You can list several different families. The browser will look for the faces in order until it finds a match in the system font list. Example: If the reader’s computer doesn’t have helvetica, the browser will look for arial. If you are using a CSS-enabled browser and your computer has the helvetica font, this paragraph appears in helvetica. If it doesn’t have helvetica, it will appear in arial. As a last resort, you can include a generic name as well. The generic names are: serif, sans-serif, cursive, fantasy, monospace. Example: If the reader’s computer doesn’t have helvetica, the browser will look for arial, if it doesn’t find arial it will use any sans-serif face it can find. Font Style: {font-style: normal/italic/oblique} Example: If you wanted to specify the font palatino italic for the blockquote, you’d create two rules?one for font family and one for font style: If you have palatino italic on your system, that’s the face in which you’ll see this example text. |
The font-variant property lets you select a small caps stye of your font. This property works hand-in-hand with the font-family property.
Example: If you wanted to specify the font Century Small Caps for the blockquote, you’d create two rules?one for font family and one for font variant:
blockquote {font-family:century serif; font-variant: small-caps}Font Weight: {font-weight: normal/bold/bolder/lighter/XXX}If you have century small caps on your system, that’s the face in which you’ll see the example text.
The font-weight property lets you select the darkness or lightness of your font. This property works hand-in-hand with the font-family property.
Example: If you wanted to specify the font helvetica or arial bold for the paragraph, you’d create two rules?one for font family and one for font weight:
p {font-family:helvetica, arial, sans-serif; font-weight: bold}If you have helvetica or arial bold on your system, that’s the face in which you’ll see this example text.
You can also uses the font-weight property to specify relative boldness, with the values bolder or lighter. The browser darkens or lighten the boldness of the text based on the parent element.
Another variation on weight is using the numeric value 100, 200, 300, 400, 500, 600, 700, 800, or 900. A value of 400 is the equivalent to a medium or book-weight font. A value of 700 is the equivalent of a bold font.
The line-height specifies the space from the baseline of one line of text to the baseline of the next.
If you are familiar with typesetting, you’ve called this measurement leading. If you worked with desktop publishing, you may have called it line space.
You can specify line height in either absolute (most likely points) or relative (mostly likely percentage) values. The line height you use will depend on the font style and size. Some fonts look better with more “breathing space” while others work best set more solidly. Good starting points to try are 12 point text with 14 point line height or 120% line height.
Example:
P {font-size: 10pt; line-height: 12pt}If you are using a CSS-enabled browser, this paragraph is 10 point text with a line-height value of 12 points. Or, as we used to say in typesetting-speak, it is 10/12… “10 on 12.”
P {font-size: 14pt; line-height: 28pt}If you are using a CSS-enabled browser, this paragraph is 14 point text with a line-height value of 28 points. It should look “double-spaced.”
P {line-height: 120%}If you are using a CSS-enabled browser, this paragraph has a 120% line-height value. The actual amount of space from baseline to baseline will change with the size of the text.
| Text Indent: <{text-indent: XXunits/%} The text-indent property controls the amount of indent for the first line of the text element. Example: If you are using a CSS-enabled browser, this paragraph’s first line is indented 2 em spaces. Change the point size and the indent will adapt to the new size. If you are using a CSS-enabled browser, this paragraph has a first line that is indented 72 points. If you are using a CSS-enabled browser, this blockquote’s first line is indented a -5%, creating a slight hanging indent. |
The text-align property aligns the element horizontally across the page or within the division.
Example:
p {text-align: right}If you are using a CSS-enabled browser, this paragraph is aligned to the right side of the browser window page. Each line within the paragraph is “flush right,” abutting the right margin.
P {text-align: center}If you are using a CSS-enabled browser, this paragraph is centered. Every line in the paragraph is centered across it container, whether that is the page or a division within the page.
| Text Decoration: {text-decoration: underline/overline/line-through/blink} The text decoration property lets you make the text appear underlined or with a line through it. Blink and overline are options in the spec, but neither works consistently across browsers and neither adds much value to the presentation. Example: If you are using a CSS-enabled browser, this paragraph appears underlined. If you are using a CSS-enabled browser, this paragraph appears in “line-through” display mode.
|
The text transformation (text-transform) property lets you control the element’s capitalization in spite of how the original text is cased.
Example:
p {text-transform: uppercase}If you are using a CSS-enabled browser, this paragraph is displayed in all caps.
p {text-transform: lowercase}If you are using a CSS-enabled browser, this paragraph is displayed in all lower case.
p {text-transform: capitalize}If you are using a CSS-enabled browser, this paragraph has the first letter of each word capitalized.
| Letter Spacing: {letter-spacing: normal/XXunit/%} The letter-spacing property lets you control the amount of space between each letter in a text block. When combined with DHTML features, this property can make your text animate across the page, as with the headline in Expanding Your Mind. Traditionally, the letterspacing you use varies depending on the typeface you use, and the value you choose can make your text look “loose” or “tight” and create better readablity of the text block. However, on the Web, percentage values (which would lend themselves to this type of presentation) are not currently supported in the expected manner. As a result, it is best to think of the effect of letter spacing as something more akin to adding extra spaces or removing spaces between letters on a typewriter. You can specify the size of those extra spaces in any of the measurement units, such as pixels or points. Example: If you are using a CSS-enabled browser, this paragraph has a font size of 18 point and a letter spacing value of negative 2 points. The space between each letter is reduced 2 points, creating a block of letters that squish against each other. If you are using a CSS-enabled browser, this paragraph has a letter spacing value of 5 pixels. That means 5 extra pixels are inserted between each letter in the text block. |
The word-spacing property lets you control the amount of space between words.
Currently, this property is not supported by any commercial browser except IE 4.01 for Mac, but it probably will be supported in future browser releases. You can specify the size of the space between words in any of the measurement units, such as pixels or points.
Example:
P {word-spacing: -2pt}If you are using a CSS-enabled browser, this paragraph has a word spacing value of negative 2 points. The space between each word is reduced 2 points, creating a block of words that squish against each other.
P {word-spacing: 10px}If you are using a CSS-enabled browser, this paragraph has a word spacing value of 10 pixels. That means 10 extra pixels are inserted between each word in the text block.
