15 Herramientas, bibliotecas y marcos de tipografía web útiles
Tratar con la tipografía en la web ha sido muy peculiar. Cada navegador tiene su propio algoritmo para representar fuentes que podrían generar discrepancias inesperadas. Solo hay unas pocas propiedades de CSS que puede usar para tener cierto control sobre las fuentes, como interletraje de fuentes, suavizado de fuentes, al crear DropCaps, etc. Además de eso, tenemos que lidiar con muchos problemas de diseño cuando se trata de fuentes. .
La buena noticia es que hay recursos que puede utilizar para hacerse cargo de la rueda cuando se trata de tipos de sitios web. Aquí hay 15 herramientas web, bibliotecas y marcos que puede usar para ese fin.
Más sobre Hongkiat:
- 9 plugins de WordPress para hacer más con sus fuentes
- 20 mejores complementos de tipografía de WordPress para mejorar la legibilidad
- Iconos de UI mejores y más nítidas con fuentes web
TipoRendering
En pocas palabras, 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.
KerningJSKerning aún no se puede personalizar para su uso en la web (la compatibilidad con font-kerning
todavía es deficiente en este momento), pero nos está llegando una nueva propiedad estándar. KerningJS es una biblioteca de Javascript que le ofrece algunas propiedades nuevas para un mejor control de interletraje, por ejemplo -letter-kern
.
# título {-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 se aplica con KerningJS.
DropcapJSAunque la creación de 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 al diseñador web aplicar fácilmente un dropcap perfecto.
LiningJSLiningJS es una biblioteca de JavaScript que agrega la clase de line
en cada línea de su párrafo. Esto le permite diseñar la línea por separado. Simula la idea de las ::nth-line()
pseudo-clases ::nth-line()
, ::nth-last-line()
y ::last-line
que aún no están presentes 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; text-transform: mayúscula; }
Además, LiningJS también es compatible con el flujo de párrafo chino.
UnderlineJSUnderlineJS es una biblioteca de JavaScript que hace que el texto se destaque mejor. Mira la demostración para ver lo que quiero decir, asegúrate de pasar el cursor sobre las líneas. Compare la demostración con la salida de subrayado del estándar actual text-decoration
CSS y probablemente también sea fanático de underlineJS.
Este complemento ajustará dinámicamente el tamaño de fuente en función de un ancho de envoltura específico. FlowType lo ayuda a aplicar una cantidad ideal de caracteres por línea en cualquier ancho de pantalla. La biblioteca viene con opciones donde se puede configurar el ancho mínimo / máximo de la pantalla, el tamaño mínimo / máximo de la fuente y la relación de fuentes.
HatchShowHatchShow amplía el tamaño de una fuente para llenar todo el ancho de su contenedor. El complemento funciona 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.
GridLoverGridLover es una gran herramienta para generar estilos básicos para el arreglo tipográfico (tamaño, altura de línea y margen) con una interfaz de usuario fácil de deslizar. Genera los estilos en SCSS, LESS y Stylus para que pueda incluirlo de inmediato en su proyecto, independientemente del preprocesador CSS que utilice.
TypeScaleTypeScale es una herramienta en línea que le ayudará a determinar fácilmente el tamaño de letra correcto para su sitio web. La herramienta proporciona una GUI simple e intuitiva para insertar el tamaño de fuente base, la escala y la familia de fuentes que desea usar. Los resultados se visualizarán por usted para que pueda jugar con la báscula, para obtener el valor justo. Simplemente toma el CSS una vez que hayas terminado.
Escala modularModular Scale es una herramienta para generar escalas de fuentes ideales para el cuerpo y el texto del encabezado. Sale en Sass, que debe usarse junto con su biblioteca Sass. Alternativamente, puedes usar JavaScript.
Fuente-A-AnchoFont-To-Width (FTW) es una biblioteca de Javascript que hace que una fuente se ajuste a su contenedor de ancho. Determinará el tamaño de fuente junto con el espaciado entre palabras requerido para la fuente. Si desea hacer un bonito título, esta es la biblioteca que tal vez quiera probar.
FFFFallbackFFFFallback, una práctica herramienta que te permite encontrar la mejor pila de fuentes que se degradarán con gracia. La herramienta viene en forma de marcador, que analizará la familia de fuentes en su página y sugerirá un conjunto de fuentes para usar como respaldo.
Par de fuentesGoogle Font es una de las bibliotecas de fuentes web más populares utilizada por millones y alberga más de 500 familias de fuentes. Font Pair es una colección de Google Fonts emparejadas, donde puede encontrar fácilmente una combinación variada entre familias de fuentes y tipos de letra. Font Pair hace que la elección del emparejamiento de fuentes sea un poco menos abrumadora.
TypeSettingsTypeSettings es una colección de conjunto de reglas CSS para definir la escala de fuente adecuada, el ritmo vertical y la relación de respuesta de la tipografía. TypeSettings viene en Sass y Stylus, que permite flexibilidad para satisfacer las necesidades de su proyecto ajustando las variables.
Tipo de platoTypeplate es probablemente uno de los kits de inicio más completos para configurar la tipografía. Typeplate se envía con un puñado de estilos tipográficos básicos que abordan escala, colores, pequeño capital, dropcap, sangría, separación por sílabas, blockquote, bloque de código y mucho más.
Now Read: Showcase of Web Designs with Beautiful TypographyBioHacks: 6 casos Cómo la tecnología actualizó las habilidades humanas
Si las perforaciones te hacen sentir aprensivo, es posible que desees omitir esta publicación. ¿Aún aquí? Estupendo. Te sorprenderías con el tipo de cosas que las personas están poniendo o uniéndose a partes de su cuerpo para mejorar su capacidad de hacer algo.En este post veremos 6 maneras diferentes en que algunas almas valientes han estado tratando de usar la tecnología para compensar una discapacidad o para otorgarles "poderes especiales". Desde
Genere plantillas de tema de WordPress con componentes Underscores
Es posible que ya conozcas los subrayados, a menudo abreviados como _s, que es un tema de inicio popular para WordPress. Este es un gran proyecto mantenido por Automattic que es la compañía que opera WordPress.Recientemente crearon otra herramienta llamada Componentes. Este es un generador gratuito de temas en línea basado en WordPress con planos personalizados para portfolios, sitios comerciales y diferentes temas de blog, desde blogs estándar hasta revistas .Los