Chapter 12: Formatting Text

Basic Font Properties

Specifying the Font Name

font-family
Value
one or more font or generic font family names, separated by commas
Default
depends on the browser
Applies to
all elements
Inherits:
yes
Notes
  • Specifies the use of a font, list of fonts, and/or font family.
  • Font names are capitalized.
  • Font names with spaces must be in quotes.
  • Font families are not capitalized.

Examples

  • body { font-family: Arial; }
  • var { font-family: Courier, monospace; }
  • p { font-family: "Duru Sans", Verdana, sans-serif; }

Examples: Generic Font Families

  • serif
  • sans-serif
  • monospace
  • cursive
  • fantasy

Specifying Font Size

font-size
Values: length unit, percentage, or size keywords.

Examples

  • h1 {font-size: 1.5em; }
  • h1 {font-size: 150%; }
  • h1 {font-size: x-large; }
  • strong {font-size: larger; }

Size Keyword Values

  • xx-small
  • x-small
  • small
  • medium, default
  • large
  • x-large
  • xx-large
  • smaller, relative to surrounding text
  • default size
  • larger, relative to surrounding text

Font Weight (Boldness)

font-weight
Most fonts don't have more than one bold weighting, so there will be no difference between using various bold values.

Examples:

  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
font-style
This is essentially the option for italics. Though both 'italic' and 'oblique' are value options, they will usually be displayed exactly the same way.

Examples:

  • normal
  • italic
  • oblique

Font Variant in CSS2.1 (Small Caps)

font-variant
The original font-variant property from CSS2.1 only had the effect of changing text into having 'small caps'. CSS3 has many new font-variant properties, but font-variant can still be used for small caps as well.

Examples:

  • normal > "HEY! Listen, Link."
  • small-caps > "HEY! Listen, Link."

Font Stretch (Condensed and Extended)

font-stretch
If a browser cannot find a font that includes a stretched or condensed version, it will not try to synthesize the difference.

Examples:

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

The Shortcut font Property

font (shortcut property)
The font property allows you to combine all the font properties into one line for convenience. Only the small-caps 'font-variant' can work with this property. The order of values is important for this property. A font property must include a font-size value and a font-family value in that order. However, aside from this, other properties can be placed in any order before the size property. Any omitted properties default to 'normal', NOT to the browser default properties. For example, heading elements are bold by the default browser style rules, but when 'reset' in a font property without being specified to be bold again, it will default to 'normal' and lose the bold property.

Font Syntax

selector{ font: style weight stretch variant size/line-height font-family; }

Examples:

  • p {font: 1em sans-serif; }
  • h1 {font: bold 1.5em Georgia, serif; }

Advanced Typography with CSS3

Font Variant in CSS3

The new font-variant types in CSS3 aim to give access to special characters (glyphs) in fonts. Here is a list of new font-variant types.

  • font-variant-ligatures
  • font-variant-caps
  • font-variant-position
  • font-variant-numeric
  • font-variant-alternates
  • font-variant-east-asian

Other CSS3 properties

  • font-size-adjust
  • font-kerning
  • font-featuer-settings
  • font-language-override

Changing Text Color

Though the color property effects the font color, it is not a 'font-specific' property. It is a property that effects the 'foreground', which includes both the text and border.

color

Examples (all same color):

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

Text Line Adjustments

Line Height

line-height

Defines the minimum distance from baseline to baseline in text.
A baseline is the line upon which the bottoms of characters sit.
Extra space is split evenly between above and below the text.
Thus, the line-height defines the height of a line-box in which the text line is vertically centered.
These examples all have the same result of making the line height double the font size.

Examples:

  • p {line-height: 2; }
  • p {line-height: 2em; }
  • p {line-height: 200%; }

Indents

text-indent

Percentage values are calculated based on the width of the parent element and passed down to their descendant elements as percentage values as well. Negative values can be used for a text indent, called a 'hanging indent', but include adequate left padding space to accommodate the hanging indent so that it does not run off the page.

Examples:

  • p#1 {text-indent: 2em; }
  • p#2 {text-indent: 25%; }
  • p#3 {text-indent: -35px; }

Horizontal Text Alignment

text-align

The effect of justify shall only appear when text is long enough that it starts to wrap back around to the next line down. The start and end values specify the side of the line box the text should align to. This accommodates languages that are written vertically and right to left. Som examples of such languages include Arabic, Hebrew, and Persian/Farsi. Chinese, Korean, and Japanese are flexible and can be written left to write, side to side, or from top to bottom with lines reading from right to left.

