sccc.premiumdw.com

HCDE532 » Styling Text with CSS

Readability is primarily the concern of the typographer or information designer. A reader should be assisted in navigating around the information with ease, by optimal inter-letter, inter-word and particularly inter-line spacing, coupled with appropriate line length and position on the page.

Fonts Defined

• Fonts: the digital formats that typefaces come in, each with their own unique characteristics
• Font Families: groups of fonts under a given manufacturers or designer’s name; Times
• Font Faces: are the different type faces within the group or family; Times Bold
• Font Properties: relate to the size and appearance of collections of type; size, weight, etc.
• Text Properties: relate to the font’s treatment on your page; line-height, letter-spacing, etc.
• Common Fonts: fonts are read by the browser given that the user has the fonts installed on their computer
• Font Collections: groups of fonts categorized by their general look; sans-serif or decorative
• Serif: fonts so named because of the added detail to the type’s design which makes them easier to read in print
• Sans-Serif: fonts that do not have the added detail to the type’s design and have a much more plain appearance making them easier to read on the screen

See Also:

• History of the Font | Premium Design Works
• The Anatomy of Setting Type | Premium Design Works
• The Rules of Setting Readable Type | Premium Design Works
• Setting Type for the Web | Premium Design Works
• Common Fonts for Windows & Mac | Web Design Tips & Tricks
  

Font Declarations & Properties

CSS font properties define the font family, boldness, size, and the style of a piece of text.

See Also: Styling Fonts | W3 Schools

1. Font-Family

It is an accepted practice to write a CSS declaration specifying a number of fonts starting with the font you prefer:

1	body { font-family: Arial, Helvetica, sans-serif; color: #85898A; }

In this CSS Rule example we are setting a font-family for the entire page by way of the body selector.

The font-family property calls three values to choose from and try to load:

1. Arial
2. Helvetica (if Arial is not available)
3. a default sans-serif (if both Arial & Helvetica are not available)

It is important to use a generic fall-back when specifying fonts because the specified font may not be available on everyone’s computer.

2. Font-Size

You have three types of font-size values to choose from:

Absolute: values that come in a fixed or absolute size; pixels

1 2 3 4

p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; }

Keyword: values that will be displayed based on their inherit settings; small, large, xx-large:

1 2 3 4

p { font-family: Arial, Helvetica, sans-serif; font-size: small; }

Relative: values that are relative to the page or browser settings; percentages, ems

When working with relative units, one must set the baseline size which all relative units will then adhere to

1 2 3 4

body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; }

By declaring your font-size as 100% you are saying that your baseline size will be 100% of the default baseline size. Since 16 points is the default baseline size, 100% of 16 points is what all relative units will adhere to as the default baseline size.

1	h1 { font-size: .8em; }

In this example we are declaring that .8em will be 80% of 16 points – you do the math.

3. Font-Style

Font-Style determines whether a font is set to be italicized or not:

1	h1 { font-style: italic; }

In this example we have set the headline to display as italic or oblique (which makes the typeface lean a bit) or normal (which makes the typeface stand up-right.

4. Font-Weight

Font-Weight determines the weight or boldness of the typeface:

1	h1 { font-weight: normal; }

Since headlines are bold by default you can override the bold setting by using normal, as in this example.

Other possible value include: 100-900, bold, bolder, lighter.

5. Font-Variant

Font-Variant determines whether the typeface will be displayed as lowercase or small caps:

1	h1 { font-variant: small-caps; }

By using normal, the text will be displayed in lowercase (if written that way).

Text Properties

CSS text properties defines the text indent, spacing, alignment and decoration of a piece text.

See Also: Styling Text | W3 Schools

1. Text-Indent

Text-Indent uses numerical values to give the first line of paragraph text an indent:

1	p { text-indent: 3em; }

2. Letter-Spacing

Letter-spacing uses numerical values to give space in-between letter pairs of text:

1	p { letter-spacing: .2em; }

3. Word-Spacing

Word-spacing uses numerical values to give space in-between word pairs of text:

1	p { word-spacing: .2em; }

4. Text-Decoration

Text-decoration uses keyword values to give text a decorative style:

1	p { text-decoration: underline; }

5. Text-Align

Text-align uses keyword values to align the text of any block level tag:

1	p { text-align: left; }

6. Line-Height

Line-height uses numerical values to give space between lines of text:

1	p { line-height: 18px; }

7. Text-Transform

Text-transform uses keyword values will change the capitalization of text within an element:

1	p { text-transform: capitalize; }

8. Vertical-Align

Vertical-align uses length and keyword values to move type up or down with respect to the baseline:

1	p { vertical-align: 60%; }

Using Text Classes

Classes can be used in special circumstances when the normal hierarchy of the cascade will not do:

1	p.footer { font-size: 10px; line-height: 14px; margin-top: 25px; }

A class selector is preceded by using a (.).

In this example, the class must be within the <p> tag.

A contextual selector, such as the <a> tag, may be used in a class:

1	p.footer a { font-style: italic; color:#F20017; }

1	<p class="footer"><a href="mailto:info@premiumdw.com">info@premiumdw.com</a></p>

To specify the class in your markup you must use the class attribute and specify its value; in this case, class=”footer”