La librerĂas JavaScript de cĂłdigo abierto pueden ayudar a diseñar los desafĂos web (una tĂ©cnica que optimiza los diseños web para dispositivos mĂłviles), aplicar divertidos efectos de texto y mucho más. Este post, se centrará principalmente en las librerĂas de JavaScript que utiliza tĂ©cnicas modernas de tipografĂa web para destacar y promover las prácticas actuales de mejor diseño web.
1. Modernizr
Las reglas @font-face de CSS es rápido, permite escribir HTML semántico (bueno para SEO) y es mucho más fácil de implementar en un sitio web para los diseñadores web, en comparaciĂłn con mĂ©todos anteriores. Aunque la norma ha estado disponible desde el dĂa de Internet Explorer 5, la aplicaciĂłn del web navegador inconsistentes hizo @ font-face una mala opciĂłn. Este no es el caso.
La librerĂa JavaScript Modernizr (que no es una librerĂa de tipografĂa web) le permite detectar si las reglas y propiedades CSS como @ font-face y la sombras de texto están disponibles en el navegador web de un usuario para que pueda ofrecer a este grupo un progresivamente experiencia de usuario mejorada.
2. Kerning.js
Kerning.js es una librerĂa JavaScript de cĂłdigo abierto que promete a los diseñadores web un completo control de la tipografĂa web. De acuerdo con el desarrollador del proyecto, Joshua Gross, la librerĂa es sin duda un “trabajo en progreso”. Sin embargo, mediante la ampliaciĂłn de CSS, no necesita programaciĂłn JS fuera de la referencia a la librerĂa en el cĂłdigo HTML. SĂłlo tiene que utilizar las propiedades personalizadas CSS de Kerning.js.
Con esta excelente librerĂa JavaScript, se puede lograr una variedad de tĂ©cnicas, normalmente asociado con el diseño de impresiĂłn y publicaciĂłn de escritorio. Ver demo.
3. Lettering.js
Esta librerĂa JavaScript proporciona un control sin precedentes. Use Lettering.js para modificar las caracterĂsticas de la tipografĂa web, producir diseños web sofisticada y tipografĂa compleja. Lettering.js es un plugin para jQuery,asĂ que tendrá que usar jQuery para hacer trabajar a Lettering.js. Ver demo.
4. FitText
FitText, es un plugin de jQuery, ayuda a los diseñadores web establecer la tipografĂa flexible que cambia de tamaño en funciĂłn del tamaño del navegador del usuario. Su intenciĂłn para el uso en el diseño web de respuesta se basa en sus diseños web optimizados para verse en cualquier resoluciĂłn, desde la pequeña pantalla de los telĂ©fonos mĂłviles hasta monitores de escritorio de pantalla ancha.
5. Kern.js
En la tipografĂa, Kerning es el acto de ajustar el espacio entre cada letra de una fuente para lograr una mejor proporciĂłn. Por ejemplo, para que las palabras se vean mejor, los diseñadores de la fuente puede variar la cantidad de espacio entre la ‘W’ y ‘T’ de manera diferente que entre ‘W’ y las letras ‘A’ debido a la forma y el tamaño de los pares de letras. Kerning ha sido, tradicionalmente, difĂcil para la tipografĂa de páginas web debido a las limitaciones, pero Kern.jshace que sea fácil. Este plugin jQuery requiere Lettering.js para funcionar.
6. fontdetect.js
fontdetect.js, esta librerĂa JS detecta si una fuente en particular se encuentra actualmente instalado en el ordenador del usuario. Si el script encuentra la fuente deseada, va a proporcionar la página web correspondiente. Si no, vuelve a la fuente predeterminada que haya especificado en la hoja de estilo de su sitio web.
7. FontEffect
Esta divertida biblioteca de JavaScript se aplica fuera de lo comĂşn. FontEffect le permite procesar el texto tipo: contornos, gradientes, sombras y la reflexiĂłn.
BONUS tipografĂas JavaScript
Los siguientes tres recursos no son librerĂas JavaScript, pero le ayudaran producir impresionantes diseños de tipografĂa web.
8. Google Web Fonts API
Google Web Fonts API, es un servicio gratuito de google que te permite instalar y usar fácilmente fuentes personalizadas en tu sitio web.
9. HTML5 Boilerplate
HTML5 Boilerplate, Un conglomerado de mejores prácticas modernas de diseño web y un buen punto de partida para cualquier sitio web.
10. Font Squirrel @Font-face Generator
Font Squirrel @Font-face Generator, Utilice esta herramienta para preparar y generar el cĂłdigo necesario para cross-browser/platform usando cualquier archivo de fuente personalizada en su sitio.