Experimentos tipográficos coloridos

Últimamente se han realizado algunos experimentos interesantes relacionados con la tipografía que han traspasado los límites. Estaba tratando de pensar en una broma como “algo en los descendientes”, pero no puedo encontrar algo que se sostenga por sí solo sin que sea fácil de contrarrestar.

Codrin Pavel creó una fascinante tipografía multicolor llamada CSSans, diseñada por su hermana Izabela Andronache.

No es una “fuente”, porque una fuente es un archivo, como “lato.woff2” o lo que sea. Este es un archivo CSS y lo escribe así:

div    divCool News/div    div        b/b        b/b        b/b        b/b    /div    div        b/b        b/b        b/b        b/b    /div/div

Tenga en cuenta el elemento especial diven la parte superior con la palabra completa, mientras que esos belementos vacíos hacen el dibujo real de los glifos. No lo llamaría completamente accesible, ya que diría que parte de la accesibilidad es cosas como la función de búsqueda en la página con resaltado y texto seleccionable. Pero obviamente se trata de un experimento artístico y su implementación podría ir en cualquier dirección. Me encantaría ver un intento de colocar un SVG transparente textencima que tenga el mismo tamaño para que el texto sea seleccionable.

¡Parece que la página de destino se creó en CodePen Projects!

Esta técnica y su relación con la accesibilidad es bastante interesante y, de hecho, más relevante de lo que piensas. De hecho, parece que Facebook utiliza una técnica similar para luchar contra el bloqueo de anuncios.

Harbor Type lanzó recientemente Rocher Color, una fuente de color gratuita. Sí, fuente de color. Eso es una cosa . Y Rocher Color es en realidad una fuente de color y una fuente variable.

El soporte me parece bastante decente, pero es complicado porque hay muchos tipos diferentes, todos con soporte diferente según el navegador.

La otra historia es que son, bueno, un poco enormes, en cuanto a tamaño. El archivo woff2 es probablemente el más relevante aquí, ya que de todos modos es una característica muy moderna. La descarga del sitio (RocherColorGX.woff2) alcanza los 178 KB. Probablemente no sea algo que simplemente arrojarías en una página para un solo título, considerando que no se trata solo del peso de las fuentes, sino que también estás siempre peleando la batalla FOUT/FOIT.

Creo que para justificar el uso de una fuente de color intenso como esta debería…

1. Úselo bastante en el sitio para títulos dinámicos.
2. Personaliza los colores para que sean perfectos para ti (con anticipación)
3. Utilice las elegantes funciones de fuentes variables, como los ajustes de bisel y sombra (sobre la marcha)

Si no te ves haciendo esas cosas, quizás sea mejor que utilices svgtodas estas formas expandidas a trazados. Aún puedes usar esta fuente para hacer el SVG, suponiendo que tu herramienta de diseño admita este tipo de fuente. No obtendrás ajuste de texto ni nada, pero el tamaño del archivo y la velocidad de carga serán mucho más rápidos. O incluso puedes usar un formato gráfico como PNG/WebP, y no hay nada de malo en eso si aún usas un elemento semántico para el título (visualmente oculto, por supuesto). No obtendrás resaltado de búsqueda en la página ni capacidad de selección, pero podría ser una buena compensación para una sola vez.

Kenneth Ormandy ha reunido algunos experimentos tipográficos más interesantes en CSS. En su publicación, menciona la fuente Pure CSS de Diana Smith, que se construye a partir de elementos vacíos y todo tipo de trucos CSS sofisticados para dibujar las formas.

El punto de este proyecto está justo en el encabezado:

Para texto no seleccionable privado, oculto para SEO y compatible con CAPTCHA. ¡Disuade el plagio y los robots de spam!

También se esconde para la tecnología de asistencia, así que tengan cuidado, pero me parece que este proyecto trata más sobre explorar posibilidades. Después de todo, son las letras las que dan vida a las extraordinarias pinturas CSS de Diana, como Zigaro.

No te pierdas la publicación de Kenneth, ya que enlaza con muchos más ejemplos fascinantes de personas que son tipógrafos con herramientas muy poco convencionales. Kenneth se atreve con este pequeño y fascinante experimento, utilizando un botón que se encuentra allí para exponer los trucos que contiene: