15 útiles herramientas de tipografía web, bibliotecas y marcos
Tratar con la tipografía en la web ha sido muy peculiar.. Cada navegador tiene su propio algoritmo para renderizar fuentes. lo que podría dar lugar a discrepancias inesperadas. Solo hay unas pocas propiedades de CSS que puede usar para tener cierto control sobre las fuentes, como el kerning de fuentes, el suavizado de fuentes, la creación de DropCaps, etc..
La buena noticia es que hay recursos que puede utilizar para controlar el volante cuando se trata de tipografía de sitios web. Aquí están 15 herramientas web, librerías y frameworks. puedes usar para ese fin.
Más sobre Hongkiat:
- 9 complementos de WordPress para hacer más con tus fuentes
- Los 20 mejores complementos de tipografía de WordPress para mejorar la legibilidad
- Iconos de interfaz de usuario mejores y más agudos con fuentes web
TypeRendering
En una palabra, TypeRendering funciona de forma similar a Modernizr, excepto que solo identifica el motor del navegador para la representación de fuentes. Esta biblioteca agrega clases personalizadas basadas en sus descubrimientos que se pueden usar para aplicar reglas de estilo específicas para la representación de tipos.
KerningJS
Kerning no es personalizable para su uso en la web todavía - fuente-kerning El soporte sigue siendo deficiente en este momento, pero una nueva propiedad estándar se acerca a nosotros.. KerningJS es una biblioteca de Javascript que le brinda algunas propiedades nuevas para un mejor control de kerning, por ejemplo -letra-kern.
#heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;
Tenga en cuenta que el ejemplo anterior no es estándar y solo es aplicable con KerningJS.
DropcapJS
Aunque crear un Dropcap es factible con los estándares actuales de CSS, el resultado aún no es perfecto. A veces es francamente indeseable. DropcapJS, desarrollado por Adobe Web Platform, tiene la misión de permitir que el diseñador web aplique un dropcap perfecto fácilmente.
Forro js
Forro js es una biblioteca de JavaScript que añade la línea Clase en cada línea de tu párrafo. Esto le permite diseñar la línea por separado. Simula la idea de :: línea n (), :: nth-last-line () y ::Última línea pseudo-clases que todavía no está presente en CSS. Aquí hay un ejemplo de cómo diseñamos la primera línea de un párrafo con LiningJS:
p .line [first] font-weight: 600; transformar texto: mayúsculas;
Además, LiningJS también admite el flujo de párrafos en chino..
UnderlineJS
UnderlineJS es una biblioteca de JavaScript que hace que el texto esté subrayado mejor. Echa un vistazo a la demostración para ver a qué me refiero, asegúrate de desplazarte sobre las líneas. Compare la demostración con el resultado subrayado de la CSS actual decoracion de texto estándar y probablemente serías un fan de underlineJS también.
Tipo de flujo
Este complemento ajustará dinámicamente el tamaño de la fuente en función de un ancho de envoltura específico. Tipo de flujo lo ayuda a aplicar un número ideal de caracteres por línea en cualquier ancho de pantalla. La biblioteca viene con opciones donde se puede establecer el ancho de pantalla mínimo / máximo, el tamaño de fuente mínimo / máximo y la proporción de fuente.
HatchShow
HatchShow expande el tamaño de una fuente para llenar todo el ancho de su contenedor. El complemento funciona fuera de la caja con el algoritmo; en pocas palabras, mide el ancho del contenedor y la longitud del carácter de la fuente y agrega el tamaño adecuado de la fuente.
GridLover
GridLover es una gran herramienta para generar estilos básicos para la disposición de tipografía (tamaño, altura de línea y margen) con una IU de control deslizante fácil. Genera los estilos en SCSS, LESS y Stylus para que pueda incluirlo de inmediato en su proyecto, independientemente del tipo de preprocesador CSS que use..
TypeScale
TypeScale es una herramienta en línea que le ayudará a determinar fácilmente el tamaño de fuente correcto para su sitio web. La herramienta proporciona una GUI intuitiva y sencilla para insertar el tamaño de fuente base, la escala y la familia de fuentes que desea utilizar. Los resultados se visualizarán para que pueda jugar con la escala, para obtener el valor correcto. Solo toma el CSS una vez que hayas terminado.
Escala modular
Escala modular es una herramienta para generar una escala de fuente ideal para el texto del cuerpo y del encabezado. Da salida en Sass que se debe utilizar junto con su biblioteca Sass. Alternativamente, puedes usar JavaScript .
Fuente a ancho
Fuente a ancho (FTW) es una biblioteca de Javascript que hace que una fuente se ajuste a su ancho de contenedor. Determinará el tamaño de la fuente junto con el espacio entre palabras requerido para la fuente. Si desea hacer un título bonito, esta es la biblioteca que puede probar.
FFFFallback
FFFFallback, una herramienta útil que te permite encontrar la mejor pila de fuentes que se degradará con gracia. La herramienta viene en forma de bookmarklet, que analizará la familia de fuentes en su página y sugerirá un conjunto de fuentes para usar como respaldo..
Par de fuentes
Google Font es una de las bibliotecas de fuentes web más populares utilizadas por millones, y alberga más de 500 familias de fuentes.. Par de fuentes es una colección de fuentes de Google emparejadas, donde puedes encontrar una combinación variada entre las familias de fuentes y las caras tipográficas fácilmente. Font Pair hace que la selección de fuentes sea un poco menos abrumadora..
Ajustes de tipo
Ajustes de tipo es una colección de conjuntos de reglas CSS para definir la escala de fuente adecuada, el ritmo vertical y la relación de tipografía sensible. TypeSettings viene en Sass y Stylus, lo que permite la flexibilidad para satisfacer las necesidades de su proyecto al ajustar las variables.
Tipo de plato
Tipo de plato Es probablemente uno de los kits iniciales más completos para configurar tipografías. Typeplate se envía con un puñado de estilos tipográficos básicos que abordan el escalado, los colores, el pequeño capital, el dropcap, la sangría, la separación de palabras, el blockquote, el bloque de código y mucho más.
Ahora lea: Escaparate de diseños web con hermosa tipografía
