Open Source Resources for Web Application Developers

Aleo Free Font is a contemporary typeface designed as the slab serif companion to the Lato font by Łukasz Dziedzic. Aleo has semi-rounded details and a sleek structure, giving it a strong personality while still keeping readability high. The family comprises six styles: three weights (light, regular and bold) with corresponding true italics. The Aleo font family is released under the SIL Open Font License, so it is free for both personal and commercial use.

Requirements: -
Demo: http://fontfabric.com/aleo-free-font/
License: SIL Open Font License

Redacted Font is a font for quick mock-ups and wireframing for clients who do not understand latin. It keeps your wireframes free of distracting Lorem Ipsum.

This project is inspired by BLOKK. BLOKK has unusually large character widths, which adds much length to “standard” bits of dummy text, and also creates unecessarily ragged rags in my copy. Redacted solves this by using sane character widths; matching narrow, regular, and wide blocks to their respective characters. This gives a more realistic look to the text and helps it fit into narrow columns like real text would.

Requirements: -
Demo: https://github.com/christiannaths/Redacted-Font
License: License Free

Textillate.js is a simple plugin for CSS3 text animations. Textillate.js combines some awesome libraries to provide an ease-to-use plugin for applying CSS3 animations to any text. Simply include textillate.js and it’s dependencies in your project to start creating unqiue effects.

Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.

Requirements: jQuery Framework
Download Link: http://jschr.github.com/textillate/
License: MIT License

Fontfabric type foundry presents Prime free font – unique sans serif techy fonts! Prime is a simple typeface with a techy feel and a strict, geometric origin.

Max Pirsky wanted to create something that offers great readability in various sizes yet still offers enough subtle differences to stand out. Basic and somewhat neutral, it can be used in a variety of ways from distinct titles to body text.

Requirements: -
Demo: http://fontfabric.com/prime-free-font/
License: FFF EULA License

jQuery Burn is a jQuery plugin which adds a flame-like effect to text using multiple text-shadows, animated by repeatedly changing their horizontal offsets. jQuery burn will scale appropriately to size the target text, however you must target the text itself.

The effect can be somewhat CPU intensive, so use it sparingly. It can be stopped and restarted dynamically, colored, stretched, offset, sped up and slowed down. The flame motion is simulated with a simple wave equation solution.

Requirements: jQuery Framework
Download Link: http://sinetheta.github.com/burn/
License: MIT, GPL License

SlabText is a jQuery plugin for producing big, bold and responsive headlines. Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space.

The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

Requirements: jQuery framework
Demo: https://github.com/freqdec/slabText/
License: MIT, GPL License

Foundation Icon Fonts is custom icon sets that are stored in a handy web font. A couple lines of CSS and the right markup will get you going in no time. You can use some awesome CSS techniques to start exploring different styles.

They designed the glyphs to be refined enough to stand alone as a simple icon, but left room for the imagination. Since you’ll be dealing with a font, the opportunities are nearly limitless. Now your icons can be any size, any color and any style available in CSS.

Requirements: -
Demo: http://www.zurb.com/playground/foundation-icons
License: MIT License

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.

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