Ayer publicamos un artículo que describía Ocho consejos simples y útiles para el tipo de Kerning. Esto se centró principalmente en los conceptos básicos del kerning: qué es, cómo funciona, los pares de letras para vigilar, etc.
Hoy lo seguimos con una discusión sobre cómo usar Lettering.js para kern tu tipo de web. No te preocupes, es mucho Más fácil de lo que piensas!
Tipo Web de Kerning: Una batalla perdida
La tipografía en la web ha recorrido un largo camino en los últimos años. Solía ser el caso de que sólo había un puñado de? Seguro? Fuentes utilizadas en cualquier sitio web dado. En estos días, con opciones como Typekit y Google Web Fonts, puede lograr un texto cruzado, en vivo y totalmente seleccionable utilizando cientos de fuentes diferentes.
Como consecuencia, los diseñadores web han caído locamente por el tipo y no pueden obtener suficiente. Desafortunadamente, con todo el progreso que se ha logrado con la incrustación de fuentes a través de CSS, todavía falta un ingrediente clave en la caja de herramientas del tipógrafo: el kerning.
Es casi imposible estructurar titulares bien diseñados sin control sobre el kerning. De hecho, hay algunas opciones de espaciado en tu arsenal CSS, pero son realmente ineficaces para el kerning. Echemos un breve vistazo a cómo funcionan estos.
Espaciado de letras
Si realiza una búsqueda en Google? ¿CSS Kerning ?, obtiene un montón de artículos que le informan que está aplicando? ¿Espacio entre letras? a un selector dado le permite kern su tipo. Esto es realmente inexacto. Aquí hay una imagen del artículo de ayer que ilustra lo que quiero decir.
Como puede ver, el kerning afecta el espaciado entre dos letras específicas, el seguimiento afecta la cantidad uniforme de espaciado entre todas las letras y el encabezado afecta el espacio vertical entre líneas. Con esto en mente, veamos qué efecto tiene el? Espaciado entre letras? La propiedad tiene en algún texto.
Como puedes ver, el? Espacio entre letras? La propiedad claramente afecta el seguimiento, no el kerning. La aplicación de cualquier valor de espacio entre letras dado cambia el espacio entre cada letra de la palabra, línea o párrafo.
Usando el espaciado de letras para Kern
Para ser justos, la declaración en la sección anterior está un poco simplificada. En realidad, la propiedad de espacio entre letras se aplica a las letras que se seleccionan con su selector. Debido a esto, el? H2? Los selectores afectan todo en el encabezado.
Si realmente queremos ponernos desagradables, podríamos ir agregando un margen de beneficio adicional para lograr un kerning verdadero con espacios entre letras. Esto implicaría el uso de vanos en su HTML.
Obviamente, este método es bastante indeseable debido al margen de beneficio adicional. Esto es especialmente cierto si necesita kern varias letras. Los resultados son desastrosos para la legibilidad de su código.
Espaciado de palabras
Otra propiedad de CSS que se ocupa del espaciado de texto es "espacio entre palabras". Una vez más, esta es una propiedad genial, pero no nos ayuda mucho en nuestra búsqueda de kern. Esto hace exactamente lo que parece: ajusta el tamaño del espacio entre las palabras.
Conoce Lettering.js
Como puedes ver, las soluciones actuales de kerning CSS son bastante malas. Por lo que puedo decir, realmente no hay una buena manera de hacerlo sin arruinar seriamente su marca.
Afortunadamente, hay una extensión gratuita de jQuery llamada? Lettering.js? que abre un montón de opciones para estilizar fácilmente la tipografía web.
¿Qué hace?
Lettering.js no se creó únicamente con el kern en mente, sino que es una herramienta que facilita la selección de letras, palabras o líneas individuales en su CSS. Esto a su vez abre la posibilidad de muchos efectos diferentes, ¡incluyendo el kerning!
Como puede imaginar, una vez que puede apuntar fácilmente letras específicas en CSS, puede usar márgenes u otras propiedades de diseño para posicionar y estilizar todo exactamente como lo desea. Letras de kern, apliquen diferentes colores y rotaciones; ¡vuélvete loco!
¿Como funciona?
Para usar Lettering.js, primero deténgase en GitHub y obtenga la descarga gratuita. También asegúrese de incluir la última versión de jQuery.
A continuación, decide a qué quieres apuntar. En la mayoría de los casos, esto será un titular o algún otro fragmento pequeño de texto importante. ¡Nunca querrás ir a un párrafo entero!
Digamos que queremos apuntar a un? H2? etiqueta como en ejemplos anteriores, aquí está nuestro marcado HTML sin sentido:
¿Por qué usé una oración tan absurda? Debido a que el kerning predeterminado para este titular es un choque de trenes. Eche un vistazo a cómo el navegador reproduce este tipo.
Como puede ver, con un ejemplo tan malo, está claro que al menos ocasionalmente necesitamos alguna solución para los ajustes de kerning. Afortunadamente, tenemos nuestra arma secreta.
Para aprovechar el poder de Lettering.js. simplemente inserte el siguiente fragmento de código en su código. Solo necesitas cambiar el? H2? Parte si quieres apuntar a otra cosa.
Con esto en su lugar, la magia de JavaScript sigue su curso y esencialmente transforma nuestro código limpio en algo más parecido a la fealdad que vimos con el truco del espaciado de las letras. Sin embargo, tenga en cuenta que nuestro código fuente HTML se está transformando solo cuando el usuario carga la página, nuestro archivo fuente real se mantiene libre de todas las etiquetas span. Sin embargo, cuando se carga la página, se transforma en esto:
Este paso es todo lo que Lettering.js cuida de nosotros. Armados con esos nombres de clase, ahora podemos hacer lo que queramos con cada letra en CSS.
Kerning
Saltando a nuestro CSS, podemos apuntar fácilmente a cualquiera de las clases que son generadas automáticamente por Lettering.js.Por ejemplo, digamos que queremos trabajar en el? AV? emparejamiento de letras. Para ello, contamos con la? V? (la letra 11) y muévelo con el siguiente código.
Tenga en cuenta que aún podría usar la propiedad de espacio entre letras si cree que es más correcto, ¿aquí estaría destinado a? A? en lugar de la? v? aunque.
De cualquier manera, con muy poco trabajo, hemos logrado el efecto que queremos!
Hacer Kerning aún más fácil con Kern.js
Lettering.js es increíblemente fácil de implementar y usar, pero el kerning aún puede ser un poco tedioso, ya que tiene que hacer ajustes continuos en su código y luego actualizar su vista previa para ver si el ajuste fue demasiado, demasiado pequeño o correcto. Afortunadamente, podemos usar otra herramienta gratuita para ayudarnos.
Kern.js no es una biblioteca o extensión, sino más bien una aplicación web que nos permite visualizar el tipo de kern como lo haríamos en Photoshop o Illustrator.
Para utilizar esta herramienta, pase por el sitio Kern.js e instale el bookmarklet. Luego, abra la página web de prueba en su navegador y presione el bookmarklet. A partir de aquí, cualquier cosa con Lettering.js aplicado se volverá interactiva, lo que significa que simplemente puede hacer clic y arrastrar todas sus letras a su lugar.
Una vez que hayas terminado, haz clic en ¿Finalizar edición? y el CSS necesario se generará automáticamente. ¡Solo copia y pega esto en tu código y listo!
Pros y contras
Obviamente, este método para el kerning de tipo web no está exento de fallas. Sin embargo, es la mejor solución que he encontrado, por lo que si conoce algo mejor, deje un comentario a continuación. Mientras tanto, recomiendo revisar Lettering.js y Kerning.js para sus necesidades de kerning web.
Los beneficios aquí son claros, usted obtiene una solución extremadamente simple y fácil de implementar para el kerning de tipografía en vivo en la web. El texto sigue siendo perfectamente seleccionable y no tiene que ensuciar su marca HTML con un montón de etiquetas desagradables. Se agregan, pero de una manera posterior que mantiene su código limpio.
Hay varias desventajas también. Para empezar, es una solución de JavaScript, por lo que obviamente no funcionará para los usuarios con JavaScript desactivado. Sin embargo, la gran parte de esto es que esos usuarios esencialmente obtendrían la misma experiencia que si hubieran saltado este método por completo. Esencialmente, realmente no están fuera de nada. Obviamente, hay algunas implicaciones de velocidad muy leves que surgen cuando se utiliza JavaScript también.
El mayor inconveniente es que terminas con un trozo decente de CSS incómodo. Sin embargo, si desea diseñar letras individuales, realmente no hay mucho más que pueda hacer. En mi ejemplo, aquí está el código resultante después de usar Kern.js para mover un montón de cosas manualmente. Para ser honesto, realmente no es tan malo!
Conclusión
En resumen, el kerning en la web apesta. Contrariamente a la creencia popular, el? Espacio entre letras? La propiedad de CSS en sí misma está realmente más orientada al rastreo que al kerning, realmente tiene que destinar su HTML a nosotros para kern.
Como alternativa, Lettering.js puede implementarse en menos de un minuto y realmente proporciona una total flexibilidad en términos de cómo se adapta a su tipo. ¡Incluso puedes usar Kern.js para kern tu tipo en una interfaz visual como si estuvieras usando un software de gráficos!
Si ha estado buscando una forma mejor de kern live web, pruebe esta solución y háganos saber lo que piensa en los comentarios.