September 20th, 2006 / 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. Very nice examples. It’s refreshing to be reminded of the possibilities if one takes the time 🙂

  2. I hate to say “Looks best in…” however,

    I stopped reading right there.

    Mark Mason
  3. I agree, and have blogged about it before. However this isn’t a demonstration of cross browser/platform css typography.. just an example of what can be done.

    Thanks for commenting even though you didn’t read anything but the first paragraph. =)

    ross
  4. I love the idea of using CSS to create interesting typography and logos!

    Text will always be search engine friendly and faster to load than an equivalent image.

  5. Thanks for the great examples. The “reflections” is really cool!

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

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

  8. Pingback: listtoday

  9. Very nice and creative, but somehow I can’t avoid the feeling that you built a time machine out of CSS and transported me to 1997.

    henrah
  10. Not sure what that means? 😉

    ross
  11. Pingback: sitbandr.com » Typography

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

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

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

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

  16. These are just different fonts…

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

  18. hey..
    awesome stuff..
    never tot ..html wud be soo gud ..

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

  20. 棕榈树
    棕榈树
    [url=http://www.zlyg.cn]棕榈树[/url]

  21. HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

  22. Hate to say it, but ‘K’ and ‘N’ don’t reflect…
    Rest was good though – thanks.

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

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

  25. The reflection is not “purely CSS” as you use two elements with the same text. You can achieve a better solution with CSS3 “text-shadow” property (not supported in all browsers, but the technology moves on).

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

  27. The drop characters and funky webdesign ideas were great. Thanks.

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

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

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

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

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

  33. This is really generate some idea about typography!
    thanks

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  51. Pingback: Typography Toolbox

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

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

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

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

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

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

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

  59. 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.