19 Bibliotecas de Javascript para jugar con las tipografías

La tipografía es una parte integral del diseño de un sitio web. La tipografía y las fuentes que se utilizan juegan un papel muy importante en múltiples aspectos del diseño de un sitio web; afecta a importantes factores como la legibilidad, la experiencia del usuario e incluso la longitud percibida de un artículo o página.

Es muy importante que los diseñadores web acierten con la tipografía para transmitir adecuadamente el propósito del sitio web y su contenido.

Como con casi todas las partes del diseño web, hay varias herramientas disponibles para ayudarlo a ser más efectivo. En el caso de las fuentes tipográficas no es diferente.

? Quizás te interese: mejores libros de programación >> programas para desarrolladores >> mejores lenguajes de programación >> mejores auriculares para programadores >> ratones verticales para trabajar >> componentes de PC para programadores >> mejores regalos 1 – ?

En este artículo, vamos a analizar 20 bibliotecas / complementos de Javascript para dar el toque final a las fuentes tipográficas de tu sitio web, lo que te ayudará a crear páginas web increíbles.

1. FlowType.js

FlowType es un complemento jquery receptivo que te ayuda a cambiar automáticamente el tamaño de la fuente en función del ancho de un elemento específico. Para que la tipografía del sitio web sea legible, debe haber aproximadamente entre 45 a 75 carácteres por línea. Para la mayoría de las pantallas con solo consultas de medios CSS, esto puede ser difícil de lograr.

Flowtype ajusta el tamaño de la fuente para garantizar que haya un recuento de carácteres perfecto por línea, sin importar el tipo de pantalla o navegador que utilice el lector.

? Probar FlowType

2. Blast.js

Blast.js te permite hacer: Animación tipográfica, yuxtaposición, diseño, búsqueda y análisis. La herramienta te permite separar el texto para permitir la manipulación tipográfica y tiene delimitadores de carácteres, palabras, oraciones y elementos integrados. Blast también combina frases y expresiones regulares personalizadas.

? Probar Blast

3. Textillate.js

Textillate.js es un complemento simple para crear animaciones de texto CSS3. El complemento combina diferentes bibliotecas para ayudar a aplicar animaciones CSS3 a cualquier texto. Para usarlo, todo lo que necesitas hacer es agregar textillate.js y sus dependencias a tu proyecto.

? Probar Textillate

4. Widowtamer.js

Widowtamer.js es un complemento de JavaScript que corregiría automáticamente las líneas viudas (explicación Wiki{:target=”_blank” rel=”nofollow”}) de la tipografía de tus páginas web. El complemento está diseñado para funcionar solo con sitios receptivos.

? Probar Widowtamer

5. jQuery WidowFix

JQuery WidowFix es un complemento de jQuery para ayudarte a reparar las viudas. Las arregla agregando un espacio sin interrupciones entre las dos últimas palabras. La herramienta es ligera y fácil de usar.

? Probar jQuery WidowFix

? Los Mejores Chollos de Amazon, ¡Agrégalos a tu Lista de Deseos!

6. Slab Text

Slab Text es un complemento de jQuery para ayudarte a crear titulares grandes y audaces; también puede cambiar el tamaño del ancho de la ventana de visualización para que, independientemente del tamaño de la ventana de visualización, las combinaciones de palabras dentro del título permanezcan en la misma línea.

? Probar Slab Text

7. Kerning.js

Kerning.js es un script jQuery simple que le permite escalar su tipo web con reglas CSS reales automáticamente. Viene sin dependencias, por lo que cuando lo agregue a su página web y agregue algunas reglas CSS, su página se embellecerá automáticamente.

? Probar Kerning

8. Lettering.js

Lettering.js es un complemento de tipografías radical de jQuery. El complemento le ofrece un control completo y directo. Algunas de las cosas que se pueden hacer fácilmente con Lettering.js son Kerning Type, Diseño editorial y Código manejable.

? Probar Lettering

9. React Text Gradient

