CSS Basics 104b - More CSS Text Styling

Home Tutorials Reviews Weblog

Featuring: Here Font family, weight, and variants are tested
Motivation: All styles are applied to text lines using <div> and <span> tags

Samples of CSS style rules that will be explained in the tutorial below:

Font Preferences Simple
.fcursive {font-family:cursive; color:#FFFFFF; background-color:#666666}
.fmonospace {font-family:monospace; color:#FFFFFF; background-color:#666666}
.ffantasy {font-family:fantasy; color:#FFFFFF; background-color:#666666}
.fsanserif {font-family:sans-serif; color:#FFFFFF; background-color:#666666}
.fserif {font-family:serif; color:#FFFFFF; background-color:#666666}

Font Weight, Style and Size
.litalic { font-weight: 500; font-size:24pt; font-style: italic; }
.litatlic2 { font-weight: 100; font-size:24pt; font-style: italic; font-variant: small-caps}
.oblique { font-weight: 100; font-size:24pt; font-style: oblique; }
.bitalic { font-weight:900; font-size:24pt; font-style: italic; }
.boblique { font-weight: 900; font-size:24pt; font-style: oblique; }

In the previous tutorial, we looked at Text Stylings for alignment, indenting and spacing. And I discovered some consistency in cross browser delivery of those styling such that I may add padding, justifications and indents to my master osstyle.css file which contains most of the stylesheets which I use for this site. I really welcomed the justified look and feel and got some great ideas for styling some websites. So this tutorial will continue with CSS Text stylings and will look at font specs and type effects that hopefully are uniformly implemented in the browsers.

Font Styling Hints

In its simplest form users can specify five basic font hints or styles and CSS will have the browser then choose the best example of each font style. The example below illustrates each of the font styling hints:
Cursive - here is what your browser thinks is a cursive or script font like Lucida Handwriting.
Fantasy - here is what your browser thinks is a fantasy font like BeesKnees.
Monospace - here is what your browser thinks is a monospace font like Courier.
San-serif - here is what your browser thinks is a sans-serif font like Arial
Serif - here is what your browser thinks is a serif font like Times New Roman.
All four of the Windows browsers tested (Apple Safari, Microsoft IE6, Mozilla Firefox, and Opera) agreed pretty closely on what a monospace, san-serif, and serif font styling looks like; but for cursive and fantasy fonts - the browsers were all over the font map. Basically all browsers chose to ignore the fonts on my system, be they true type or whatever. The browsers definitely ignored the fonts which I thought most qualified for cursive and fantasy respectively. So use the cursive and fantasy stylings with care or the ability to guarantee the font will be there.

CSS provides in a way for this in its font-family option. The following style suggests the exact font names:
.fnamed {font-family: Arial, Tahoma, Helvetica, sans-serif, "Bitstream Vera Sans"}

This again is a bit of hit or miss because anyone particular PC may not have the sans-serif fonts named. So its always good form to include in your list the overall font-family at the end (last choice used).

Font Weight, Style and Size

I have always ben very skeptical of the setting for font weights given by CSS - I think they just apply all the font weights in the following fashion: normal = 100, 200, 300, 400, 500 and bold = 600,700, 800, 900. I tested this notion with the following stylings:
.litalic - is 500 weight, 24 point, italic
.oblique - is 100 weight, 24 point, oblique
.litalic2 - is 100 weight, 24 point, italic, small caps
.nitalic - is normal weight, 24 point, italic
.normob - is normal weight, 24 point, oblique
.norm400 - is 400 weight, 24 Point, oblique
.bitalic - is 900 weight, 24 point, italic
.boblique - is 900 weight, 24 point, oblique
The browser and Dreamweaver CS3 votes are in. There is no difference between oblique and italic. Also only IE and Opera hinted at a third weight -> 100 used with small caps looked lighter than normal weight. But most browsers have two weights: normal 100 to 500 and bold from 600 to 900. Also separate tests showed no difference between bold and bolder weights. In short, take the weights to still be a two level system - normal and bold while italic and oblique are treated the same.

In a similar fashion I have problems with xx-large=24pt through xx-small=7pt font size system. The browsers seem to vary by 1-3 points in how they deliver these non-numeric sizes. But all the browsers deliver numeric point sizes and with some fidelity. So for font-size, I am sticking with specifying the exact numeric point size.

Font/Text Decoration and Capitalization

One of the reasons I decided to learn CSS was to be able to utilize underlines in my Web pages - what CSS calls text-decoration. Two of the text-decoration stylings have already been on display in the CSS tutorials - underbold and striker. In this section we add two more plus take a look at some controls of capitalization. Here are each of the stylings on display in definition mode:
.underbold { text-decoration: underline; font-weight: bold }
.striker { text-decoration: line-through; font-weight: bold }
.overbold { text-decoration: overline; font-weight: bold }
.allcaps { text-transform: uppercase; font-weight: bold }
.Smallcaps { font-variant: small-caps; font-weight: bold }
.capitalize { text-transform: capitalize; font-weight: bold }
.lowercase { text-transform: lowercase; font-weight: bold }
.brackets { text-decoration: underline overline; }
Note the variation in the specifying of smallcaps, its not a text-transform option but rather an obscure font-variant. Also it is important to note that the browsers got all the text-decoration options right but seemed to have problems with uppercase and small caps. Dreamweaver CS3 added no overline preview to its similar confusion of having smallcaps look identically the same as uppercase. Only Apple's Safari and Opera made the right distinction between SMALLCAPS and UPPERCASE.

Summary

The reality about the font side of text styling is all about the browsers being a bit less than complete in their implementations. W3C CSS has anticipated variations on font-family, font-weights and font-styles which the browser vendors have relaxed to match the current deliverables. So for font-style there is italic and normal, font-weight is bold and normal while text-decoration is the most versatile with overlines, underlines, and line-throughs delivered by all the browsers. In general it appears users and I will have to wait a little while longer for full Web DTP. Users looking for more info on these CSS styles should check pages 58-67 in CSS in Easy Steps by Mike McGrathor pages 203-222 on Font Manipulation in Beginning CSS by Richard York.


Top of Page  Tutorials Home  CSS references