Examples:

  • left
  • right
  • center
  • justify
  • start
  • end

Underlines and Other "Decorations"

text-decoration

The value options include: none, underline, overline, line-through, and in some older browsers, blink. The most popular use of text-decoration is actually 'none', in order to remove the underline on link elements. Sometimes a bottom-only border may be added to links instead for a thinner or more stylish underline effect.

Changing Capitalization

text-transform

The value options include 'none', capitalize, LOWERCASE, uppercase, full-width. Full-width is a niche option that will choose a 'full-width' version of a character if one exists, and this has low browser support.

Examples:

  • none
  • capitalize
  • lowercase
  • uppercase
  • full-width

Spaced Out

letter-spacing, word-spacing

Examples:

  • normal (both)
  • length measurement, 8px (letter-spacing)
  • length measurement, 1.5em (word-spacing)

Text Shadow

text-shadow

text-shadow: ‘horizontal offset’ ‘vertical offset’ ‘blur radius’ ‘color’

Examples:

  • h4 {text-shadow: 0 0.2em skyblue; }

  • h4 {text-shadow: -0.3em -0.3em silver; }

  • h4 {text-shadow: 0.2em 0.2em 0.1em gray; }

  • h4 {text-shadow: 0.2em 0.2em 0.3em black; }

Changing List Bullets and Numbers

Choosing a Marker

list-style-type

Unordered lists, ordered lists, and list item elements can all have their bullets modified via this property. Note that these list style properties apple to 'elements whose display value is list-item'. This means any element can perform like a list item by settings its 'display' property to 'list-item'. This property can be applied to any HTML element or elements in other XML languages.

In the example below, this would bullet or number a series of paragraphs by setting the display property of p elements to list-item lik so.

Examples:

p.lettered { display: list-item; list-style-type: upper-alpha; }

  • none
  • none
  • none

  • disc
  • disc
  • disc

  • circle
  • circle
  • circle

  • square
  • square
  • square

  • decimal
  • decimal
  • decimal

  • decimal-leading-zero
  • decimal-leading-zero
  • decimal-leading-zero

  • lower-alpha, lower-latin
  • lower-alpha, lower-latin
  • lower-alpha, lower-latin

  • upper-alpha, upper-latin
  • upper-alpha, upper-latin
  • upper-alpha, upper-latin

  • lower-roman
  • lower-roman
  • lower-roman

  • upper-roman
  • upper-roman
  • upper-roman

  • lower-greek
  • lower-greek
  • lower-greek

  1. ordered list
  2. ordered list
  3. ordered list
  4. Note that even when not beginning as an ordered list or when having non-continuous ordered style within a list, the numbers, or other ordered list style types, 'hold their place' in the order. Like so:
  5. ordered list

Marker Position

list-style-position

This property allows you to pull list bullets inside the content area, rather than hanging outside of the content area like the default. This can be applied to ordered lists, unordered lists, and list items.

The hanging value is similar to the inside value, but the markers appear outside and abutting the left edge of the shaded area.

Examples:

  • outside
  • This property allows you to pull list bullets inside the content area, rather than hanging outside of the content area like the default. This can be applied to ordered lists, unordered lists, and list items.
  • This property allows you to pull list bullets inside the content area, rather than hanging outside of the content area like the default. This can be applied to ordered lists, unordered lists, and list items.

  • inside
  • This property allows you to pull list bullets inside the content area, rather than hanging outside of the content area like the default. This can be applied to ordered lists, unordered lists, and list items.
  • This property allows you to pull list bullets inside the content area, rather than hanging outside of the content area like the default. This can be applied to ordered lists, unordered lists, and list items.

  • hanging
  • This property allows you to pull list bullets inside the content area, rather than hanging outside of the content area like the default. This can be applied to ordered lists, unordered lists, and list items.
  • This property allows you to pull list bullets inside the content area, rather than hanging outside of the content area like the default. This can be applied to ordered lists, unordered lists, and list items.

Make Your Own Bullets

list-style-image

The value of the list-style-image property is the URL of the iage to be used as a marker. The list-style-type is set to 'disc' as the backup fallback.

Examples:

  • list-style-image: url(media/marker_magic_circle.png)
  • list-style-image: url(media/marker_magic_circle.png)
  • list-style-image: url(media/marker_magic_circle.png)

  • list-style-image
  • list-style-image
  • list-style-image