En la actualidad, puedes incluir varios tipos de fuentes en una sola página web mediante el uso de Google Fonts. Asimismo, gracias a CSS puedes cambiar el tamaño, color y otras propiedades de las fuentes y párrafos. Esta variedad de opciones permiten crear sitios web en donde los títulos, subtítulos y cuerpo de texto se encuentren bien diferenciados y correctamente alineados. Sin embargo, para realizar modificaciones más complejas tal vez tengas que experimentar muchas horas o simplemente puedes hacer uso de algún plugin jQuery creado por otra persona. Ya que la comunidad es tan grande, existe la posibilidad de que otro desarrollador haya tenido la misma duda que tú en el pasado.
En este artículo te mencionamos una serie de plugins jQuery para modificar propiedades de una fuente específica y realizar manipulaciones tipográficas.
Type Rendering Mix
Type Rendering Mix es un plugin que permite disminuir el peso de las fuentes en navegadores específicos que hacen uso de Core Text para renderizar texto. Este es un problema que se suele dar en el sistema operativo Mac OS, ya que debido a Core Text, las fuentes lucen más “gruesas” que en otros sistemas operativos.
Con Type Rendering Mix puedes aplicar cambios en una fuente solo cuando Core Text está siendo utilizado. De esta manera, se lograr un renderización más coherente en diversos sistemas operativos. También puedes utilizar este plugin para desactivar fuentes web.
FlowType.js
FlowType.js es un plugin que modifica el tamaño de fuente y el espaciado entre líneas en base al ancho de un elemento. De esta forma, permite que se muestre un número ideal de caracteres sin importar el tamaño de la pantalla. Posee una serie de opciones que te permiten configurarlo de acuerdo a las necesidades específicas de tu proyecto, de tal manera que tienes control total sobre la tipografía.
UnderlineJS
UnderlineJS es un plugin JavaScript para optimizar el texto subrayado. Las características principales de este plugin es que establece un ancho de trazo optimizado (siempre es 1/6 del punto). La línea de subrayado se coloca en una posición óptima en el plano Y, teniendo en cuenta el alto del texto. Esta línea presenta también agujeros entre los bastones descendentes de los caracteres, pequeño detalle que mejora el aspecto del texto subrayado. Por último, también puedes incluir animaciones sencillas a estas líneas para hacer tu texto un poco más interactivo.
SlabText
SlabText es un plugin que divide los títulos en filas para luego redimensionar cada fila con el fin de completar el espacio horizontal disponible. El número ideal de caracteres en cada fila se calcula al dividir el ancho disponible entre el tamaño de la fuente. SlabtText hace uso de este número resultante para dividir el título en diferentes filas.
Con SlabText puedes crear títulos que sean visualmente más interesantes y sin tener que preocuparte por la alineación de cada palabra. Puede ser bastante útil en tus proyectos web.
Typesettings.css
Typesettings.css es un paquete de reglas CSS que define la redimensión de fuentes, el ritmo vertical y el radio de las tipografías por ti. Todos los estilos tipográficos que se incluyen han sido inspirados en conceptos tradicionales del diseño gráfico y el estudio de la tipografía.
Typesettings.css está disponible también en Sass y Stylus.
HatchShow
HatchShow es un plugin para crear composiciones tipográficas. Básicamente lo que hace es controlar el tamaño de la fuente para rellenar los contenedores a su ancho máximo. De esta manera, los caracteres por línea varían según el tamaño de fuente, pero todo se mantiene dentro del ancho de columna de texto.
Ya que HatchShow mide el ancho del contenedor y el largo de cada carácter para determinar el tamaño de fuente ideal. Además, es muy sencillo de emplear, sólo debes insertar el código respectivo en el archivo HTML o JS de tu proyecto.
Kerning.js
Kerning.js, como su nombre indica, contiene una serie de características para que puedas controlar con mayor precisión el kerning de las fuentes utilizadas en la web. Ya que se trata de la web, hace uso de reglas CSS para optimizar la tipografía de tus proyectos.
Para usar este script sólo debes añadirlo a tu página, especificar las reglas CSS y de forma automática verás cómo tu texto luce mejor gracias a Kerning.js. Es un script ligero que no tiene dependencias.
Lettering.js
Lettering.js es un plugin jQuery que te da control total sobre la tipografía: manejo de kerning, diseño editoral, código manejable, entre otros. Con este plugin puedes tener un mayor control sobre tus fuentes para poder crear composiciones tipográficas de gran dificultad. Lettering.js es un plugin bastante útil y podría ser el ideal para ciertos proyectos web específicos.
Blast.js
Blast.js es un plugin que separa tu texto para simplificar la manipulación tipográfica. Posee cuatro delimitadores: carácter, palabra, oración y elemento. Adicionalmente, también puede emparejar expresiones regular y frases.
Blast.js es preciso y separa palabras y frases de forma inteligente. Todos el código HTML, eventos y espaciado de tu página se mantienen incluso si aplicas Blast.js y puede ser eliminado de forma sencilla mediante CSS o JavaScript. Con Blast.js puedes realizar animaciones, añadir estilos, realizar búsquedas y análisis de tu tipografía.
Font-To-Width
Font-To-Width es un script que aprovecha las familias tipográficas que posee muchas variaciones para ordenar piezas de texto y que éstas queden ajustadas en sus contenedores. Font-To-Width no cambia el tamaño de tu fuente como otros plugins, sino que elige un ancho o variante de la familia tipográfica de acuerdo al espacio del contenedor. Luego, permite realizar ajustes en el espaciado si es necesario.
Readable
Readable es un plugin jQuery pequeño que sirve para maximizar la legibilidad de tus párrafos de texto en la web. Lo logra al cambiar el estilo de texto entre el carácter número 45 y 75 de cada etiqueta <p> en tu página. En algunos casos parece que el texto hubiera sido justificado y alineado, de manera que se ve más organizado, pero en principio se pensó que este plugin sirviera como una referencia visual para verificar si debes realizar cambios en el tamaño de fuente, ancho del contenedor, etc.
FitText
FitText es un plugin jQuery sencillo que permite que el texto alcance en un elemento definido. Actualiza de forma automática el tamaño de fuente de acuerdo al ancho del contenedor de dicho elemento al mismo tiempo que se mantiene la layout incluso si la página web se muestra dispositivos móviles.
FitText hace que el tamaño de fuente sea flexible, pero tiene sus límites: ha sido desarrollado teniendo en consideración sólo para textos de gran tamaño por lo que es ideal para títulos y no para cuerpo de texto.
CurvedText
CurvedText es un plugin jQuery que permite alinear tu texto en cualquier curva, ya se trate de un arco, espiral o cualquier curva libre. Si bien, esto podría traer algunos problemas de legibilidad, en ciertos proyectos específicos o para realizar algún experimento, este tipo de plugin podría ser de utilidad.
En conclusión…
Como puedes ver, existen diversos plugins jQuery para manipular la tipografía de tu sitio web. Algunos tienen un solo uso como modificar el aspecto de los títulos o controlar la longitud de línea, mientras que otros ofrecen una serie de funciones para realizar diversos tipos de manipulación tipográfica. Esperamos que te animes a experimentar con alguno de estos plugins jQuery en tu próximo proyecto web.
