updated: March 4th, 2010 / Ross Johnson / 71 Comments

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.

71 thoughts Advanced Typography techniques using CSS

  1. Pingback: » Hello Rebooters - Web Design - 3.7crea.tv Blog

  2. Pingback: StrayPackets · Checking My ‘Check These Later’ Bookmarks

  3. Pingback: listtoday

  4. Pingback: sitbandr.com » Typography

  5. Pingback: Técnicas avanzadas en tipografía usando CSS

  6. Pingback: » Web Typography - 50 sources for inspiration and instruction - Web Design Marketing Podcast & Blog

  7. Pingback: CSS ve Tipografi | Rasim Coşkun | Web Tasarım | Web Design

  8. Pingback: 5 CSS Fonts & Typography Tips « The Venture Skills Blog

  9. Pingback: Dar bonitos estilos a nuestras tipografías mediante CSS « Xyberneticos

  10. Pingback: 10 ejemplos de bonitas tipografías mediante CSS en Blog de Estrategias Móviles

  11. Pingback: 9 Top CSS Essential Skills That Every Web designer Should Learn - aComment.net

  12. Pingback: 10 Challenging But Awesome CSS Techniques - NETTUTS

  13. Pingback: 10 tutoriales de técnicas avanzadas de CSS | frogx.three

  14. Pingback: Best Design Resources of August 2008 | CrazyLeaf Design Blog

  15. Pingback: CSS Typography: Contrast Techniques, Tutorials and Best Practices

  16. Pingback: CSS Typography: Contrast Techniques, Tutorials and Best Practices | POLPDESIGN

  17. Pingback: CSS Typography: Contrast Techniques, Tutorials and Best Practices | POLPDESIGN

  18. Pingback: WordPress Websites » CSS Typography: Contrast Techniques, Tutorials and Best Practices

  19. Pingback: Estilos a Tipografias mediante CSS at Blog Borchani Studios

  20. Pingback: 2008年最佳Web设计文章、教程及资源 - 刀客征途

  21. Pingback: 2008 Most Popular Design posts, Tutorials and Resources | Web Hosting and Domains

  22. Pingback: 2008 Most Popular Design posts, Tutorials and Resources | SulVision

  23. Pingback: Blog - FRHost Hospedagem de Site » Blog Archive » 9 Dicas de CSS que todo Designer deve Saber

  24. Pingback: 2008 Most Popular Design posts, Tutorials and Resources

  25. Pingback: Instants Tany » Blog Archive » Jouer avec la police!

  26. Pingback: 高级CSS文字排版技术 - Code Index

  27. Pingback: AMB Album » 2008 Most Popular Design posts, Tutorials and Resources

  28. Pingback: CSS Resources: The Ultimate Collection » DivitoDesign

  29. Pingback: Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği | Düş'lerindir seni Var’eden

  30. Pingback: COFFEE CUP||咖啡杯 » CSS学习资源终极收藏

  31. Pingback: 50 Useful Design Tools For Beautiful Web Typography | CSS, Fonts | Smashing Magazine

  32. Pingback: ArticleSave :: Uncategorized :: 50 Useful Design Tools For Beautiful Web Typography

  33. Pingback: 50 Useful Design Tools For Beautiful Web Typography - All web resource stuff

  34. Pingback: Torunn[.net] » CSS typografi

  35. Pingback: Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği | Atkn Klkn'ın not defteri

  36. Pingback: Typography Toolbox

  37. Pingback: 50 Useful Design Tools For Beautiful Web Typography | Ramblings

  38. Pingback: 12 CSS Tools and Tutorials for Beautiful Web Typography | Web Design Ledger

  39. Pingback: 12 CSS Tools and Tutorials for Beautiful Web Typography | Blog YODspica Ltd

  40. Pingback: 12 CSS Tools and Tutorials for Beautiful Web Typography | myBlog

  41. Pingback: 7 herramientas CSS y tutoriales para crear web tipográfica

  42. Pingback: 60+ Typography & Font Mega Toolbox | tripwire magazine

  43. Pingback: Jorick van Hees » Advanced Typography techniques using CSS » - Web Design Marketing Podcast & Blog

  44. Pingback: 22 Advanced CSS Text Effects And Web Typography Tips | My Free Design Area - A Webpage for Joomla Free & Commercial Templates, Wordpress Free & Commerciak Themes, and Drupla Free and Commercial templates, Flash Templates and animation, Html templa

Comments are closed.