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.
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.
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.
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.
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.
? 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.
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.
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.
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.
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.
? 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.
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.
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.
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.
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.
? 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.
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.
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.
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.