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-feed Subscribe to our RSS-feed and follow us on Twitter Follow us on Twitter.

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

1. Useful typographic references

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

Useful Typographic Tools

Striking Web Sites with Font Stacks that Inspire
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 Tools

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

Useful Typographic Tools

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

Default Mac OS X 10.4 fonts list (via Elementiks)

Useful Typographic Tools

Default Windows fonts list (via Elementiks)

Useful Typographic Tools

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 Ipsum
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 Tools

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

TypeChart

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
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 Tools

abcTajpu Firefox Extension
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 Tools

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

Useful Typographic Tools

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
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 Tools

CSS-Typoset Matrix and code generator
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 Tools

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

FontBurner
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 Tools

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 Conversion
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 Font
A list of free online tools to speed up the identification process.

21 Typography Web Applications You Can’t Live Without

3. Choosing a font

Type Tester
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 Tools

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

Useful Typographic Tools

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.

FontTester
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 Set
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 (@jmreedy).

Useful Typographic Tools

Flipping Typical
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 Tools

4. Typographic Techniques

12 Examples Of Paragraph Typography
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 Tools

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

Useful Typographic Tools

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

typeface.js
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 sIFR, 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-in useful to easily apply FLIR to your Web pages.

Useful Typographic Tools

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

Advanced Typography Techniques Using CSS
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 Tools

Typographic Contrast and Flow
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 Tools

5. Hyphenation

OnLine Hyphenation
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
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 hyphenation.

6. sIFR

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

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

sIFRvault
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 chrisjlee).

Useful Typographic Tools

jQuery sIFR Plugin
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 Tools

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

Useful Typographic Tools

sIFR Generator
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 buildrrr
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 Tools

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

Useful Typographic Tools

Typographic Grid
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 Rhythm article by Richard Rutter a few years ago, except uses unitless line height.” Check out the demo here.

Useful Typographic Tools

Grid Designer
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 Tools

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

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

Useful Typographic Tools

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

Useful Typographic Tools

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

Useful Typographic Tools

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

Useful Typographic Tools

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

Useful Typographic Tools

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

Useful Typographic Tools

Veerle Pieters’ 10 favourite typefaces

Useful Typographic Tools

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 Type
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 Tools

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

Useful Typographic Tools

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

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

Useful Typographic Tools

10 Common Typography Mistakes
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 Selection
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 Typography
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 Designers
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 Tangerine

Useful Typographic Tools

Viget Inspire

Useful Typographic Tools

works4sure

Useful Typographic Tools

24ways

Useful Typographic Tools

Alex Buga

Useful Typographic Tools

Wilson Miner

Useful Typographic Tools

Colour Pixel

Useful Typographic Tools

Maxvoltar

Useful Typographic Tools

Mark Dearman

Useful Typographic Tools

Blogger Bake Off

Useful Typographic Tools

Fixie Consulting

Useful Typographic Tools

Drupalcon

Useful Typographic Tools

Guilherme Neumann

Useful Typographic Tools

Sursly

Useful Typographic Tools

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

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

Useful Typographic Tools

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

Useful Typographic Tools

(al)

↑ Back to top

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.

  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