If you are a web designer, or a passionate CSS hobbyist, you must be aware of the impact well structured typography can have on your overall design. Though, optimizing your typography to work on old and new versions of plethora of web browsers on various operating systems can prove to be quite a headache. With the following list of resources, you can learn, optimize, and beautify your web typography, and never need to worry about those pesky compatibility issues again (I wish!).

Typography Tools

• Typetester

  The Typetester is an online application for comparison of the fonts for the screen. Its’ primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

• CSSTYPE

  Web Safe Typography on Screen for Pixel Perfectionists.

• sIFR

  sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash.

• Font Tester
  

  Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them.

• Designer Plaything
  
  A tool for designers and clients to experiment with different typography and colour combinations on a web page as well as check for colour accessibility level.
• Em Calculator

  Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

• CSS with vertical rhythm

  This tool will help you compute CSS that has a consistent vertical rhythm.

• Colour Contrast Check

  The Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast “when viewed by someone having color deficits or when viewed on a black and white screen”

• Lorem Ipsum

  Lorem Ipsum is simply dummy text of the printing and typesetting industry.

• PHP + CSS Dynamic Text Replacement

  P+C DTR allows you to take a vanilla standards-based (X)HTML web page and dynamically create images to replace and enhance page headings using only PHP + CSS. Sick of using the same three fonts? Tired of editing heading images in PhotoShop? If so, P+C DTR might be for you.

• Baseline Rhythm Calculator
  
  Baseline Rhythm Calculator can be used to generate a basic stylesheet with the proper calculations.

Typography Books

• The Elements of Typographic Style

  This lovely, well-written book is concerned foremost with creating beautiful typography and is essential for professionals who regularly work with typographic designs. Author Robert Bringhurst writes about designing with the correct typeface; striving for rhythm, proportion, and harmony; choosing and combining type; designing pages; using section heads, subheads, footnotes, and tables; applying kerning and other type adjustments to improve legibility; and adding special characters, including punctuation and diacritical marks. The Elements of Typographic Style teaches the history of and the artistic and practical perspectives on a variety of type families that are available in Europe and America today.

• Thinking with Type
• Great Web Typography

  Author shares the secrets the professionals use to resolve the problems of web typography and create eye-catching Web typography that looks as good when viewed with Explorer 4.

• The Designer’s Guide to Web Type

  This is the must-have reference guide for digital designers, graphic artists, new media artisans and typographers who use type as a creative tool in their work. It showcases the latest, greatest type fonts of the world’s hottest online foundries, their Internet addresses (for downloading software or freeware) and electrifying examples of their graphic design applications.

• Type Rules!: The Designer’s Guide to Professional Typography

  Type Rules!, Second Edition is an up-to-date, thorough introduction to the principles and practices of typography. From the fundamentals to cutting-edge applications, this Second Edition has everything today’s serious designer needs. Dozens of exercises reinforce authoritative coverage on such topics as how to select the appropriate type for the job, how to set type like a pro, how to avoid common mistakes, and how to design a typeface, as well as how to fully harness the power of major design packages like Adobe InDesign and QuarkXPress.

• Typographically Speaking: The Art of Matthew Carter
  

  Typographically Speaking: The Art of Matthew Carter entered the field in the days of hand-cut punches and hot-metal type, and has continued to innovate through the eras of photocomposition and digital design. Essays discuss the form of his work, his position and use of typographic history, and his technological innovation. All of his fonts are reproduced in full for reference, and illustrations place his designs in context.
  Published in conjunction with the University of Maryland Baltimore County.

Typography Articles

• Five simple steps to better typography
• The non-typographer’s guide to practical typeface
• The Type Studio PDF Typography Articles
• Fine Tuning Web Typography
• 15 Excellent Examples of Web Typography
• Web Typography Style Guide
• The Elements of Typographic Style Applied to the Web
• Typography Crash Course Roundup
• Rules of Typography
• Common fonts to all versions of Windows & Mac equivalents
• Top 40 font survey results for Windows, Mac and Unix family fonts combined
• CSS Typography
• 15 tips to choose a good text type
• A List Apart Typography Articles
• Web Design is 95% Typography
• Clagnut list of typography articles
• Complete Typography Guide

Free typefaces/fonts

• Download fonts | dafont.com
• TypeNow.net Themed Fonts Download Free Movie and Music Fonts
• 80 Beautiful Typefaces For Professional Design
• Orgdot open source pixel and led fonts
• Great Fonts for Web 2.0
• Neat fonts - Discover Free fonts from all over the web
• Essential Fonts For Designers | 300 Free Truetype Fonts You Should Have
• Abstract Fonts - your type - 10 000 Free Fonts
• Download 10000 Free Fonts
• 25 Best Free Quality Fonts
• Download Fonts - 1001 Free Fonts
• Pixel Fonts and Super Pixel Fonts
• Better fonts - over 10,000 fonts for free!
• Search Free Fonts - over 13,000 free fonts available for download
• Free Downloadable Fonts, Dingbats and Font Tools at FontRiver.com

Other typography resources

• Typography For Headlines

  A showcase of headline typographic design from across the web.

• Inspiration for typography at Design Creme
  
• Typographica: A Journal of Typography

  Typographica is a journal of typography featuring news, observations, and open commentary on fonts and typographic design.

• Typophile: Typographic Collaboration
• I Love Typography

Related posts

• 40 Best Personal Organization Tools To Boost Your Productivity (8)
• Create a Blogging Plan by Breaking Down Objectives into Task List (8)
• DMCA Guide For Bloggers: How To Give Sploggers A Run For Their Money (6)