SmartyPants - Smart punctuation for web sites
Michel Fortin's PHP implementation of John Gruber's SmartyPants

AltFontPrev is a JavaScript bookmarklet that allows you to preview how any website would look if a particular font was not available or a different font chosen. Each font used to style elements on the page is listed under its selector and, when clicked, is moved from being a fall-back to being the primary font.

As well as choosing a font from the existing CSS declarations, you can type a custom font to override everything. Hopefully this will help you choose alternative fonts when perfecting your site’s typography.

Select the character you like and either copy/paste it or drag it where you like. Then click “Close” to make the palette go away until you need it again. Enjoy!

FOUT is what I'm calling the flash of unstyled text that you get while using @font-face in Firefox and Opera.

In June, Remy Sharp documented the how a browser progressively renders a page using @font-face. Things work differently between browsers natch:

Here's how in Firefox; basically the text is in a default webfont until the custom font is ready:
[gecko & presto's progressive rendering]

Webkit takes a very different approach, and very intentionally. They believe it's better to keep the text invisible until the font is ready. This way, there is no moment where the text flashes into its newly upgraded self. (This moment should be familiar to you if you've used sIFR)

Paravel has just wrapped up an exciting secret project with three of the web’s most talented designers: Jason Santa Maria, Frank Chimero, and Naz Hamid. These designs are epic, like 18,123px epic. Working with these guys was a complete joy. There were a few fun development challenges and – as you might expect from these gentlemen – a lot of fancy typography work in the delivered PSDs.

Before Trent and I marked up the designs, we noticed that in many instances we would need to style individual letters. We decided we’d need a system to keep our markup maintainable. Something agile enough that a text change wouldn’t ruin us. Our solution was to call upon the power of Javascript to insert some easy to remember span tags.

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers.

View font details to get the code needed to embed the font on your web site. Please also visit our quick start guide and FAQ page. For more help and suggestions, use our moderator page

This guide explains how to use the Google Font API to add web fonts to your pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style.

Everyone love free fonts. If you want to be a bit different, you can use these creative fonts to make sure that your designs will stand out.

Comic book lettering has some grammatical and aesthetic traditions that are unique. What follows is a list that every letterer eventually commits to his/her own mental reference file. The majority of these points are established tradition, sprinkled with modern trends and a bit of my own opinion having lettered professionally for a few years now. The majority of these ideas have been established by Marvel and DC, but opinions vary from editor to editor, even within the same company. I'm often asked to bend or break these rules based on what "feels" best, or more likely, the space constraints within a panel.

As a letterer you're eventually going to see scripts from writers who don't know these standards, aren't interested in them, or just have poor grammar all around. (Although I find the best writers ARE well versed in these points.) It'll be up to you to spot and fix these in the event that the editor misses them.

Typographic consistency:

* Is there a consistent vertical rhythm?
* Is the typographic alignment consistent?
* Are the typeface choices consistent?
* Is the typographic navigation predictable across pages?

Graphic consistency:

* Do the website’s images convey a consistent mood?
* Do the colors in the images match?
* Are the textures of the images consistent?
* Are the sizes of the images consistent with the overall structure of the website and each other?

Color consistency:

* Are colors used consistently across pages?

Icon and button consistency:

* Are the website’s icons of the same family?
* Do the icons match in size?