Menu Search
Jump to the content X X

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

50 Useful Design Tools For Beautiful Web Typography

Typography is elegant when it is attractive and communicates the designer’s ideas. When chosen wisely and used carefully, it can be very effective in supporting the overall design. Designers are always exploring different techniques with type: some use images or sIFR to produce very beautiful typography, while others prefer CSS alone to get the typography just right.

Today, we will look at 50 most useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly. These tools are great for experimenting with different font types for your website.

Below we cover typographic tools, useful typographic references, font browsers, typographic CSS- and JavaScript-techniques, hyphenation techniques, sIFR tools and resources, grids and related tools, free and commercial fonts, a guide to Web typography, examples of great Web typography.

Please feel free to suggest further tools and resources in the comments to this post. And if you like this post please feel free to subscribe to our RSS-feed Subscribe to our RSS-feed and follow us on Twitter1 Follow us on Twitter2.

You may want to take a look at the following related articles:

1. Useful typographic references Link

Better CSS Font Stacks
A couple of useful font cascades for your CSS-stylesheet.

Useful Typographic Tools

Striking Web Sites with Font Stacks that Inspire5
With the right knowledge of CSS font stacks we’re one step closer to letting our imagination design a better Web experience for everyone

Useful Typographic Tools6

Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite (via @lucianosb8 on Twitter)

Useful Typographic Tools9

Common fonts to all versions of Windows & Mac equivalents10
The list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as “browser safe fonts”.

Useful Typographic Tools11

Default Mac OS X 10.4 fonts list12 (via Elementiks1613)

Useful Typographic Tools14

Default Windows fonts list15 (via Elementiks1613)

Useful Typographic Tools17

2. Typographic Tools Link

Instead of doing your own testing, use the useful and time-saving tools below. They’ll help you play with typography and make choices by giving you a real-time preview of many of the available CSS font properties.

HTML Ipsum18
A useful little website created by Chris Coyier. It provides you with the standard Latin text already in HTML tags. Clicking on any of the blocks automatically copies the text to your clipboard!

Useful Typographic Tools19

Typechart lets you flip through, preview and compare Web typography while retrieving the CSS. You can browse different typographic styles. Each style corresponds to a style ID, which allows you to annotate prototypes and retrieve the CSS while coding. Another useful feature is that you can compare Windows (ClearType) rendering with Apple font rendering.


TTFTitles WordPress Plugin
This plugin lets you use images to replace the titles of your posts, thus circumventing the problem of guessing what fonts your end-users might have installed (via hyperdjango).

Useful Typographic Tools

FontStruct is a free font-building tool that lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

Useful Typographic Tools23

abcTajpu Firefox Extension24
Type in accented letters, international characters or symbols into Firefox or Thunderbird, either simply by using a context menu (there being support for many languages), or quickly by keyboard macro (you can even define your own).

Useful Typographic Tools25

This tool converts pixel-units to em-units using the 16px browser default size (via @briancray27 and @CasJam28 on Twitter).

Useful Typographic Tools29

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

Em Calculator

CSSTYPE v2 lets you preview your text as you modify it. You can set the font-family, size, color, letter-spacing, word-spacing, line-height and other properties. The CSS code can be generated easily once you are satisfied with the previews.

Useful Typographic Tools31

CSS-Typoset Matrix and code generator32
This tool (unfortunately, only in German) calculates font-sizes and line-height in em and px and presents them in a matrix. The tool computes both symmetrical and asymmetricam margin. Useful!

Useful Typographic Tools33

wp-typogrify WordPress Plugin
wp-typogrify is a collection of Django template filters that help prettify your web typography by preventing ugly quotes and widows and providing CSS hooks to style some special cases. Python-script for Django is available as well.

Useful Typographic Tools

After you find the font that you would like to use, Font Burner gives you a chunk of code that you will insert into the head of your webpage. Provided you don’t have any stylesheet conflicts, the new font will show up on your site immediately.

Useful Typographic Tools35

Convert TrueType Font to sIFR Flash File
Upload your typeface and the tool generates the Flash-file (swf) and sends it to your e-mail.

Text 2 PNG Conversion36
This service provides you with the ability to convert you headlines and navigations to PNG images automaticlly. It works by adding a JavaScript file and selecting which tags to replace. Useful, for instance if you want to generate an image with an embedding e-mail-address.

7 Free Tools To Identify A Font37
A list of free online tools to speed up the identification process.

21 Typography Web Applications You Can’t Live Without38

3. Choosing a font Link

