12 CSS Tools and Tutorials for Beautiful Web Typography

By / Feb 25, 2009 / Resources

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.

  • http://www.seamenonpatrol.com Scott

    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.

  • http://wrappercode.com rahil

    great help

  • http://www.smashandpeas.com/ Lee Milthorpe

    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.

  • http://spotmeon.blogspot.com gaurav

    really enjoyed this

    Del.icio.us :)

  • http://hontap.info Tuan Anh

    Thank you for this article.

  • http://www.givision.net GIVISION | Jiri Mocicka

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

  • Jackie

    Really fantastic list. Thanks!

  • http://www.wadejackman.com Wade Jackman

    excellent post. CSS typeset is a favorite of mine.

  • http://TheRandomlist.com TheRandomlist.com

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

  • http://henryjones.us Henry

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

  • http://jonathanmerchant.com Jonathan

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

  • http://www.duzodesign.com Timothy

    Awesome list. Very useful. Thanks!

  • http://www.1klang.de frank katzer | 1klang.de internetagentur

    perfect list – thanks for that!
    very helpful toolset…

  • Chacko

    Awesome list and so useful!

  • http://www.sarahlestudio.com Sarahdippity

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

  • w1sh

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

  • http://www.famousandrich.com owain

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

    Thanks. : )

  • Dave

    Wonderful list!

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

  • http://www.games-place.info Jean Claude

    Excellent!

  • http://www.honourchick.com/blog Honour Chick

    great typography… very inspirational. thxs :)

  • DrFalk3N

    Great post!Very usefull thanks

  • http://simonewphoto.com wazime

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

  • http://www.1stwebdesigner.com Dainis Graveris

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

  • Matt

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

    Very nice tool to align your text to a baseline.

  • http://pinkslipmedia.org amanda

    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.

  • Matt

    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/

  • http://www.blog.mookiedesign.com Cam

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

  • http://www.vmalni.com Buzzlair Voufincci

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

    anyway. thanks for he article. 😀

  • http://www.makestablemoney.com/ Make Stable Money Online

    Great tools I am a big fan of TypeTester

  • http://www.fivetechnology.com/blog Aaron Weiche

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

  • http://xavia360.com/blog Zohaib

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

  • http://www.amep.com Lee

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

    Great site, thanks.

  • http://www.frankyaguilar.com Franky

    This is so sweet, I had an insulin rush!

  • http://blog.earth-keeper.net Andrew Rosinski

    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

  • Pingback: 10 Incredible Sites to Improve Your Typography Skills | Web Design Ledger()

  • http://amberweinberg.com/ Amber Weinberg

    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.

  • http://www.psprint.com/postcards Ashley Adams : Postcard Printing

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

  • http://bloggerarticle.com Blogger Article

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

  • http://www.ianbrodie.com Ian Brodie ~ Get More Clients

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

    Ian

  • http://simonewittenbergblog.com ktown

    I liked the pull quotes tutorial.

  • http://www.photobuzz.org Jen Pruett

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

    Jen