Favorite CSS Text Styles

Like in anything, there are some things you can do with CSS that are much more fun than other things. I’ve decided to show you some of my favorite ones. We’ll start with things you can do with text.

font-variant:small-caps
For some reason I think that the small caps look is very classy.
Example: Some text with the font-variant small-caps.

letter-spacing:[normal|length]
The letter-spacing allows for adjustments in spacing between letters in text.
Example Values:
-.1ex = Sample Text Here.
normal = Sample Text Here.
.25em = Sample Text Here.

word-spacing:[normal|length]
Just like letter spacing, but this is the space between the words instead. The difference often seems a bit more subtle, but its a great way to control text without needing to specify fonts.
Example Values:
-.2em = Sample Text Here.
normal = Sample Text Here.
.3em Sample Text Here.

text-decoration:line-through
The CSS version of the old <strike> and <s> – this is still a useful text style.
Example: Sample Text Here.

text-decoration:overline
Not to be left out, is the overline value which is absolutely great for a hover value or to make underlined text look even more noticeable by having a line on top also.
Example: Sample Text Here.

text-transform:capitalize
Rather handy in certain things, like section headers where you want to have uniformity. Granted, careful typing can always fix that, but it’s just a nice little helper. The capitalize will make capitalize the first letter of each word.
Example: Sample Text Here.

text-transform:uppercase/lowercase
In a similar manner of the capitalize, you can make a whole section of text all upper or lower case. Very handy.
Example:
Uppercase = Sample Text Here.
Lowercase = Sample Text Here.

… and those are a few of my favorite things… *hums along*

~Nicole

Leave a Reply