Krypton Solid

Tipografías cromáticas y diseño plano

Tipografías cromáticas y diseño plano

El creciente enamoramiento de la web por el diseño plano ha llevado a un rápido rechazo de artificios como las sombras paralelas, en favor de una apariencia más limpia y basada en formas. Pero esto deja al diseñador con un problema: ¿cómo se diseña el tipo de letra para que sea vibrante y al mismo tiempo se adhiera a los principios del diseño plano?

Una solución es el renovado interés por las tipografías cromáticas. De uso generalizado en la impresión de bloques de madera del siglo XIX, las tipografías cromáticas utilizan varios colores para definir diferentes áreas. Este es el enfoque opuesto al diseño de logotipos moderno, en el que se nos enseña que las formas deben funcionar en un solo tono.

El beneficio de los diseños cromáticos es que añaden profundidad, énfasis y carácter; sin la necesidad de una decoración de texto más intrusiva, como sombras.

Uno de los mejores ejemplos de esto es Sodacromo. Diseñado por Dan Rhatigan e Ian Moore, Sodachrome consta de dos fuentes independientes; uno en el que las serifas apuntan a la izquierda y otro en el que apuntan a la derecha. Configuradas individualmente, las dos fuentes se ven claramente desequilibradas, sin embargo, colocadas una sobre la otra en diferentes colores, producen un atractivo serif. El beneficio adicional de Sodachrome es que la superposición entre los dos colores crea una tercera cara, una moderna sans-serif, en el corazón del diseño. El interés visual en Sodachrome se crea por la interacción entre estos tres diseños diferentes.

sodachrome2

Sodachrome de Dan Rhatigan e Ian Moore.

Desarrollar fuentes cromáticas para usar en la web es un desafío. Mientras que diseños como Knoxville de Lisa Lonergan siguen contornos romanos muy tradicionales, diseños como Pigmento de Mark Frömberg – que cuenta con 600 caracteres – no encaja fácilmente en formatos de contorno vectorial.

Knoxville

Knoxville por Lisa Lonergan.

pigmento1 pigmento2

Pigmento de Mark Frömberg.

Los tipos de letra, incluso los de estilo grunge, están diseñados como un contorno. Los contornos se pueden escalar, colorear y espaciar como elija el diseñador. OpenType (OT), TrueType (TT), Web Open Font Format (WOFF) y casi todos los demás formatos disponibles funcionan de esta manera. Esto significa que un diseño cromático no se puede especificar en un solo archivo. Sin embargo, siempre que el tipo de letra cromático se entregue como dos archivos de fuentes separados, podemos colocar uno sobre el otro con bastante facilidad.

CSS incluso nos permitirá duplicar el título en los estilos usando el contenido propiedad, evitando duplicar el contenido en el marcado que tendría un impacto negativo en SEO y accesibilidad.

El formato básico es:

Y en el CSS:

h1
{
 font-family:"Some Chromatic Font A";
 color: rgba(50, 0, 0, 0.5);
 position:relative;
}
h1:after
{
 font-family:"Some Chromatic Font B";
 color: rgba(0, 50, 50, 0.5);
 position:absolute;
 left:0;
 content:"Any old title";
}

Por ahora, es probable que la falta de fuentes cromáticas producidas para uso web signifique que su uso sea un paso demasiado lejos para sitios como blogs que requieren numerosos encabezados. Pero para los logotipos o encabezados que rara vez cambian, donde el uso de una imagen es aceptable, los tipos de letra cromáticos son una forma vibrante y atractiva de configurar el tipo de letra que conserva una estética plana.

¿Has trabajado con tipografías cromáticas? ¿Qué dificultades técnicas encontró? Háznoslo saber en los comentarios.

Deja un comentario