Somacon.com: Articles on web development, software, and hardware
§ Home > Index > Web Development

CSS Font and Text Style Wizard

Font
font-family serif sans-serif cursive fantasy monospace custom:
font-style normal italic oblique
font-variant normal small-caps
font-weight normal bold bolder lighter 100 200 500 600 900
font-size medium small large smaller larger custom:
Text
line-height 100% 200% 80% 2em 1em 0.8em custom:
word-spacing normal 1ex 1.5ex 2ex 5ex
letter-spacing normal 0.1ex 0.3ex 0.75ex 1ex
text-decoration none underline overline line-through blink
text-transform none capitalize uppercase lowercase
text-align left right center justify
text-indent 0ex 1ex 2ex 5ex 10ex 10% 20%
Click the buttons above to change the text below

"You are old, Father William," the young man said,
"And your hair has become very white;
And yet you incessantly stand on your head--
Do you think, at your age, it is right?"

vertical-align baseline sub super top text-top middle bottom text-bottom
father_william_standing_on_head.gif Vertical-align applies only to the image and THIS CAPITALIZED TEXT relative to this line.

CSS and HTML Source Code

The box below shows example CSS and HTML source code.
The code will update dynamically as you press the buttons above.
You can select text in the box and then copy and paste the starter code.

CSS Font and Text Style Wizard

Welcome to the CSS Font and Text Style Wizard, brought to you due to the popularity of the HTML and CSS Table Border Style Wizard. Use this wizard to experiment with font and text styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.

Font and Text Style Notes

Font Family

For font-family, you can specify an actual font name, like "Courier New" in the custom field. If the name has spaces, you should quote it, and it is case-insensitive. You can specify a comma-separated list of font names, which will be used in the order listed when some are not found on the user's system. Designers should use the most desired font first, the most compatible font second-to-last, and the generic font family last and always. For example, a common font-family value is "Verdana", "Arial", sans-serif.

Units

When you use specify lengths in CSS, you should generally use the relative units appropriate to the property. For width properties, use ex units, which corresponds to the width of the lower-case 'x' character. For height properties, use em units, which corresponds to the height of the capital 'M' character. Relative units are preferred to absolute units, like px, pt, and in. One reason for this is that one day, monitors may have more than 96 dots per inch, in which case your 14px font will look too small. Other relative values like smaller, bolder, and percentages are also better choices than the absolute values. There are always exceptions though.

Browser Support

This page does not work in Opera 8 or IE5 for the Mac. The above properties and values are the most commonly supported, but among them are some that have very limited support (e.g. the numeric font weights). There are other properties, such as those defined in CSS2, that are not shown here because they are not supported by any browsers yet. I chose to link the property names to the IndexDotCSS CSS Property Index page because they have compatibility information. They also have detailed explanations of how the properties work. For example, when you specify percentage values for the text-indent property, the percentage is relative to the parent element, which in this case is a table cell.

Vertical Alignment

The vertical alignment property is a bit difficult to grasp, and is sometimes classified as a positioning property. In general, it defines the relationship between the baseline of the element and the baseline of its parent. For text, the baseline is an imaginary line on which the text sits. Characters like lower-case 'j' and 'q' have decenders which extend below this line. For images, the baseline is just the bottom of the image. In the context of this wizard, this property is included to show superscript and subscript display with CSS.

Misc

To see text like one finds in comic books, set font-family to cursive, font-style to italic, font-variant to small-caps, font-weight to bold, and letter-spacing to 0.1ex. The justify text-align option will not have any visible effect since none of the lines are wrapped. And in case you were wondering, the sample text and image are from Alice's Adventures in Wonderland. This book by Lewis Carroll was made available by the efforts of Project Gutenberg. For information on dynamically setting styles with Javascript and how the HTML toggle buttons work, please see the border style wizard (first link below).

More CSS Wizards

Recommended Books

Dynamic HTML: The Definitive Reference (2nd Edition)
JavaScript: The Definitive Guide
Cascading Style Sheets 2.0 Programmer's Reference

Created 2005-06-01, Last Modified 2013-07-18, © Shailesh N. Humbad
Disclaimer: This content is provided as-is. The information may be incorrect.