React Text Gradient es un complemento genial que te permite agregar degradados de texto a tu sitio. Es un componente React que crea gradientes de texto con CSS. El componente detectará si hay disponible un clip de fondo del sitio web y luego aplicará el degradado sobre el texto.

? Probar React Text

10. Typed.js

Typed.js es una biblioteca de JavaScript que escribe oraciones en un navegador, las elimina y pasa a la siguiente cadena. La herramienta es bastante fácil de usar y puede crear un número ilimitado de cadenas. La biblioteca es genial para contar historias.

? Probar Typed

? Los Mejores Chollos de Amazon, ¡Agrégalos a tu Lista de Deseos!

11. FitText

FitText es un complemento jQuery utilizado para inflar el tipo web. El complemento escala automáticamente el texto para que ocupe el ancho de un elemento primario. El complemento garantiza que el diseño de la página no se rompa sin importar el tipo de navegador que esté utilizando.

? Probar FitText

12. TypeButter

TypeButter es kerning óptico para la web. Este complemento le permite crear textos bellamente diseñados. Typebutter también le permite Kern sus titulares y elimina espacios entre caracteres que hacen que el texto sea difícil de leer. Todo lo que necesita hacer es instalar el complemento y sus fuentes perderían espacios innecesarios.

? Probar TypeButter

13. Font to Width

Font-To-Width es un script que permite que los textos quepan en sus contenedores. En lugar de escalar el tamaño de la fuente para ajustar el texto, Font-To-Width elige una variante de ancho o ancho y luego permite ajustes de letras y palabras según sea necesario. Ten en cuenta que este script está hecho para titulares o fragmentos cortos de texto. No está destinado para el cuerpo de texto de varias líneas. También funciona mejor en navegadores que admiten espaciado de subpíxeles como Chrome. Los navegadores que redondean espacios a valores enteros mostrarán errores de redondeo.

? Probar Font to Width

14. Font Flex

Font Flex es un complemento jQuery para tamaños de fuente dinámicos. El complemento hace que su texto sea flexible y adaptable a cualquier pantalla. La extensión ligera jQuery está diseñada para usarse con diseños CSS adaptables o sensibles.

? Probar Font Flex

15. TextTailor

TextTailor.js es un complemento de jQuery que permite que el texto llene la altura del elemento principal o lo trunca cuando no encaja. Funciona perfectamente con publicaciones que tienen imágenes y fuentes fijas.

? Probar TextTailor

? Los Mejores Chollos de Amazon, ¡Agrégalos a tu Lista de Deseos!

16. Type Rendering Mix

Con Type Rendering Mix, puedes disminuir el peso de la fuente para los navegadores que usan Core Text para renderizar el texto; también permite deshabilitar las fuentes web cuando no se aplica el suavizado; también deshabilitar las fuentes web si se renderizan mal con algunos rasterizadores de texto.

? Probar Typ Rendering Mix

17. Textualizer

Textualizer es un complemento de jQuery que realiza transiciones a través de borrones de texto mientras anima a cada personaje. Cuando el texto está en transición, cualquier carácter que sea común a la siguiente propaganda se deja en la pantalla y se mueve a su nueva posición. Algunos de los efectos que tiene son slideLeft, slideTop, fadeIn y random.

? Probar Textualizer

18. Jumble

Jumble es un complemento de jQuery que agrega colores a sus titulares y también los anima. Puede establecer parámetros para la combinación de colores según el brillo y el tono de saturación. También se le proporciona una buena gama de colores con los que puede mezclar.

? Probar Jumble

19. Arctext.js

Arctext.js es un complemento de jQuery que le permite curvar texto usando CSS3 y jQuery. Puede curvar texto hasta un radio de 300, cambiar la dirección del texto, crear letras no giradas y establecer o animar texto. El complemento calculará la rotación correcta de cada letra y la distribuirá a través del arco del radio establecido.

? Probar Arctext

Relacionados

Deja un comentario