Type Tester39
Type Tester is an online application that allows you to test different typefaces. You have three columns of text and can modify the typography any way you please. You then get the CSS that accompanies your selections.

Useful Typographic Tools40

This tools enables you to preview fonts installed on your system online.

Useful Typographic Tools42

Font Picker
This simple tool shows you all the fonts installed on your computer and helps you choose which one is most suitable for a particular project. Also available as Adobe AIR application.

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.

Useful Typographic Tools

CSS Type Set43
CSS Type Set is a handy tool that lets you preview your CSS text as you modify it, and it generates the code for you immediately (@jmreedy44).

Useful Typographic Tools45

Flipping Typical46
This is a nice way to explore the popular typefaces you have on your computer and see which one fits the project you are working on. This is done by creating text that is displayed using various typefaces from your computer.

Useful Typographic Tools47

4. Typographic Techniques Link

12 Examples Of Paragraph Typography48
A showcase of some interesting techniques for designing paragraphs, by Jon Tan. Some of these styles are experiments using pseudo elements and adjacent sibling selectors; browser support is not consistent.

Useful Typographic Tools49

Rendering Complex Type — Who’s got the Love?50
Learn how to create a complex typographic sample with pure CSS.

Useful Typographic Tools51

10 Examples of Beautiful CSS Typography and How They Did It52
A lot of great websites out there have beautiful typography using only CSS. But simply looking at them gives you only half the picture. This post showcases examples of good clean typography using nothing but CSS, and it explains what the designers did to achieve this beautiful type.

Useful Typographic Tools53

With typeface.js, you can embed custom fonts on your Web pages so that you don’t have to render text as images. What makes it different is that it’s JavaScript only, not JavaScript and Flash like sIFR54, or JavaScript and PHP like FLIR. So, instead of creating images or using Flash just to show your website’s text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as though your visitors had the font installed locally. It’s pretty easy to use: load the typeface.js library and some typeface.js fonts, then proceed as normal.

Useful Typographic Tools

Facelift Image Replacement (FLIR)
Facelift Image Replacement (FLIR) is an image replacement script that dynamically generates image representations of text on your Web page in fonts that otherwise might not be visible to your visitors. The generated image is automatically inserted into your Web page via JavaScript and is visible in all modern browsers. Any element with text can be replaced, from headers (<h1>, <h2>, etc.) to <span> elements and everything in between! FLIR is SEO-friendly and only renders an image if JavaScript is enabled on the user’s browser. If you are using WordPress for your blog, you might find this plug-in55 useful to easily apply FLIR to your Web pages.

Useful Typographic Tools

PHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement 57method, allowing you to take a vanilla, standards-based (X)HTML Web page and dynamically create images to replace page headings, using only PHP and CSS. The technique is currenty unavailable for download.

Useful Typographic Tools58

Advanced Typography Techniques Using CSS59
While descriptions and basic uses of CSS typography controls have been beaten to death, many rich typographic capabilities of CSS are still not well documented. This post is a great example of what you can do by combining and tweaking type using CSS. Different techniques are introduced: reflections, drop characters, handwriting, newspaper headlines and more.

Useful Typographic Tools60

Typographic Contrast and Flow61
Typographic contrast is important because not every piece of content on a page has the same weight: some have greater significance than others. By creating contrast, you direct the reader’s attention to the important messages and also enhance visual appeal. Here are seven basic methods for creating typographic contrast, using size, typeface, color, case, style/decoration, weight and space.

Useful Typographic Tools62

5. Hyphenation Link

OnLine Hyphenation63
This tool takes care of automatic Automatic hyphenation for texts and sites. The tool uses &shy; and inserts hyphens in the right places to make the justified text look readable. The tool is a little bit buggy and not perfect, but is still useful.

Hyphenator.js brings client-side hyphenation of HTML documents to every browser by inserting soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation algorithm commonly known from LaTeX and OpenOffice. The goal is to provide hyphenation in all browsers that support JavaScript and the soft hyphen for at least English, German and French. Here is the server-side script that does the hyphenation65.

6. sIFR Link

sIFR 2.0: Rich Accessible Typography for the Masses66
sIFR (or Scalable Inman Flash Replacement) is a technology that allows you to replace text elements on the page with Flash equivalents. It uses JavaScript to target certain text page elements and replace them with Flash, which results in the same text but rendered in a new font. This means you are free to use any font you wish in your design, instead of being limited to a very small set of “safe” Web fonts. sIFR is easier to implement than any other image replacement technique. Instead of manually generating each header with an image editor, you’re able to skip the editor completely.

Useful Typographic Tools67

