12 CSS Tools and Tutorials for Beautiful Web Typography

One Ping

1. Pingback: 10 Incredible Sites to Improve Your Typography Skills | Web Design Ledger

40 Comments

1. Scott February 25, 2009 at 3:22 AM Reply

   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.

2. rahil February 25, 2009 at 5:17 AM Reply

   great help

3. Lee Milthorpe February 25, 2009 at 5:31 AM Reply

   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.

4. gaurav February 25, 2009 at 6:01 AM Reply

   really enjoyed this

   Del.icio.us 🙂

5. Tuan Anh February 25, 2009 at 7:01 AM Reply

   Thank you for this article.

6. GIVISION | Jiri Mocicka February 25, 2009 at 7:03 AM Reply

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

7. Jackie February 25, 2009 at 7:17 AM Reply

   Really fantastic list. Thanks!

8. Wade Jackman February 25, 2009 at 10:44 AM Reply

   excellent post. CSS typeset is a favorite of mine.

9. TheRandomlist.com February 25, 2009 at 11:21 AM Reply

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

10. Henry February 25, 2009 at 11:29 AM Reply

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

11. Jonathan February 25, 2009 at 12:04 PM Reply

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

12. Timothy February 25, 2009 at 12:15 PM Reply

    Awesome list. Very useful. Thanks!

13. frank katzer | 1klang.de internetagentur February 25, 2009 at 12:18 PM Reply

    perfect list – thanks for that!
    very helpful toolset…

14. Chacko February 25, 2009 at 12:58 PM Reply

    Awesome list and so useful!

15. Sarahdippity February 25, 2009 at 1:55 PM Reply

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

16. w1sh February 25, 2009 at 4:27 PM Reply

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

17. owain February 25, 2009 at 4:38 PM Reply

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

    Thanks. : )

18. Dave February 25, 2009 at 4:39 PM Reply

    Wonderful list!

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

19. Jean Claude February 25, 2009 at 7:31 PM Reply

    Excellent!

20. Honour Chick February 26, 2009 at 2:04 AM Reply

    great typography… very inspirational. thxs 🙂

21. DrFalk3N February 26, 2009 at 11:46 AM Reply

    Great post!Very usefull thanks

22. wazime February 27, 2009 at 12:24 AM Reply

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

23. Dainis Graveris February 27, 2009 at 11:14 AM Reply

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

24. Matt February 27, 2009 at 11:27 AM Reply

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

    Very nice tool to align your text to a baseline.

25. amanda February 27, 2009 at 6:31 PM Reply

    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.

26. Matt February 28, 2009 at 2:27 AM Reply

    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/

27. Cam February 28, 2009 at 12:29 PM Reply

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

28. Buzzlair Voufincci February 28, 2009 at 5:36 PM Reply

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

    anyway. thanks for he article. 😀

29. Make Stable Money Online March 1, 2009 at 12:35 AM Reply

    Great tools I am a big fan of TypeTester

30. Aaron Weiche March 2, 2009 at 9:36 PM Reply

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

31. Zohaib March 4, 2009 at 7:40 AM Reply

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

32. Lee March 9, 2009 at 9:17 PM Reply

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

    Great site, thanks.

33. Franky April 9, 2009 at 2:38 PM Reply

    This is so sweet, I had an insulin rush!

34. Andrew Rosinski April 24, 2009 at 1:59 AM Reply

    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

35. Amber Weinberg September 16, 2009 at 4:31 PM Reply

    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.

36. Ashley Adams : Postcard Printing September 23, 2009 at 2:45 AM Reply

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

37. Blogger Article November 18, 2009 at 9:58 AM Reply

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

38. Ian Brodie ~ Get More Clients December 6, 2009 at 4:19 PM Reply

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

    Ian

39. ktown March 15, 2010 at 11:34 PM Reply

    I liked the pull quotes tutorial.

40. Jen Pruett April 26, 2010 at 10:40 PM Reply

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

    Jen