12 CSS Tools and Tutorials for Beautiful Web Typography
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
Typetester
Typechart
Tutorials
Typographic Contrast and Flow
How to use headings in HTML
10 Examples of Beautiful CSS Typography and how they did it
Advanced Typography techniques using CSS
Secrets of Magazine Style
Better Pull Quotes: Don’t Repeat Markup
CSS Gradient Text Effect
CSS Pull Quotes
How to Size Text in CSS
Related Posts
Here's some other articles that you will definitely find useful.
55 Examples of Huge Typography in Web Design
The Most Common HTML and CSS Mistakes to Avoid
14 Helpful Cheat Sheets for Front-end Web Development
11 Useful Online Tools for Better CSS Development
20 Do’s and Don’ts of Effective Web Typography
Feb 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.
Feb 25, 2009
great help
Feb 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.
Feb 25, 2009
really enjoyed this
Del.icio.us
Feb 25, 2009
Thank you for this article.
Feb 25, 2009
It’s a really good article. Especially about the using hierarchy in the layout.
Enjoy the article a lot.
Feb 25, 2009
Really fantastic list. Thanks!
Feb 25, 2009
excellent post. CSS typeset is a favorite of mine.
Feb 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.
Feb 25, 2009
@TheRandomlist – Yes. Sorry about the lack of posts in the last week. I’ve been busy with a few other projects.
Feb 25, 2009
I’m really starting to get into typography, great references!
Feb 25, 2009
Awesome list. Very useful. Thanks!
Feb 25, 2009
perfect list – thanks for that!
very helpful toolset…
Feb 25, 2009
Awesome list and so useful!
Feb 25, 2009
I’ve added this to my Delicious list. Love the collection. Thanks for putting it together for the rest of us!
Feb 25, 2009
“Hello I’m Shinely” link leads to wp-admin. :O
Feb 25, 2009
Very good list of useful typography fun. Great looking site by the way.
Thanks. : )
Feb 25, 2009
Wonderful list!
Although the CSS Gradient Text Effect links to your login page.
Feb 25, 2009
Excellent!
Feb 26, 2009
great typography… very inspirational. thxs
Feb 26, 2009
Great post!Very usefull thanks
Feb 27, 2009
Thanks for the great list, I can’t wait to try this stuff out.
Feb 27, 2009
Typechart was really big discovery for me, btw very useful post.
Feb 27, 2009
How about Syncotype? http://s.robgoodlatte.com/demo/
Very nice tool to align your text to a baseline.
Feb 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.
Feb 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/
Feb 28, 2009
great stuff. i especially like “how to use headers in html” bit
Feb 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.
Mar 1, 2009
Great tools I am a big fan of TypeTester
Mar 2, 2009
Great list. Kick the typography skills around our office in the arse for sure. Thanks!
Mar 4, 2009
yes.i believe you can’t design without typography. like it
Mar 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.
Apr 9, 2009
This is so sweet, I had an insulin rush!
Apr 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
[...] 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 [...]
Sep 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.
Sep 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.
Nov 18, 2009
tutorials are very interesting and I love it thanks for the advice you gave
Dec 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