Ligature Symbols is WebFont project to display the symbol with a ligature features.

Ligature Symbols has broad support for the modern browser (Chrome, Safari, Firefox, iOS – Mobile Safari, Android Browser).

It includes following icons:

• Social
• Browsers
• Programming
• Frameworks
• Sharing
• Operating Systems
• Databases
• Version Control

The download package includes SVG, CSS, Web Font and PNG dark/light icons.

This free web font comes with 150+ icons, you can easily style icon color, size, shadow, and anything that’s possible with CSS.

Major Features

• Screen Reader Compatible
• Infinite Scalability
• Cross Browser Compatible

The Font Awesome webfont and CSS libraries are completely free for commercial use. It includes full instructions for using Font Awesome with or without Bootstrap.

Install the OpenType file for Photoshop mockups and drop in the @font-face code into your CSS to use right in your Web page.

Erler Dingbats is a complete Unicode dingbats font and a spin-off of the distinguished FF Dingbats 2.0 family, and was designed as a special collaboration between designers Johannes Erler and Henning Skibbe.

The free Erler Dingbats were created for everyday communication purposes. It includes a wide range of popular symbols and pictograms such as arrows, pens, phones, stars, crosses and checkmarks, plus 3 sets of cameo figures on round backgrounds.

Fount is a bookmarklet which tells you that what font is in your font-stack. All you have to do is drag Fount bookmarklet in your browser, go to any web page and click on the Fount bookmarklet, click on the text anywhere on the web page and it will display what font is used along with the font size and weight.

Fount is a small yet handy tool for quickly identifying fonts used on websites.

Download Sansation

Features:

• Fully accessible to screenreaders and other assistive technology
• Works on Mac, Windows, and Linux
• Works with all major browsers
• sIFR is less than 10k and only loads once

Website & Demo: http://www.mikeindustries.com/blog/files/sifr/2.0/

Download siFR 2.0 Code

Website: http://typophile.com/node/50437

Download: http://www.andrewpaglinawan.com/QuicksandFamily.zip

Tip 1: Don’t limit your size options

Once upon a time, we were limited to a mere 7 sizes via use of the <font> tag – thankfully current incarnations of CSS grant us much better control, so quite a fine level of control over the size can be had.

Figure 1: Newer methods of specifying sizes in CSS allow for more flexibility when choosing type size. Don’t stick to standard sizes – experiment!

Relative sizes work best- don’t forget your visitors may have a different font size setting to the default, so specifying fixed point or pixel values may make things look awfully strange. ‘Em’ units – so called as 1em is equal to the width of the lowercase ‘m’ character, are one of a few ways to scale your text proportionally. All things being equal, at default settings 1em is the same size as 12 points.

You’re not limited to while numbers, either – 0.8em is a good body font size, typically being rendered at 10pt. You can specify any number you like, and as large as you like – don’t limit yourself to sub-24pt sizes if the design warrants a larger size.

Tip 2: Play with your letter spacing

Letter spacing is perhaps one of the more effective ways to spruce up web type, particularly at larger sizes. It’s just a shame Internet Explorer cripples the finesse that could be available via the letter-spacing CSS property.

Figure 2: Letter spacing can be used to tighten the whitespaces in larger type, or relax the spacing in smaller type. The larger the font, the more you can tweak the letter spacing.

Firefox and other compliant browsers will happily take a precise decimal value, and space the text nicely and continuously at non-integer values, but Internet Explorer (sadly, even the latest IE7) will only allow for broad, rounded-to-neared-pixel-integer figures – which basically means you’re not going to get the spacing you want in IE.

Despite this limitation, letter spacing can be used effectively at larger sizes to really add some zing to an otherwise bland headline or title. As type gets larger, so too does the spaces between the type. This means that large fonts can have unsightly gaps and rivers of whitespace running through the letters. A little negative spacing will close these gaps, and if used with care can look distinctive, in some cases even suitable for replacing prerendered type.

Tip 3: Line height and word spacing, too

It’s not just letter spacing that you can mess around with – word-spacing and line-height can be specified to further tweak the text display.

Word spacing is perhaps less useful and more subtle than letter spacing, but adding a little extra whitespace between words can help somewhat in terms of readability. On longer lines, a little extra word spacing will mean fewer words per line, and thus make it easier for readers to keep track of where they are in the text.

Coupled with line height, you can gain more accurate control over the word density of any given page. I tend to specify line height as a percentage, with about 120-140% being the ‘normal’ default. A little extra (~200%) can make large passages of text a little easier to read, whilst tighter line heights (100% or less) can help with multi-line titles, where larger fonts could result in acre-wide gaps between lines without moderation.

With all the above spacing methods, care must be taken to ensure the effect is subtle – nobody wants to read text that’s squashed into a tiny space, or spread over 3 or 4 times the area that’s required. The default settings are default for a reason – text readability – so any changes made to the spacing should be subtle and should aid readability rather than impairing it.

Tip 4: Try a new slant on an old favorite

As mentioned in my top blog trends post, Times New Roman is used in only 5% of the top 100 blogs. It was Times’ early predominance on the web, being the default font for most browsers, that perhaps dulled its impact somewhat, but despite this, and if used creatively and in a fresh way, Times can have a great impact.

Figure 3: Even fonts that have fallen out of favour due to overuse, such as Times New Roman, can be refreshed with a little creative typography.

Try a non-standard size and a non-standard spacing model (all capitals works great, too) and Times can be a visually interesting and fresh font.

Tip 5: Be bold

‘Bold’ in the sense that you try new and exciting things – not in the typographical ‘bold’ sense. Big fonts, tight spacing, loose spacing, colour, use of first-letter and first-line can all help to set your text apart from typically dull web typography.

The key thing is to experiment, try new things – not at the expense of readability, but in the name of design.

And, if nothing else, the experimentation to find the perfect typographical mix on the web should occupy the time between now and whenever fully flexible, fully supported CSS typography becomes mainstream!