Advanced Typography techniques using CSS

September 20, 2006 @ 10:41 am | Comments (70) | by Ross Johnson

While the descriptions and basic uses for CSS typography controls have been beaten to death, there are still many rich typographic abilities of CSS that are not well documented.

This is an example of what you can do by combining and tweaking type using css. I am not at this time going to be describing the code in much depth, but if you are interested in learning how I did it download my advanced css typography example page and look through the source code.

I hate to say “Looks best in…” however, for these examples they really do work best in the default font for your browser. So for this page at least, please resize the text to default for the full effect.

KINDEK INC
KINDEK INC

Reflections – This only works for words/letter combinations that look the same if they are flipped (ie: very few.) Using a close line height, and a thick border for the top element we can create the illusion of a depth, and a reflection point.

Web Design Rockstarz

Drop Charectors – This technique uses a low line height and a bottom border to allow some characters (such as the lowercase g) to drop below the line. This creates a nice effect, and I use it on my blog here as you may have noticed.

Funky
Webdesign!

This is a way of creating connected letters using line heights, letter spacing, and italic letters. One could potentially recreate a logo with a few letters by using this method, or maybe find a few other creative ideas to put it to use.

Fancy Headlines

The chapel De La Ross Johnson

By using close letter-spacing and the Georgia font, we get a very classic feel. Also note the relationship between the T and the H and how the negative space between the two letters creates a unique design element of itself.

Flowing Headlines

Captivating, Creative
Logan’s Litigation
Zefer Zoo
Best Building

Of cource this effect doesn’t work in IE (surprised?). It does degrade nicely though, so I wouldn’t feel bad using it on a page. Using very low letter-spacing for the first character using a span, we can get the letters to flow together. Some combinations look and work great, some don’t at all. However – if you come across a situation where the title you use works with this flowing feel it creates a very unique feel.

Hand Writing

Don’t forget to turn off the lights when you leave!
Don’t forget to turn off the lights when you leave!
Don’t forget to turn off the lights when you leave!

By using italic text, font weights, and letter spacing we can create text that feels like a quickly jotted note. Some of the more “informal” fonts work well for this, including Trebuchet and *gasp* even Comic San’s!

Typewriter

Potential use for magazine style typography
Close line height and letter spacing,
almost connected lines…

Potential use for magazine style typography
Close line height and letter spacing,
almost connected lines…

Potential use for magazine style typography
Close line height and letter spacing,
almost connected lines…

The use of light weight serif fonts with close letter spacing and line height creates a very industrial feel. This technique is commonly used in magazines for pull quotes, or even a distressed letter style design. Font’s shown are Times, Georgia, and Courier

Newspaper Headlines

Webdesign Times
Webdesign Times

Using Serif fonts, all caps to produce newspaper style headlines

Misc

SATURDAY MARCH 19TH 2046
Rock5tar and a De51gner
More Typewriter Style, less cluttered.

A few misc type styles, including using span’s to make numbers look closer to letters by resizing them.



« My company is real damn it! Hosting on Wordpress is valuable for SEO »

Comments (70)

Subscribe

What I am doing Twitter

The Basics About

This is the blog of Ross Johnson, a co-owner of a Michigan web site design company, College Instructor, and Publisher.

time testedTop Posts

fresh contentRecent Posts

The Web Design Sketchbook Basecamp The Thesis Theme from Chris Pearson and DIYthemes