sIFR lite68
A solution similar to the original sIFR package, but smaller (3.7 Kb) than the original (22 Kb) and including even more nifty features. It auto-detects the color of text elements, is completely object-oriented, doesn’t use CSS selectors and targets elements by tag name and class.

A repository of sIFR fonts, rated, tagged and available for download. Users can submit their SWF-files as well. Please notice that you need to respect all copyright and licensing laws – some of the featured fonts appear to be commercial (via chrisjlee69).

Useful Typographic Tools

jQuery sIFR Plugin70
The jQuery sIFR Plugin is an add-on for jQuery that makes it easy to replace text on a Web page with Flash text (sIFR). The jQuery sIFR Plugin does all the work of figuring out the text, files, sizes, colors and any other configuration needed to convert text to a beautiful sIFR font, with consistent behavior across all major browsers.

Useful Typographic Tools71

Multi color sIFR 2.0.172
This version of sIFR supports strong, em and span-elements and can color parts of the headline in colors.

Useful Typographic Tools73

sIFR Generator74
The big disadvantage of sIFR is that creating sIFR files is a tedious task that also requires Adobe Flash Studio in order to create a .swf file with the font of your choice. At least, that was the big disadvantage until now. sIFR Generator is an online tool that allows you to create sIFR .swf files with a few clicks of your mouse. Simply upload the TTF font of the font you want to convert, preview and download.

7. Grids Link

gridr buildrrr75
This tool generates various grids on the fly and allows users to define the width of the grids, gutter as well as boxes for the layout.

Useful Typographic Tools76

The Grid System77
An aggregator of articles, tools, books and resources related to grid-systems.

Useful Typographic Tools78

Typographic Grid79
If your website is heavy with text content, you will need to pay attention to the underlying grid. Check out Typography Grid, created recently by Chris Coyier: “I was just screwing around with typography and getting things to line up according to a strict horizontal and vertical grid. It was inspired by the Compose to a Vertical Rhythm80 article by Richard Rutter a few years ago, except uses unitless line height81.” Check out the demo here82.

Useful Typographic Tools83

Grid Designer84
Anyone looking for a little help to get going with grid design should look at this handy tool. Grid Designer 2 lets you set variables for your layout, such as the number of columns, the width in pixels, gutters and margins. You can also set variables for the typography, so that you can control the size, weight, line height and other variables for your paragraphs and titles. After you set up your desired layout, all you have to do is export the CSS to use in your own design.

Useful Typographic Tools85

Vertical rhythm calculator
This AIR application allows Web developers who use XHTML and CSS to build their pages to understand and calculate values for vertical rhythm86. Enter your starting values in the application, and then you have the option of copying the resulting CSS code onto you clipboard for pasting into your existing style sheet.

Useful Typographic Tools

8. Free and Commercial Fonts Link

40+ Excellent Freefonts For Professional Design87
An overview of over 40 excellent free fonts you might use for your professional designs in 2009.

Useful Typographic Tools88

60 Brilliant Typefaces For Corporate Design89
Over 60 first-class commercial typefaces for corporate design.

Useful Typographic Tools90

80 Beautiful Typefaces For Professional Design91
Over 80 gorgeous typefaces for professional design, based upon suggestions from designers and web-developers all over the world.

Useful Typographic Tools92

A growing collection of free high-quality fonts. More high-quality free fonts94.

Useful Typographic Tools95

Top 10 (Commercial) Fonts Of 200896
This article lists this year’s most successful fonts on MyFont – in each genre. Based on sales numbers.

Useful Typographic Tools97

Clean font showcase98
An extensive collection of clean, legible free fonts.

Useful Typographic Tools99

Veerle Pieters’ 10 favourite typefaces100

Useful Typographic Tools101

9. A Guide to Web Typography Link

Good typefaces are designed for a purpose. Below, you will find very informative articles and guidelines, created by masters of typography to show us the overall effect that good type has on a project.

On Choosing Type102
A good article from I Love Typography on choosing the right typeface. The article explains everything from choosing between serif and sans-serif fonts to remembering to honor and read the content. It’s a great post for improving your typography skills.

Useful Typographic Tools103

The 100% Easy-2-Read Standard104
Best practices for good typography on the Web from Oliver Reichenstein.

Useful Typographic Tools105

Don’t be afraid of Serif Fonts106
David Rodriguez discusses the advantages and disadvantages of sans-serif and serif fonts and suggests best practices.

Elegant Web Typography107
A great presentation by Jeff Croft about Web typography.

Useful Typographic Tools108

