devxlogo

CSS: Fonts and Text

CSS: Fonts and Text

Text Values

Absolute: pt/pc/cm/mm/in
Relative: px/em/ex/%

ou can measure most font and text properties in either absolute or relative units. The tables below show the values and their options.

Absolute Units

unitabbreviationexample
pointsptfont-size: 12pt
There are 72 points to an inch, 12 points to a pica.
picaspctext-indent: 2pc
There are 12 picas to an inch.
centimeterscmtext-indent: 4cm
inchesintext-indent: 1in
millimetersmmtext-indent: 8cm

Relative Units

unitabbreviationexample
pixelspxtext-indent: 30px
A pixel is one picture element on the display monitor; there are typically between 72 and 90 pixels/inch.
em spaceemtext-indent: 4em
An em space is the width and height of the capital letter M in the current font size and design.
x spaceexline-height: 3ex
An ex space is height of the body of the current font size and design, about the height of the lowercase letter x.
percentage of
parent’s value
XX%font-size: 90%
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:

  • An absolute unit size, measured in points, millimeters, centimeters, or inches.

    Example: This sets a style rule making paragraphs be 18 point text:

    	p {font-size: 18pt}

    If you are using a CSS-enabled browser, this paragraph appears in 18 point text.

  • An “absolute” text size, using the “absolute” text values. These values are: xx-small, x-small, small, medium, large, x-large, xx-large.

    Example: This sets a style rule making paragraphs be x-small in size:

    	P {font-size: x-small}

    If you are using a CSS-enabled browser, this paragraph appears in x-small size.

  • A relative unit size, measured in pixels or percent. (You can also measure it in ems or exs, but these units don’t really make sense for measuring font-size.)

    Example: This sets a style rule making paragraphs be 120% of the parent paragraph text size:

    	P {font-size: 120%}

    If you are using a CSS-enabled browser, this paragraph appears 120% of the paragraph’s usual point size.

  • A relative unit size, measured as “smaller” or “larger” than the current size.

    Example: This sets an inline style making the paragraph “larger” in size than the current style:

    	

    If you are using a CSS-enabled browser, this paragraph appears “larger” than the paragraph’s usual point size.

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:

	p {font-family: 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.

	p {font-family: helvetica, 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.

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

Font Style: {font-style: normal/italic/oblique}
The font-style property lets you select an italic or oblique stye of your font. This property works hand-in-hand with the font-family property.

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:

	blockquote {font-family: palatino serif; 	font-style: italic}
If you have palatino italic on your system, that’s the face in which you’ll see this example text.
Font Variant: {font-variant: normal/small-caps}
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}

If you have century small caps on your system, that’s the face in which you’ll see the example text.

Font Weight: {font-weight: normal/bold/bolder/lighter/XXX}
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.

Line Height: {line-height: normal/XXunits/%}
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:
The text-indent property controls the amount of indent for the first line of the text element.

Example:

	p {text-indent: 2em}

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.

	P {text-indent: 72pt}

If you are using a CSS-enabled browser, this paragraph has a first line that is indented 72 points.

	blockquote {text-indent: -5%}
If you are using a CSS-enabled browser, this blockquote’s first line is indented a -5%, creating a slight hanging indent.

For Horizontal Alignment: {text-align: left/right/center/justify}
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:

	p {text-decoration: underline}

If you are using a CSS-enabled browser, this paragraph appears underlined.

	P {text-decoration: line-through}

If you are using a CSS-enabled browser, this paragraph appears in “line-through” display mode.

 

Text Transformation: {text-transform: uppercase/lowercase/capitalize/none}
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:

	P {font-size: 18pt; letter-spacing: -2pt}

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.

	P {letter-spacing: 5px}

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.

Word Spacing: {word-spacing: normal/XXunits/%}
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.

devx-admin

Share the Post: