50 Useful Design Tools For Beautiful Web Typography

Advertisement

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-feed1 Subscribe to our RSS-feed2 and follow us on Twitter3 Follow us on Twitter4.

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

1. Useful typographic references

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

Useful Typographic Tools8

Striking Web Sites with Font Stacks that Inspire9
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 Tools10

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

Useful Typographic Tools13

Common fonts to all versions of Windows & Mac equivalents14
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 Tools15

Default Mac OS X 10.4 fonts list16 (via Elementiks2017)

Useful Typographic Tools18

Default Windows fonts list19 (via Elementiks2017)

Useful Typographic Tools21

2. Typographic Tools

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 Ipsum22
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 Tools23

Typechart24
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.

TypeChart25

TTFTitles WordPress Plugin26
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 hyperdjango27).

Useful Typographic Tools28

Fontstruct29
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 Tools30

abcTajpu Firefox Extension31
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 Tools32

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

Useful Typographic Tools36

Em Calculator37
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 Calculator38

CSSTYPE39
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 Tools40

CSS-Typoset Matrix and code generator41
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 Tools42

wp-typogrify WordPress Plugin43
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 Django44 is available as well.

Useful Typographic Tools45

FontBurner46
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 Tools47

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

Text 2 PNG Conversion49
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 Font50
A list of free online tools to speed up the identification process.

21 Typography Web Applications You Can’t Live Without51

3. Choosing a font

Type Tester52
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 Tools53

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

Useful Typographic Tools55

Font Picker56
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 application57.

FontTester58
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 Tools59

CSS Type Set60
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 (@jmreedy61).

Useful Typographic Tools62

Flipping Typical63
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 Tools64

4. Typographic Techniques

12 Examples Of Paragraph Typography65
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 Tools66

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

Useful Typographic Tools68

10 Examples of Beautiful CSS Typography and How They Did It69
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 Tools70

typeface.js71
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 sIFR72, or JavaScript and PHP like FLIR73. 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 Tools74

Facelift Image Replacement (FLIR)75
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-in76 useful to easily apply FLIR to your Web pages.

Useful Typographic Tools77

P+C DTR78
PHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement 79method, 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 Tools80

Advanced Typography Techniques Using CSS81
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 Tools82

Typographic Contrast and Flow83
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 Tools84

5. Hyphenation

OnLine Hyphenation85
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.

Hyphenator86
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 hyphenation87.

6. sIFR

sIFR 2.0: Rich Accessible Typography for the Masses88
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 Tools89

sIFR lite90
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.

sIFRvault91
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 chrisjlee92).

Useful Typographic Tools93

jQuery sIFR Plugin94
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 Tools95

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

Useful Typographic Tools97

sIFR Generator98
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

gridr buildrrr99
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 Tools100

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

Useful Typographic Tools102

Typographic Grid103
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 Rhythm104 article by Richard Rutter a few years ago, except uses unitless line height105.” Check out the demo here106.

Useful Typographic Tools107

Grid Designer108
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 Tools109

Vertical rhythm calculator110
This AIR application allows Web developers who use XHTML and CSS to build their pages to understand and calculate values for vertical rhythm111. 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 Tools112

8. Free and Commercial Fonts

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

Useful Typographic Tools114

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

Useful Typographic Tools116

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

Useful Typographic Tools118

Fontsquirrel119
A growing collection of free high-quality fonts. More high-quality free fonts120.

Useful Typographic Tools121

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

Useful Typographic Tools123

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

Useful Typographic Tools125

Veerle Pieters’ 10 favourite typefaces126

Useful Typographic Tools127

9. A Guide to Web Typography

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 Type128
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 Tools129

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

Useful Typographic Tools131

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

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

Useful Typographic Tools134

10 Common Typography Mistakes135
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 Selection136
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 Typography137
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 Typography138
A series of articles by Mark Boulton that is highly worthwhile to read.

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

10. Examples of Great Web Typography

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 Tangerine140

Useful Typographic Tools141

Viget Inspire142

Useful Typographic Tools143

works4sure144

Useful Typographic Tools145

24ways146

Useful Typographic Tools147

Alex Buga148

Useful Typographic Tools149

Wilson Miner150

Useful Typographic Tools151

Colour Pixel152

Useful Typographic Tools153

Maxvoltar154

Useful Typographic Tools155

Mark Dearman156

Useful Typographic Tools157

Blogger Bake Off158

Useful Typographic Tools159

Fixie Consulting160

Useful Typographic Tools161

Drupalcon162

Useful Typographic Tools163

Guilherme Neumann164

Useful Typographic Tools165

Sursly166

Useful Typographic Tools167

Design Trends 2009168

Design Trends 2009169

Design Trends 2009170

Design Trends 2009171

Design Trends 2009172

Design Trends 2009173

Design Trends 2009174

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

Useful Typographic Tools176

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

Useful Typographic Tools178

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-rss.php
  2. 2 http://www.smashingmagazine.com/wp-rss.php
  3. 3 http://twitter.com/smashingmag
  4. 4 http://twitter.com/smashingmag
  5. 5 http://www.smashingmagazine.com/2009/01/20/50-extremely-useful-php-tools/
  6. 6 http://www.smashingmagazine.com/2008/12/09/50-really-useful-css-tools/
  7. 7 http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
  8. 8 http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
  9. 9 http://www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/
  10. 10 http://www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/
  11. 11 http://media.24ways.org/2007/17/fontmatrix.html
  12. 12 http://www.twitter.com/lucianosb
  13. 13 http://media.24ways.org/2007/17/fontmatrix.html
  14. 14 http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
  15. 15 http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
  16. 16 http://support.apple.com/kb/HT1538
  17. 17 http://elementiks.com/web_resources.php
  18. 18 http://support.apple.com/kb/HT1538
  19. 19 http://www.microsoft.com/typography/fonts/default.aspx
  20. 20 http://elementiks.com/web_resources.php
  21. 21 http://www.microsoft.com/typography/fonts/default.aspx
  22. 22 http://html-ipsum.com/
  23. 23 http://html-ipsum.com/
  24. 24 http://www.typechart.com/
  25. 25 http://www.typechart.com/
  26. 26 http://www.hostscope.com/wordpress-plugins/ttftitles-wordpress-plugin/
  27. 27 http:/www.twitter.com/hyperdjango
  28. 28 http://www.hostscope.com/wordpress-plugins/ttftitles-wordpress-plugin/
  29. 29 http://fontstruct.fontshop.com/
  30. 30 http://fontstruct.fontshop.com/
  31. 31 https://addons.mozilla.org/en-US/firefox/addon/459
  32. 32 https://addons.mozilla.org/en-US/firefox/addon/459
  33. 33 http://pxtoem.com/
  34. 34 http://www.twitter.com/briancray
  35. 35 http://www.twitter.com/CasJam
  36. 36 http://pxtoem.com/
  37. 37 http://riddle.pl/emcalc/
  38. 38 http://riddle.pl/emcalc/
  39. 39 http://www.suprb.com/apps/csstype/
  40. 40 http://www.suprb.com/apps/csstype/
  41. 41 http://www.jan-quickels.de/tools-web-typography/
  42. 42 http://www.jan-quickels.de/tools-web-typography/
  43. 43 http://blog.hamstu.com/2007/05/31/web-typography-just-got-better/
  44. 44 http://jeffcroft.com/sidenotes/2007/may/29/typogrify-easily-produce-web-typography-doesnt-suc/
  45. 45 http://blog.hamstu.com/2007/05/31/web-typography-just-got-better/
  46. 46 http://www.fontburner.com/
  47. 47 http://www.fontburner.com/
  48. 48 http://ianpurton.com/sifr/
  49. 49 http://www.text2png.com/
  50. 50 http://www.webdesignerdepot.com/2008/12/7-free-tools-to-identify-a-font/
  51. 51 http://speckyboy.com/2009/01/12/21-typography-and-font-web-apps-you-cant-live-without/
  52. 52 http://www.typetester.org/
  53. 53 http://www.typetester.org/
  54. 54 http://www.stcassociates.com/lab/fontbrowser.html
  55. 55 http://www.stcassociates.com/lab/fontbrowser.html
  56. 56 http://richardsprojects.co.uk/products/font-picker/
  57. 57 http://richardsprojects.co.uk/products/font-picker/fontpicker.air
  58. 58 http://www.fonttester.com/
  59. 59 http://www.fonttester.com/
  60. 60 http://csstypeset.com/
  61. 61 http://www.twitter.com/jmreedy
  62. 62 http://csstypeset.com/
  63. 63 http://flippingtypical.com/
  64. 64 http://flippingtypical.com/
  65. 65 http://jontangerine.com/silo/typography/p/
  66. 66 http://jontangerine.com/silo/typography/p/
  67. 67 http://jontangerine.com/log/2007/11/rendering-complex-typewhos-got-the-love
  68. 68 http://jontangerine.com/log/2007/11/rendering-complex-typewhos-got-the-love
  69. 69 http://www.3point7designs.com/blog/2008/06/02/10-examples-of-beautiful-css-typography-and-how-they-did-it/
  70. 70 http://www.3point7designs.com/blog/2008/06/02/10-examples-of-beautiful-css-typography-and-how-they-did-it/
  71. 71 http://typeface.neocracy.org/
  72. 72 http://www.mikeindustries.com/sifr
  73. 73 http://facelift.mawhorter.net/
  74. 74 http://typeface.neocracy.org/
  75. 75 http://facelift.mawhorter.net/
  76. 76 http://wordpress.org/extend/plugins/facelift-image-replacement/
  77. 77 http://facelift.mawhorter.net/
  78. 78 http://artypapers.com/csshelppile/pcdtr/
  79. 79 http://www.alistapart.com/articles/dynatext
  80. 80 http://artypapers.com/csshelppile/pcdtr/
  81. 81 http://www.3point7designs.com/blog/2006/09/20/advanced-typography-techniques-using-css/
  82. 82 http://www.3point7designs.com/blog/2006/09/20/advanced-typography-techniques-using-css/
  83. 83 http://www.webdesignerwall.com/tutorials/typographic-contrast-flow/
  84. 84 http://www.webdesignerwall.com/tutorials/typographic-contrast-flow/
  85. 85 http://www.plazoo.com/en/tools.asp
  86. 86 http://code.google.com/p/hyphenator/
  87. 87 http://yellowgreen.de/hyphenation-in-web/
  88. 88 http://www.mikeindustries.com/blog/sifr/
  89. 89 http://www.mikeindustries.com/blog/sifr/
  90. 90 http://www.allcrunchy.com/Web_Stuff/sIFR_lite/
  91. 91 http://www.sifrvault.com
  92. 92 http://www.twitter.com/chrisjlee
  93. 93 http://www.sifrvault.com
  94. 94 http://jquery.thewikies.com/sifr/
  95. 95 http://jquery.thewikies.com/sifr/
  96. 96 http://webdesign.maratz.com/lab/multi_color_sifr/
  97. 97 http://webdesign.maratz.com/lab/multi_color_sifr/
  98. 98 http://www.sifrgenerator.com/
  99. 99 http://gridr.atomeye.com/
  100. 100 http://gridr.atomeye.com/
  101. 101 http://www.thegridsystem.org/
  102. 102 http://www.thegridsystem.org/
  103. 103 http://css-tricks.com/typographic-grid/
  104. 104 http://24ways.org/2006/compose-to-a-vertical-rhythm
  105. 105 http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
  106. 106 http://css-tricks.com/examples/TypographicGrid
  107. 107 http://css-tricks.com/typographic-grid/
  108. 108 http://grid.mindplay.dk
  109. 109 http://grid.mindplay.dk
  110. 110 http://www.jameswhittaker.com/blog/article/em-based-layouts-vertical-rhythm-calculator/
  111. 111 http://24ways.org/2006/compose-to-a-vertical-rhythm
  112. 112 http://www.jameswhittaker.com/blog/article/em-based-layouts-vertical-rhythm-calculator/
  113. 113 http://www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/
  114. 114 http://www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/
  115. 115 http://www.smashingmagazine.com/2008/03/20/60-brilliant-typefaces-for-corporate-design/
  116. 116 http://www.smashingmagazine.com/2008/03/20/60-brilliant-typefaces-for-corporate-design/
  117. 117 http://www.smashingmagazine.com/2007/08/08/80-beautiful-fonts-typefaces-for-professional-design/
  118. 118 http://www.smashingmagazine.com/2007/08/08/80-beautiful-fonts-typefaces-for-professional-design/
  119. 119 http://www.fontsquirrel.com/
  120. 120 http://www.smashingmagazine.com/category/fonts/
  121. 121 http://www.fontsquirrel.com/
  122. 122 http://www.myfonts.com/newsletters/sp/200901.html
  123. 123 http://www.myfonts.com/newsletters/sp/200901.html
  124. 124 http://350designs.com/resources/photoshop/clean-font-showcase
  125. 125 http://350designs.com/resources/photoshop/clean-font-showcase
  126. 126 http://veerle.duoh.com/blog/comments/my_top_10_favorite_typefaces/
  127. 127 http://veerle.duoh.com/blog/comments/my_top_10_favorite_typefaces/
  128. 128 http://ilovetypography.com/2008/04/04/on-choosing-type/
  129. 129 http://ilovetypography.com/2008/04/04/on-choosing-type/
  130. 130 http://informationarchitects.jp/100e2r/
  131. 131 http://informationarchitects.jp/100e2r/
  132. 132 http://www.wpdfd.com/issues/86/dont_be_afraid_of_serif_fonts/
  133. 133 http://www.slideshare.net/jeff_croft/elegant-web-typography-presentation
  134. 134 http://www.slideshare.net/jeff_croft/elegant-web-typography-presentation
  135. 135 http://www.thedesigncubicle.com/2008/12/10-common-typography-mistakes/
  136. 136 http://www.cameronmoll.com/archives/000240.html
  137. 137 http://www.sitepoint.com/article/principles-beautiful-typography/
  138. 138 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography/
  139. 139 http://vandelaydesign.com/blog/design/typography-resources/
  140. 140 http://jontangerine.com/
  141. 141 http://jontangerine.com/
  142. 142 http://www.viget.com/inspire/
  143. 143 http://www.viget.com/inspire/
  144. 144 http://www.works4sure.nl/
  145. 145 http://www.works4sure.nl/
  146. 146 http://24ways.org/
  147. 147 http://24ways.org/
  148. 148 http://www.alexbuga.com/
  149. 149 http://www.alexbuga.com/
  150. 150 http://www.wilsonminer.com/
  151. 151 http://www.wilsonminer.com/
  152. 152 http://www.colourpixel.com/
  153. 153 http://www.colourpixel.com/
  154. 154 http://maxvoltar.com/
  155. 155 http://maxvoltar.com/
  156. 156 http://www.markdearman.com/
  157. 157 http://www.markdearman.com/
  158. 158 http://www.bloggerbakeoff.com/
  159. 159 http://www.bloggerbakeoff.com/
  160. 160 http://fixieconsulting.com/
  161. 161 http://fixieconsulting.com/
  162. 162 http://dc2009.drupalcon.org/
  163. 163 http://dc2009.drupalcon.org/
  164. 164 http://www.guilhermeneumann.com/
  165. 165 http://www.guilhermeneumann.com/
  166. 166 http://www.sursly.com/#work
  167. 167 http://www.sursly.com/#work
  168. 168 http://www.francescomugnai.com/
  169. 169 http://madebygiant.com/
  170. 170 http://theautumnfilm.com/red-white-sale/us.html
  171. 171 http://www.signalapps.com/
  172. 172 http://www.blackestate.co.nz/
  173. 173 http://www.onefastbuffalo.com/
  174. 174 http://www.shiftpx.com/
  175. 175 http://www.bittbox.com/fonts/17-stimulating-flickr-groups-to-get-you-typographically-inspired/
  176. 176 http://www.bittbox.com/fonts/17-stimulating-flickr-groups-to-get-you-typographically-inspired/
  177. 177 http://sixrevisions.com/web_design/20-websites-with-beautiful-typography/
  178. 178 http://sixrevisions.com/web_design/20-websites-with-beautiful-typography/

↑ Back to topShare on Twitter

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

Advertising
  1. 1

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

    0
  2. 2

    Nice One !!

    0
  3. 3

    A wonderful collection of information. Thank you!

    0
  4. 4

    gosh! really usefull link.. thanks smagz!

    0
  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?

    0
  6. 6

    Wonderful list , I love using the em calculator.

    0
  7. 7

    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!

    0
  8. 8

    Great timing…was just looking for this

    0
  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.

    0
  10. 10

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

    0
  11. 11

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

    0
  12. 12

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

    0
  13. 13

    jQuery sIFR Plugin is listed twice in Section 6?

    0
  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.

    0
  15. 15

    This is awesome. Thanks a lot.

    0
  16. 16

    i love Typography, great resources :) thanks

    0
  17. 17

    Great Great Great!!!
    Thanks!

    0
  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?

    0
  19. 19

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

    0
  20. 20

    Grid section looks awesome, ty

    0
  21. 21

    Daryl Walker-Smith

    January 28, 2009 12:32 am

    Sweet post – can see why it took you guys so long!

    0
  22. 22

    From the Font Burner site -“Font Burner uses valid XHTML and adheres to web standards.”

    Since when has div class=”alba_super” , naming a div after a visual style, been adhering to web standards?!

    If someone could direct me to a good sIFR tutorial, I’d love it. So far, I can never seem to make it work :(

    -2
  23. 23

    Once again, a comprehensive and excellent collection of useful things. Thanks.

    0
  24. 24

    Fantastic post. It initially promised a possible alternative to sifR but on further reading it seems like sifR is proabably the best solution to displaying specific fonts on websites. Typeface.js wouldnt allow the font I wanted and P+C DTR isnt available for download. Anyone know any other safe methods? Non-flash no jscript?

    0
  25. 25

    Mohammad Alshaikh

    January 28, 2009 1:19 am

    amazing..

    0
  26. 26

    i like it a lot, i really needed something along these lines – thanks alot

    0
  27. 27

    Pure, visual porn. Typography is orgasmic to the eyes.

    0
  28. 28

    Excellent ! Thanks a lot.

    0
  29. 29

    Zeki Volkan Iscen

    January 28, 2009 2:27 am

    Mükemmel! (perfect)

    0
  30. 30

    Oh this…

    This made me come late to work today. :’3

    0
  31. 31

    Excellent post. I’ve loved typography and now I love Smashing too :)

    0
  32. 32

    Good list!

    @Laura: Did you test it locally? Because that will not work. You have to put all the files to your webserver. Maybe that’s where you took a wrong turn. At least I did. ;)
    Anyway, you could try out this tutorial: This is how you get sIFR to Work

    0
  33. 33

    Anyone got any info on font creation tools for mac.
    Fontographer is too expensive. There use to be a great one for PC called font creator that was about $50 but there doesn’t see to be a mac version. Anything you can think of would be great.

    0
  34. 34

    That’s a lot of excellent resources! Thanks, I’m sure I’ll be referring to this useful post in the future.

    0
  35. 35

    Another great post with a great collection ideas and things to try. My only problem is how the hell am I supposed to remember all of these? I can’t keep up.

    Could we have a monthly digest of the most viewed posts on SM ? So that people like me with only half a memory can remember what was great.

    0
  36. 36

    Facelift-FLIR-Image Replacement is also a great tool for using custom fonts on websites. I never could get sifr to work, but FLIR is easy. Best of all, there is a WordPress plugin for FLIR that is under active development and works in WordPress 2.7: FLIR plugin.

    0
  37. 37

    Amazing article, thanks!

    0
  38. 38

    I <3 SM! many times thanks

    0
  39. 39

    I should give sIFR a try one day. >:3

    -2
  40. 40

    Check this, it seems there are more hidden images in the paintings of Leonardo LINK

    0
  41. 41

    HOly flying cow kidnaped by UFO!!! This is an super duper awesome article.

    Nb. Sorry can’t helped it…

    0
  42. 42

    wow..this is a good CSS..i wil use this CSS for my website..
    Thank u..

    0
  43. 43

    I always feel smarter after reading Smashing Mag..

    Thanks, I love you guys!

    0
  44. 44

    Suggestions – change “Comments” to “Thanks”. In my opinion, no need to say thanks. What if someone leaves a good comment, with some additional great links or notes etc. User won’t notice it between these thanks messages.

    0
  45. 45

    Awesome collection !

    0
  46. 46

    great post, but where’s sIFR 3? sIFR 2 is three years old

    http://novemberborn.net/sifr3

    Anyone that’s interested in getting started with sIFR, Design Intellection has a great tut:

    http://designintellection.com/2008/this-is-how-you-get-sifr-to-work/

    0
  47. 47

    Great article, like always!!

    0
  48. 48

    I usually use technique 8 from here:

    http://css-tricks.com/nine-techniques-for-css-image-replacement/

    It requires you to create the image but it only uses css/html (no javascript, php, flash etc) and is seo friendly. If images are turned off plain text will be shown instead.

    0
  49. 49

    To think I nearly unbookmarked you! This and the preceding ten posts mark a true return to form! Welcome back Smashing!! I have about twenty tabs open now. Thank you.

    0
  50. 50

    Great suggestion LT. And thanks! haha.

    0
  51. 51

    One good font cascade is “Helvetica, Arial, sans-serif” in that way you are getting the best possible experience on the mac.

    LotusBoost

    0
  52. 52

    Once again another THUMBS UP for SM. excellent resources!!!
    I <3 “typetester “. Many thanks :)

    0
  53. 53

    This is absolutely wonderful, I love it. Definitely something I can use! <3

    0
  54. 54

    Fantastic post, typography is one of the hardest parts of web design and this list has some great resources.

    0
  55. 55

    Great Article…..Thanks for including colourpixel.

    0
  56. 56

    There are some really great resources in this article! I didn’t realize that there are so many font tools out there. Anyone else interested in what CSS3 may/will do for font replacement?

    0
  57. 57

    thank you

    0
  58. 58

    Another fantastic round-up by Smashing – thanks guys, you’re doing a fantastic job! :D

    0
  59. 59

    Don Clark -SignupAnytime.com

    January 30, 2009 1:41 pm

    Great post – but… STC Font Browser – hasnt worked in quite some time.
    I used to use it all the time.
    I believe its because their site doesnt work with newer versions of flash. I have emailed them, but no response.

    0
  60. 60

    One of the greatest Typo Article I’ve ever read! Appreciate to author and Smashing Magz. :)

    0
  61. 61

    Trying to avoid closed source Flash, I’ve recently switched from sIFR to Cufón, which does the same trick with canvas/vml instead Flash and has even better CSS support.

    0
  62. 62

    very good stuff SM, you rock

    0
  63. 63

    Thx alot :)
    i was looking for a replacement for sIFR and there you were writing about it :D

    0
  64. 64

    good stuff. thanks !

    0
  65. 65

    Thanks a lot SM ;)

    0
  66. 66

    Nice post.

    0
  67. 67

    I could spend a week experimenting with these tools … did I say a “week”? make that a “month”. Thanks for the great references.

    0
  68. 68

    I love you, Smashing Magazine!

    0
  69. 69

    I’ve just been getting into sIFR, which has been a godsend for attractive typography cross-browser…Thanks for the great post!

    0
  70. 70

    great stuff…..

    Thanks for SM

    0
  71. 71

    As it is, the jQuery sIFR Plugin doesn’t work with the new JQuery version 1.3. I looked around and found a simple fix Here.

    0
  72. 72

    Here’s another one: TypeDNA : FontShaker, it offers a cool Flash interface to visually explore fonts installed on your local machine! Discover fonts that you didn’t even know you had installed. FontShaker also allows fonts to be discovered by similarity using the font’s characteristics.

    0
  73. 73

    this article was great guys!!

    thanks a bunch =)

    I’m building my first website with css and php and this will be very useful since I’ve been struggling a bit with the kind of font I want to use. sweet!

    0
  74. 74

    Thanks

    0
  75. 75

    gracias por todo loco

    0
  76. 76

    joyoge designers' bookmark

    March 11, 2009 3:18 pm

    wonderful list thank you so much..

    0
  77. 77

    i wonder, do i really need the sifR in my website. sounds nice, but worried with the rendering and processing time. hmm.

    0
  78. 78

    Unfortunate that the PXtoEM author doesn’t understand the relationship between points and pixels. Not everybody using Windows uses the default screen dpi of 96.

    0
  79. 79

    its rocking. You guys are just awesome thanks a lot for this article

    0
  80. 80

    this was a great information stuff….!!!!!!!!!!!!

    0
  81. 81

    Smashing, I love you!

    0
  82. 82

    * john milton
    * April 2

    Hi..
    Cool list, thanks for taking your time and researching and posting these wonderful design themes on the net it might have taken a while.
    These would surely be an inspirational for all designers.
    Thanks.
    john..

    0
  83. 83
  84. 84
  85. 85

    Wonderful resource.

    0
  86. 86

    Excuse me. It really doesn’t matter if the person who hurt you deserves to be forgiven. Forgiveness is a gift you give yourself. You have things to do and you want to move on.
    I am from Taiwan and also am speaking English, give true I wrote the following sentence: “An airline ticket is a document, created by an airline or a travel agency, to confirm that an individual has purchased a seat on an airplane flight.”

    Thank you very much :p. Jada.

    0
  87. 87

    Finally! A truly useful set of information and references about typography on the web. Thank you so much!! I will be sharing this link!

    0
  88. 88

    OK but how to install this fonts so I could use them? where are TTF files? i cant find anything i could use, there are only jpg filesin zip archives… Help me please

    0
  89. 89

    FontBurner.com makes my website look awesome. It imports a custom font, Chow Fun, on top of my h2 and h3 headers.

    Of course, FontBurner.com’s sIFR is not working in internet explorer (ie).

    The sIFR IE hack I’m using disses (sp?) the poor 49% of Internet users still using IE. Here’s my redneck solution:




    <!--

    if !IE tells me that this code should only apply to browsers other than internet explorer.
    IGNORE tells IE to ignore loading the FontBurner.com sIFR javascript.

    Wa la! IE just loads the regular text only h2 and h3 headers.

    *Wa la! is Engrish for Voilà!

    0
  90. 90

    FontBurner com makes my website look awesome. It imports a custom font, Chow Fun, on top of my h2 and h3 headers.

    Of course, FontBurner com’s sIFR is not working in internet explorer (ie).

    The sIFR IE hack I’m using disses (sp?) the poor 49% of Internet users still using IE. Here’s my redneck solution:




    <!--

    if !IE tells me that this code should only apply to browsers other than internet explorer.
    IGNORE tells IE to ignore loading the FontBurner com sIFR javascript.

    Wa la! IE just loads the regular text only h2 and h3 headers.

    *Wa la! is Engrish for Voilà!

    0
  91. 91
  92. 92

    FontBurner com makes my website look awesome. It imports a custom font, Chow Fun, on top of my h2 and h3 headers.

    Of course, FontBurner com’s sIFR is not working in internet explorer (ie).

    The sIFR IE hack I’m using disses (sp?) the poor 49% of Internet users still using IE. Here’s my redneck solution:

    <!-

    if !IE tells me that this code should only apply to browsers other than internet explorer.
    IGNORE tells IE to ignore loading the FontBurner com sIFR javascript.

    Wa la! IE just loads the regular text only h2 and h3 headers.

    *Wa la! is Engrish for Voilà!

    0
  93. 93

    nevermind. won’t show my code.

    0
  94. 94

    I am always blown away by the content of the posts on smashing magazine. When you scroll half way down and expect it to end, its just beginning! Thanks for these typography tools Noura Yehia!

    0
  95. 95

    I hear that TypeDNA will use their font identification technology to introduce a tool that shows the closest free fonts to commercial fonts!! That will be cool. http://www.typedna.com

    0
  96. 96

    Pixelbox Design

    July 19, 2010 11:23 am

    Excellent Article, Added to favs, keep up the good work.

    0
  97. 97

    very useful.
    thanks.

    0
  98. 98

    Recently I have written an article about @font-face css3 technique. Which provides extensive level of flexibility to use fonts for the website.

    The major advantage of this techniques are as below I have mentioned.

    * Rely on browser rendering, the same as with web safe fonts
    * Cufon/Sifr are really the good in approach but css support is incomplete
    * Cufon/Sifr techniques must be implemented with java script support ( a great dependency )
    * Its really easy to embed fonts with just @font-face rule in stylesheet
    * Much better options are available as compare to Cufon / Sifr

    You can get more information about @font-face on my below blog.

    http://fontvilla.wordpress.com/2011/01/24/use-any-font-in-wordpress-or-any-website/

    Thanks,
    – tejas

    1
  99. 99

    Wow, great article! If anyone is interested in typography and the affect is has on marketing check out this article: http://www.epitype.co.uk/thought/blog/article.php?id=46

    0

↑ Back to top