12 CSS Tools and Tutorials for Beautiful Web Typography

By / Feb 25, 2009 / Resources
shares

Achieving beautiful typography with CSS on the web is no easy feat, and there are many limitations to what can done with type on the web. However, there are generous people out there that have taken the time to build tools and write tutorials to help you overcome these limitations and create websites with beautiful typography.

Here are some that I find most useful:

Tools


CSS Type Set

CSS Type Set


Typetester

Typetester


Typechart

Typechart

Tutorials

Typographic Contrast and Flow

Typographic Contrast and Flow

How to use headings in HTML

How to use headings in HTML

10 Examples of Beautiful CSS Typography and how they did it

10 Examples of Beautiful CSS Typography and how they did it

Advanced Typography techniques using CSS

Advanced Typography techniques using CSS

Secrets of Magazine Style

Secrets<br /> of Magazine Style

Better Pull Quotes: Don’t Repeat Markup

Better Pull Quotes: Don’t Repeat Markup

CSS Gradient Text Effect

CSS Gradient Text Effect


CSS Pull Quotes

<br /> CSS Pull Quotes


How to Size Text in CSS

<br /> How to Size Text in CSS

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

41 Comments

  1. Scott
    February 25, 2009

    Great post! Very useful stuff in here.

    However, links to the ‘CSS Gradient Test Effect’ part navigate to you WP login page. At least for me anyways.

    Reply
  2. rahil
    February 25, 2009

    great help

    Reply
  3. Lee Milthorpe
    February 25, 2009

    Very helpful article, thank you!

    I’m always playing around with the typography on my blogs and am never truly happy with the results.

    It does take a lot more than changing the fonts and sizes to make things look just right.

    Reply
  4. gaurav
    February 25, 2009

    really enjoyed this

    Del.icio.us :)

    Reply
  5. Tuan Anh
    February 25, 2009

    Thank you for this article.

    Reply
  6. GIVISION | Jiri Mocicka
    February 25, 2009

    It’s a really good article. Especially about the using hierarchy in the layout.
    Enjoy the article a lot.

    Reply
  7. Jackie
    February 25, 2009

    Really fantastic list. Thanks!

    Reply
  8. Wade Jackman
    February 25, 2009

    excellent post. CSS typeset is a favorite of mine.

    Reply
  9. TheRandomlist.com
    February 25, 2009

    Great post…I’ve been checking your site for new posts for the past few days and I began wondering where you’ve been.

    Reply
  10. Henry
    February 25, 2009

    @TheRandomlist – Yes. Sorry about the lack of posts in the last week. I’ve been busy with a few other projects.

    Reply
  11. Jonathan
    February 25, 2009

    I’m really starting to get into typography, great references!

    Reply
  12. Timothy
    February 25, 2009

    Awesome list. Very useful. Thanks!

    Reply
  13. frank katzer | 1klang.de internetagentur
    February 25, 2009

    perfect list – thanks for that!
    very helpful toolset…

    Reply
  14. Chacko
    February 25, 2009

    Awesome list and so useful!

    Reply
  15. Sarahdippity
    February 25, 2009

    I’ve added this to my Delicious list. Love the collection. Thanks for putting it together for the rest of us! :)

    Reply
  16. w1sh
    February 25, 2009

    “Hello I’m Shinely” link leads to wp-admin. :O

    Reply
  17. owain
    February 25, 2009

    Very good list of useful typography fun. Great looking site by the way.

    Thanks. : )

    Reply
  18. Dave
    February 25, 2009

    Wonderful list!

    Although the CSS Gradient Text Effect links to your login page.

    Reply
  19. Jean Claude
    February 25, 2009

    Excellent!

    Reply
  20. Honour Chick
    February 26, 2009

    great typography… very inspirational. thxs :)

    Reply
  21. DrFalk3N
    February 26, 2009

    Great post!Very usefull thanks

    Reply
  22. wazime
    February 27, 2009

    Thanks for the great list, I can’t wait to try this stuff out.

    Reply
  23. Dainis Graveris
    February 27, 2009

    Typechart was really big discovery for me, btw very useful post.

    Reply
  24. Matt
    February 27, 2009

    How about Syncotype? http://s.robgoodlatte.com/demo/

    Very nice tool to align your text to a baseline.

    Reply
  25. amanda
    February 27, 2009

    As an alternative to sIFR for font replacement, there is also Cufon, which doesn’t use flash at all — it’s just javascript.

    http://cufon.shoqolate.com/generate/

    It has given me less headaches than sIFR, and it degrades much better, in my opinion.

    Reply
  26. Matt
    February 28, 2009

    As an alternative to sIFR and Cufon, there is FLIR. Flir uses PHP, server-side processing to convert the text into an image, which degrades better than sIFR and Cufon.

    http://facelift.mawhorter.net/

    Reply
  27. Cam
    February 28, 2009

    great stuff. i especially like “how to use headers in html” bit

    Reply
  28. Buzzlair Voufincci
    February 28, 2009

    ilovecolors.com has article discussing about font too. u should put it in the list too. quite helpful

    anyway. thanks for he article. :D

    Reply
  29. Make Stable Money Online
    March 1, 2009

    Great tools I am a big fan of TypeTester

    Reply
  30. Aaron Weiche
    March 2, 2009

    Great list. Kick the typography skills around our office in the arse for sure. Thanks!

    Reply
  31. Zohaib
    March 4, 2009

    yes.i believe you can’t design without typography. like it :)

    Reply
  32. Lee
    March 9, 2009

    Style trends and conventions are so hard to come buy and it’s nice to see how things should be done.

    Great site, thanks.

    Reply
  33. Franky
    April 9, 2009

    This is so sweet, I had an insulin rush!

    Reply
  34. Andrew Rosinski
    April 24, 2009

    Great post and an invaluable resource.

    PS- I just purchased Fountain’s “Atlantik” type family. I’ll trade you one of my licenses for another typeface/family of equal value.

    Let me know,
    Andrew

    Reply
  35. 10 Incredible Sites to Improve Your Typography Skills | Web Design Ledger
    July 16, 2009

    [...] would agree that typography is a difficult skill to master. A few months ago, we showed you some tools and tutorials to improve your web typography. While these are very useful, tools are only half the battle. Having a strong foundation of [...]

    Reply
  36. Amber Weinberg
    September 16, 2009

    Great resource list. Unfortuantely typography tends to be the thing a lot of web designers (myself included) neglect when it comes to general content implementation.

    Reply
  37. Ashley Adams : Postcard Printing
    September 23, 2009

    You have a very nice toolset here. I found How to use headings in HTML indeed helpful. Thanks a lot for the mention.

    Reply
  38. Blogger Article
    November 18, 2009

    tutorials are very interesting and I love it thanks for the advice you gave

    Reply
  39. Ian Brodie ~ Get More Clients
    December 6, 2009

    Excellent – the Pull quotes lesson was particularly useful (though now I’m trying to figure out how to do it through Thesis hooks).

    Ian

    Reply
  40. ktown
    March 15, 2010

    I liked the pull quotes tutorial.

    Reply
  41. Jen Pruett
    April 26, 2010

    CSS type set is my favorite I use it all the time, this is great resource thanks for sharing,

    Jen

    Reply

Leave a Reply