Tratar con tipografía en la web siempre ha sido algo peculiar. Cada navegador tiene su propio algoritmo para mostrar las fuentes, que pueden dar lugar a discrepancias inesperadas. Sólo hay unas pocas propiedades CSS que se pueden utilizar para tener cierto control sobre las fuentes, tales como el espacio entre los caracteres de la fuente, el suavizado de la fuente, la creación de fuentes capitales etc. Además de eso, tenemos que lidiar con un montón de problemas de diseño cuando tratamos con fuentes.
La buena noticia es que hay recursos que se pueden utilizar para hacerse cargo de todo esto, cuando tratamos en las páginas web con la tipografía. Aquí te mostramos 10 herramientas web, librerías y frameworks que puedes utilizar para ese fin.
TypeRendering
En pocas palabras, TypeRendering funciona de manera similar a Modernizr, excepto que sólo identifica el motor del navegador para renderizar las fuentes. Esta librería añade clases personalizadas basadas en sus propios descubrimientos que pueden utilizarse para aplicar reglas de estilo específicas según donde la fuente vaya a mostrarse. Muy útil.
KerningJS
Kerning no puede utilizarse en la web todavía - el soporte de font-kerning sigue siendo pobre hasta el momento - pero una nueva propiedad estándar ha llegado hasta nosotros. KerningJS es una librería Javascript que te proporciona un par de propiedades nuevas para un mejor control del kerning, por ejemplo -letter-kern.
#heading {
-letter-kern: 1px 1px 0 0 0
1px 0 2px 0 0
0 0 0;
}
DropCapJS
Aunque la creación de una letra capital es factible con los estándares CSS actuales, el resultado todavía no es del todo perfecto. Puede ser incluso tedioso y algo aburrido de implementar. A DropcapJS, desarrollado por Adobe Web Platform, se le encomendó la misión de permitir al diseñador web aplicar una letra capital perfecta de manera sencilla.
LiningJS
LiningJS es una librería de JavaScript que añade la clase line en cada uno de tus párrafos. Esto te permite personalizar cada línea por separado. Simula la idea de las pseudo-clases ::nth-line(), ::nth-last-line() y ::last-line que no están presentes en CSS todavía. He aquí un ejemplo de cómo dar estilo a la primera línea de un párrafo con LiningJS:
p .line[first] {
font-weight: 600;
text-transform: uppercase;
}
Para tu información, LiningJS también soporta caracteres y párrafos chinos.
UnderlineJS
UnderlineJS es una librería de JavaScript que que el texto se subraye mejor. Echa un vistazo a la demo para ver lo que intento decir, y verás como el subrayado no se "come" los caracteres de la palabra. Compara la demo con la salida del subrayado de la regla de CSS text-decoration actual y seguramente te convertirás en un fan de underlineJS como yo.
FlowType
Este plugin ajusta dinámicamente el tamaño de la fuente basándose en la anchura de su capa contenedora. FlowType ayuda a insertar el número ideal de caracteres por línea en cualquier ancho de pantalla. La librería dispone de opciones en donde se pueden establecer el ancho min/max de la pantalla, el tamaño min/max de la fuente, y el font ratio.
HatchShow
HatchShow expande el tamaño de la fuente para llenar toda la anchura de su contenedor. El plugin funciona out of the box con el algoritmo; en pocas palabras, mide el ancho de los contenedores, y la longitud del carácter de la fuente y anexa el tamaño adecuado a la fuente.
GridLover
GridLover es una gran herramienta para generar estilos básicos para la disposición de la tipografía (tamaño, altura de la línea, y margen) mediante una sencilla interfaz de usuario que cuenta con un slider. Genera los estilos en SCSS, LESS y Stylus para que puedas incluirlo de inmediato en tu proyecto, independientemente del preprocesador CSS que utilices.
Modular Scale
Modular Scale es una herramienta para generar escalas de fuentes ideales para el cuerpo y los textos de encabezados. El resultado lo genera en Sass que debe ser utilizado en conjunción con tu biblioteca Sass. Alternativamente, también puedes utilizarlo en JavaScript.
Font-To-Width
Font-To-Width es una librería de JavaScript que ajusta tu fuente para que se adapte al ancho del recipiente. Determinará el tamaño de la fuente junto con el interlineado para que se adapte perfectamente. En caso de querer hacer un titular elegante, esta es la librería que debes utilizar.
