COM271, Week 4
Styling Text
Font and text properties
Syllabus | Table of Pages | Assignments | References and Useful Links
(text properties, below)
Fonts
Web designers, particularly those who approach web pages from a photoshop-artistic perspective, may soon fall in love with the rich diversity of fonts available from Adobe ("Type I") and Apple ("True Type"), often available for free (!) download.
Yahoo! My typography is going to be amazing! All those hip, artistic type faces and ...
Sorry. Not so fast there.
{Warning: Brutal reality fact-check coming!}
Web browsers are limited to fonts residing on the client machine. For both Windows and Mac operating systems, that offers generally slim pickings. While there are variations between OS versions, here is what you might reasonably expect (source www.ampsoft.net, "Common fonts to all versions of Windows & Mac equivalents")
| Arial, Arial, Helvetica, sans-serif |
| Arial Black, Arial Black, Gadget, sans-serif |
| Comic Sans MS, Comic Sans MS5, cursive |
| Courier New, Courier New, monospace |
| Georgia1, Georgia, serif |
| Impact, Impact5, Charcoal6, sans-serif |
| Lucida Console, Monaco5, monospace |
| Lucida Sans Unicode, Lucida Grande, sans-serif |
| Palatino Linotype, Book Antiqua3, Palatino, serif |
| Tahoma, Geneva, sans-serif |
| Times New Roman, Times New Roman, Times, serif |
| Trebuchet MS1, Trebuchet MS, sans-serif |
| Verdana, Verdana, Geneva, sans-serif |
| Symbol, Symbol (Symbol2, Symbol2) |
| Webdings, Webdings (Webdings2, Webdings2) |
| Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2) |
| MS Sans Serif4, Geneva, sans-serif |
| MS Serif4, New York6, serif |
Font families: Fonts come in proportional space (letter width depends on the letter) or monospace (all letters have the same width), and with serifs (little lines or "feet" at the tops or bottoms of letters to help the eye of readers move across the page), like this A, or sans-serif (without the feet), like this A.
Because computer monitors are relatively low resolution (see Images), adding serifs to smaller type may create a blur, so it is generally recommended to use sans-serif fonts for screen styles (cutting the list above in half) and serifs for print styles. Fonts also come in cursive and fantasy families to mimic handwriting or to provide special effects or symbols. But again, these only work if they are resident on your operating system.
The style sheet attribute for font family is font-family. Values include the names of families, or lists of names separated with commas; the browser checks the names from left to right agains the list of resident fonts and uses the first one encountered. Adding ",sans-serif" or ,"serif" allows the browser to choose a default resident font from the right family if no match has been found.(more)
{font-family:Arial, helvetica, sans-serif;}
Font Weights: Font families are actually groups of pre-determined fonts, varying by weight and variant (italics) (next). If the resident computer has the appropriate member, css can evoke a display from a range of light to normal to bold weights.
The attribute is font-weight, and values include: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 (equivalent to normal) | 600 | 700 | 800 | 900 (equivalent to bold) | inherit
{font-weight:bold;}
Font Size:
Font sizes can be set in several units or relative sizes. The attribute is font-size. Most common units include:
- Screen
- absolute
- px (pixels)
- absolute
- Print
- absolute
- in (inches)
- cm (centimeters)
- pt (points, 12 points to the inch)
- absolute
- Relative: Either Print or Screen
- % (percent)
- em (relative to current: 1.2em is 120% of current size)
{font-size:16px;}
{font-size:1.5em;}
Font Style: If the font family includes members for italic or oblique (like italic: "leaning"), then font-style can be applied to evoke use of this member.
{font-style:italic;}
Font Variant: The attribute font-variant can apply the value small-caps to create this effect.
{font-variant:small-caps;}
Font: All font attributes can be combined by using the attribute font and a multi-part value string. The string includes options:
[[<font-style> || <font-variant> || <font-weight> ]? <font-size> [/<line-height>]? <font-family>]
Style, variant, and weight are all optional, but if any appear they must precede font size. Notice that font size may be followed by a / and a line height, the only use of a slash in CSS. Also, font family may include more than one family, separated by commas, and must be the last entry.
{font:italic bold small-caps 18px/15px Verdana, Helvetica, sans-serif;}
Inheritance of Font Properties: All type inherits the font properties of container tags. Thus is it possible to create this style sheet to create the following effects:
<style media="screen" type="text/css">
body{font:16px Verdana, sans-serif;}
p{font:1em Arial;}
h1{font:bold 1.5em Verdana;}
.smcap{font-variant:small-caps;}</style>
This is an h1 header, using Verdana, at 1.5em (here, 24px)
This is a normal paragraph that includes a span of small caps, using Arial, at 1em (here, 16px).
Text Properties
If font and font properties govern the display of text (characters and letters), there are still properties that govern the placement and other appearances of text.
Indenting: The attribute text-indent can offset the beginning of a line. If the value is positive, the indent is normal (to the right); if negative, the first line can be pulled out to the left. All length or percentage units apply.
Here I've indented 2em.
Here I've (out?)dented using -2em.
Horizontal alignment: The attribute text-align affects how lines line up. Here, we'll stuff lines into a containing div:
Here, I'm left aligned.
Now, I'm on the right.
The center is nice, too.
With justify, long lines of text can be made to stretch from one side to the other (except for the last).
{text-align:left | right | center | justify;}
Line Height: The amount of space between the base of lines is set by line-height. This is not the height of the text itself (a font property).
Back in the box, I'm feeling a little constrained having to live with a line height of only .75em.
At 1.5em line height, I'm feeling much better, with lots of room to stretch my legs.
Vertical alignment: The attribute vertical-align can be used within table cells (see HTML Tables, Table Elements, and Major Attributes) to move block elements within the cell (placing text at the top or middle, for example).
When used with inline elements (span, em, a, strong), it can move text relative to the baseline. It does not change font size (as a sub or sup html element would; if you wish to do this you need to use a font or font-size attribute.
{vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>;}
Here I'm using super, and then sub, followed by 22px and then -50% just to have fun.
You can position an image within a line of text.
For example, here I use vertical-align:top 
and in this line I use vertical-align:bottom .
(i.e., <img style="vertical-align:top;background-color:yellow;" src="../images/submenu.gif" />)
Word and Letter Spacing: Attributes word-spacing and letter-spacing take length values to add space between words and letters.
This is normal spacing between words and letters.
This is 1em spacing between words.
This is 2em spacing between words.
This is .25em spacing between letters.
This is .5em spacing between letters.
Text Transformation: Attribute text-transform converts to lowercase text to uppercase.
IF YOU ARE USING UPPER CASE text-transform:lowercase CONVERTS TO LOWERCASE.
Here I am using text-transform:capitalize to change the first letter of every word to uppercase.
Text Decoration: Attribute text-decoration can take values of underline, overline, line-through, and the dreaded blink.