Advanced Typography techniques using CSS
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.
Labels: advance CSS, Freelance Web Designing, web graphic india
posted by Ritesh Niranjan at
11:19 AM
Links to this post