10 Common Typography Mistakes109
The goal of this post is to help designers and clients understand the importance of good typography skills and avoid some common mistakes.

The Non-Typographer’s Guide to Practical Typeface Selection110
Check out Cameron Moll’s magic formula for picking the right typeface for your needs.

  • Make a list of those familiar typefaces that you trust and know will work well in a variety of projects.
  • Supplement that list with a list of unfamiliar typefaces that address specific objectives for the project at hand.
  • Test each typeface in small and large sizes.
  • Test in both caps and lowercase.

The Principles of Beautiful Typography111
This is a great article that is actually extracted from the SitePoint book The Principles of Beautiful Web Design. The article goes into detail on fonts, letter forms, spacing, text size and more. It’s a great and informative read.

Five Simple Steps to Better Typography
A series of articles by Mark Boulton that is highly worthwhile to read.

101 Typography Resources for Web Designers112
A great list of typography-related resources from our author, Steven Snell.

10. Examples of Great Web Typography Link

Some of the designs shown below demonstrate that sometimes less really is more. Others made it onto the list because they use text very well and demonstrate how the grid can be used to do wonders for the whole design.

Jon Tangerine113

Useful Typographic Tools114

Viget Inspire115

Useful Typographic Tools116


Useful Typographic Tools118


Useful Typographic Tools120

Alex Buga121

Useful Typographic Tools122

Wilson Miner123

Useful Typographic Tools124

Colour Pixel125

Useful Typographic Tools126


Useful Typographic Tools128

Mark Dearman129

Useful Typographic Tools130

Blogger Bake Off

Useful Typographic Tools

Fixie Consulting

Useful Typographic Tools


Useful Typographic Tools132

Guilherme Neumann133

Useful Typographic Tools134


Useful Typographic Tools136

Design Trends 2009137

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009138

Design Trends 2009139

Design Trends 2009

17 Stimulating Flickr Groups to Get You Typographically Inspired140
This is a list of some of the best typography Flickr groups to feed your creative appetite.

Useful Typographic Tools141

20 Websites With Beautiful Typography142
In this collection, you’ll find a variety of websites that showcase creative and functional uses of typography.

Useful Typographic Tools143


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128
  129. 129
  130. 130
  131. 131
  132. 132
  133. 133
  134. 134
  135. 135
  136. 136
  137. 137
  138. 138
  139. 139
  140. 140
  141. 141
  142. 142
  143. 143

↑ Back to top Tweet itShare on Facebook


Noura Yehia is a Web designer and blogger and the former owner of If you want to connect with the author, you can follow her on Twitter.

  1. 1

    great! nice to see so many useful tools at one place….Thanks.

  2. 2

    Nice One !!

  3. 3

    Brian Gottier

    January 27, 2009 8:18 pm

    A wonderful collection of information. Thank you!

  4. 4

    gosh! really usefull link.. thanks smagz!

  5. 5

    One of the most helpful articles ever. Thanks!! I’m starting to get the hang of the grid, and it makes me want to redesign my page. Should I start over, or am I fixable?

  6. 6

    Wonderful list , I love using the em calculator.

  7. 7


    January 27, 2009 8:34 pm

    As usual, I see one of your amazing posts just as I am heading to sleep. Then, I naturally have to sit and read the entire thing start to finish. This might be my favorite post of the year so far. My delicious bookmarks are going to be overflowing… Thanks for such high quality and consistent content!

  8. 8

    Great timing…was just looking for this

  9. 9

    Good work guys. First time commenting here but I just had to say that this post is fantastic. I’ll be using a bunch of this stuff when I work on my next designs.

  10. 10

    As always what a great collection of resources. Thank you SM!

  11. 11

    great stuff! I will be definitely considering this phase with more focus now!

  12. 12

    Fantastic post! Takes me another two days to read and try it all out. Thanks SM ;)

  13. 13

    jQuery sIFR Plugin is listed twice in Section 6?

  14. 14

    Great post! Thank you for taking your time in writing this. I was just telling my managers and co-workers the importance of siFR and web typography and this post could not have come at a better time.

  15. 15

    This is awesome. Thanks a lot.

  16. 16

    i love Typography, great resources :) thanks

  17. 17

    Great Great Great!!!

  18. 18

    Wonderful collection of tools for Typography! Thanks a lot!!

    I was wondering… According to you, Smashing Magazine (or anybody else…)
    what is the best solution for image replacement?

  19. 19

    It will take me week to explore this resource. Huge Thanks!

  20. 20

    Grid section looks awesome, ty


↑ Back to top