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.
21 Examples of Inspiring Typography in Web Design
Inspiring Typography in Print Ads
21 Inspiring Examples of Typography in Web Design
25 Examples of Big Typography in Web Design
Developing Streamlined and Efficient CSS Styles
40 comments
Scott
February 25, 2009Great 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.
rahil
February 25, 2009great help
Lee Milthorpe
February 25, 2009Very 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.
gaurav
February 25, 2009really enjoyed this
Del.icio.us
Tuan Anh
February 25, 2009Thank you for this article.
GIVISION | Jiri Mocicka
February 25, 2009It’s a really good article. Especially about the using hierarchy in the layout.
Enjoy the article a lot.
Jackie
February 25, 2009Really fantastic list. Thanks!
Wade Jackman
February 25, 2009excellent post. CSS typeset is a favorite of mine.
TheRandomlist.com
February 25, 2009Great post…I’ve been checking your site for new posts for the past few days and I began wondering where you’ve been.
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.
Jonathan
February 25, 2009I’m really starting to get into typography, great references!
Timothy
February 25, 2009Awesome list. Very useful. Thanks!
frank katzer | 1klang.de internetagentur
February 25, 2009perfect list – thanks for that!
very helpful toolset…
Chacko
February 25, 2009Awesome list and so useful!
Sarahdippity
February 25, 2009I’ve added this to my Delicious list. Love the collection. Thanks for putting it together for the rest of us!
w1sh
February 25, 2009“Hello I’m Shinely” link leads to wp-admin. :O
owain
February 25, 2009Very good list of useful typography fun. Great looking site by the way.
Thanks. : )
Dave
February 25, 2009Wonderful list!
Although the CSS Gradient Text Effect links to your login page.
Jean Claude
February 25, 2009Excellent!
Honour Chick
February 26, 2009great typography… very inspirational. thxs
DrFalk3N
February 26, 2009Great post!Very usefull thanks
wazime
February 27, 2009Thanks for the great list, I can’t wait to try this stuff out.
Dainis Graveris
February 27, 2009Typechart was really big discovery for me, btw very useful post.
Matt
February 27, 2009How about Syncotype? http://s.robgoodlatte.com/demo/
Very nice tool to align your text to a baseline.
amanda
February 27, 2009As 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
February 28, 2009As 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/
Cam
February 28, 2009great stuff. i especially like “how to use headers in html” bit
Buzzlair Voufincci
February 28, 2009ilovecolors.com has article discussing about font too. u should put it in the list too. quite helpful
anyway. thanks for he article.
Make Stable Money Online
March 1, 2009Great tools I am a big fan of TypeTester
Aaron Weiche
March 2, 2009Great list. Kick the typography skills around our office in the arse for sure. Thanks!
Zohaib
March 4, 2009yes.i believe you can’t design without typography. like it
Lee
March 9, 2009Style trends and conventions are so hard to come buy and it’s nice to see how things should be done.
Great site, thanks.
Franky
April 9, 2009This is so sweet, I had an insulin rush!
Andrew Rosinski
April 24, 2009Great 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
Amber Weinberg
September 16, 2009Great resource list. Unfortuantely typography tends to be the thing a lot of web designers (myself included) neglect when it comes to general content implementation.
Ashley Adams : Postcard Printing
September 23, 2009You have a very nice toolset here. I found How to use headings in HTML indeed helpful. Thanks a lot for the mention.
Blogger Article
November 18, 2009tutorials are very interesting and I love it thanks for the advice you gave
Ian Brodie ~ Get More Clients
December 6, 2009Excellent – the Pull quotes lesson was particularly useful (though now I’m trying to figure out how to do it through Thesis hooks).
Ian
ktown
March 15, 2010I liked the pull quotes tutorial.
Jen Pruett
April 26, 2010CSS type set is my favorite I use it all the time, this is great resource thanks for sharing,
Jen
1 Trackback
[...] 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 [...]