<http://schema.org/articleBody>
"The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace's hosting solutions here.\nWhen you think of web typography, CSS instantly comes to mind. And that's great, because CSS is the primary option when dealing with the style/visual layer of your website.\nHowever, when you hit a roadblock with CSS, take it up a level by using JavaScript (JS).\nOpen source JavaScript libraries can help you craft responsive web designs (a technique that optimizes webpage layouts for mobile devices), implement fun text effects and more. In this post, we will primarily focus on JavaScript libraries that use modern web typography techniques to underscore and promote current web design best practices.\n\n\n7 Essential JavaScript Typography Resources\n\n\n\n\n\n\n\n1. Kerning.js\n\n\nKerning.js is an open source JavaScript library that promises web designers complete control of web typography. According to the developer of the project, Joshua Gross, the library is admittedly a \"work in progress.\" However, by extending CSS, it doesn't need JS programming outside of referencing the library in your HTML. Simply use Kerning.js's custom CSS properties such as -letter-kern and -word-color.\nWith this excellent JavaScript library, you can achieve a variety of type techniques normally associated with print design and desktop publishing, such as perfect kerning and conditional fallback fonts for your @font-face rules.\nSee live demo.\n\n\n\n\n\n\n\n\n\n\n\n2. Lettering.js\n\n\nThis JavaScript library gives you unprecedented control and cross-browser/platform support over web type. Use Lettering.js to tweak web typography characteristics and produce sophisticated and complex web typography designs. Lettering.js is a plugin for jQuery, a web development/Ajax JavaScript framework. You'll need to use jQuery for Lettering.js to work. \nSee live demos.\n\n\n\n\n\n\n\n\n\n\n\n3. FitText\n\nFitText, a jQuery plugin as well, helps web designers set flexible typography that resizes based on the user's browser size. Its intended for use in responsive web design builds so your webpage layouts become optimized for all sorts of viewing situations, from small-screen mobile phones to widescreen desktop monitors.\n\n\n\n\n\n\n\n\n\n\n4. Kern.js\n\nIn typography, kerning is the act of adjusting the spaces between each letter of a font to achieve better proportions. For example, in order for words to look better, font designers may vary the amount of space between 'W' and 'T' differently than between the letters 'W' and 'A' due to the shape and size of the letter pairs. Kerning has traditionally been difficult for typography-obsessed web designers because of the limitations of their medium, but Kern.js makes it super easy. This plugin requires both jQuery and Lettering.js to function.\n\n\n\n\n\n\n\n\n\n\n5. fontdetect.js\n\nThis simple JS library detects whether a particular font is presently installed in the user's computer. If the script finds the desired font, it will render the corresponding webpage. If not, it falls back to the default font you've specified in your website's stylesheet.\n\n\n\n\n\n\n\n\n\n\n6. FontEffect\n\n\nThis fun JavaScript library applies out-of-the-ordinary text effects on regular HTML text. FontEffect allows you to render your text with type treatments such as outlines, gradients, drop shadows and reflection.\nThis library came out before the use of CSS3 exploded, and many of the effects can probably be replicated using new CSS3 properties like text-shadow and font-effect. However, not all users have browsers that support CSS3, so FontEffect will help you reach that segment of Internet users.\n\n\n\n\n\n\n\n\n\n\n\n7. Modernizr\n\n\nThe CSS @font-face rule is fast, allows you to write semantic HTML (good for SEO) and is much easier for web designers to implement on a website, compared to prior methods. Though the rule has been available since the days of Internet Explorer 5, its inconsistent and buggy browser implementation made @font-face a poor option. This no longer the case.\nThe Modernizr JavaScript library (which is not a web typography library) allows you to detect whether CSS rules and properties like @font-face and text-shadow are available in a user's web browser so you can offer this rapidly expanding group of Internet users a progressively enhanced user experience.\n\n\n\n\n\n\n\n\n\n\n\n8-10. BONUS\n\nThe items below aren't JavaScript libraries, but they will still help you produce awesome web typography designs.\n\nGoogle Web Fonts API: Google Web Fonts API is a free Google service that allows you to easily install and use custom web fonts on your site. \nHTML5 Boilerplate: A conglomeration of modern web design best practices and a good starting point for any future-forward site.\nFont Squirrel @Font-face Generator: Use this tool to prepare and generate the cross-browser/platform code required for using any custom font file on your site.\n\n\n\n\n\n\n\n\n\n\nSeries Supported by Rackspace\n\nThe Web Development Series is supported by Rackspace, the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.\nImage courtesy of iStockphoto, Punkle"^^<http://www.w3.org/2001/XMLSchema#string>
<http://mashable.com/2011/10/10/javascript-typography/>