Open Source Resources for Web Application Developers

Font.js is a Powerful Font Toolkit for JavaScript. It gives you font loading events using a technique perfected in Mozilla’s pdf.js project, metrics information, and a better version of the canvas element’s measureText method with additional information such as height, bounding box, and leading.

Font.js works by downloading the font data with an AJAX request, parsing out some metadata to determine that it is indeed a valid font file and to pull out the metrics information. Then it inserts an @font-face rule into the page.

Requirements: JavaScript Framework
Demo: http://badassjs.com/post/16355968400/font-js-a-powerful-font…
License: MIT License

Today’s article is brought to you by the fast booklet printing company, Next Day Flyers.

• 1 Comment

jTicker takes an elements’ children and displays them one by one, in sequence, writing their text ‘ticker tape’ style. It is smart enough to ticker text from an element heirarchy, inserting elements back into the DOM tree as it needs them. That means almost any content can be ‘tickered’.

jTicker handles any number of alternating cursors (or just one). jTicker’s cursor container is styleable using the class .cursor, or can be defined as your own jQuery object. jTicker reacts to jQuery events “play”, “stop” and “control”.

Requirements: jQuery Framework
Demo: http://webdev.stephband.info/jticker/
License: License Free

• 0 Comments

Web Typography for the Lonely aims to excite designers about the possibilities of cutting-edge web standards and javascript through beautiful and inspiring typographic explorations.

Web Typography for the Lonely is an ongoing collection of experiments and writings on web typography and the possibilities of standards-based web design. It aims to inspire the web community by pushing the boundries of what is both possible and practical in web standards in a manner that is compelling and exciting to the visually-minded creative.

Requirements: -
Demo: http://webtypographyforthelonely.com/
License: License Free

• 1 Comment

The Lost Type Co-Op is a Pay-What-You-Want Type foundry, the first of it’s kind. Founded by Riley Cran and Tyler Galpin, originally in a whirlwind 24 hour adventure to distribute a single typeface, Lost Type has blossomed into a full fledged foundry, distributing fonts from designers all over the world, with it’s unique model.

Users have the opportunity to pay whatever they like for a font, you can even type in ‘$0′ for a free download. 100% of funds from these sales go directly to the designers of the fonts, respectively.

Requirements: -
Demo: http://losttype.com/
License: License Free

• 0 Comments

What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away.

WhatFont Tool can easily get font information about the text you are hovering on. There is a Bookmarklet and Chrome Extension available for download. I am sure it will make web designer’s life much easier.

Requirements: -
Demo: http://chengyinliu.com/whatfont.html
License: License Free

• 1 Comment

Typography could be considered the most important part of any design. It’s definitely among the most important elements of any design project. Choosing a typeface can be tricky. The beauty and complexity of type, combined with an inexhaustible supply of options to evaluate, can make your head spin.

While there are no easy-to-follow rules on how best to choose a typeface, there are many tried-and-true principles you can quickly learn and apply to make an appropriate typeface choice. Take a look at A Crash Course in Typography and How to Choose a Typeface, you will have a winning typeface choice in no time.

Source: A Crash Course in Typography: The Basics of Type
Source: How to Choose a Typeface

• 1 Comment

Finding a good Typekit font for long blocks of text is hard, but Sleepover has made it a little easier for ya. They have sifted through the Typekit library and pared it down to the following The Great Typekit Table according to two simple rules: first, the font had to have lowercase, uppercase, bold, italic, and bold italic; second, the font couldn’t be hand writing, script, or mono space.

Requirements: -
Demo: http://www.sleepoversf.com/the-great-typekit-table//
License: License Free

• 0 Comments

Web Typography is exploding all over the web. In many instances we would need to style individual letters. We need a system to keep our markup maintainable. Something agile enough that a text change wouldn’t ruin us.

The solution was to call upon the power of Javascript to insert some easy to remember span tags. Here we have Lettering.JS which is a lightweight, easy to use jQuery plugin for radical Web Typography.

Requirements: jQuery Framework
Demo: http://daverupert.com/2010/09/lettering-js/
License: WTFPL License

• 1 Comment

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. You can use them on any non-commercial or commercial project.

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. The Google Font API is compatible with Google Chrome 4.249.4+, Firefox 3.5+, Safari 3.1+ andIE 6+. However, The Google Font API is not currently supported on iPhone, iPad, iPod, or Android.

Requirements: -
Demo: http://code.google.com/webfonts
License: Open Source License

• 6 Comments

Are you sick of your type looking plain and boring? Many OpenType fonts have alternate characters built into them that can transform your type into a beautiful piece of art. By using these alternate characters you can add things like flourishes and flair to your type with ease.

Some type faces have alternate characters that can help out with legibility at smaller sizes. Even some handwritten fonts have alternate characters to change the style of a characters to make it seem more handwritten. In this article: Taking Type to the Next Level with Alternate Characters, we will take a deep dive into using alternate characters.

Source: Taking Type to the Next Level with Alternate Characters

• 1 Comment