A crescente paixão da web pelo design plano levou a uma rápida rejeição de artifícios como sombras, em favor de uma aparência mais limpa e baseada em formas. Mas isso deixa o designer com um problema: como você digita o tipo para ser vibrante, ao mesmo tempo em que adere aos princípios do design plano?

Uma solução é o interesse renovado em tipos cromáticos. Em amplo uso na impressão de blocos de madeira do século XIX, as faces do tipo cromático usam várias cores para definir diferentes áreas. Essa é a abordagem oposta ao design de logotipo moderno, no qual somos ensinados que as formas devem funcionar em um único tom.

O benefício dos desenhos cromáticos é que eles adicionam profundidade, ênfase e caráter; sem a necessidade de uma decoração de texto mais intrusiva, como sombras.

Um dos melhores exemplos disso é Sodachrome. Projetado por Dan Rhatigan e Ian Moore, Sodachrome consiste em duas fontes separadas; aquele em que as serifas apontam para a esquerda e uma em que apontam para a direita. Definir individualmente as duas fontes parecem distintamente desequilibradas, no entanto, colocadas umas sobre as outras em cores diferentes, elas produzem uma serifa atraente. O benefício adicional da Sodachrome é que a sobreposição entre as duas cores cria uma terceira face, uma moderna sem serifa, no coração do design. O interesse visual em Sodachrome é criado pela interação entre esses três designs diferentes.

sodachrome1
sodachrome2

Sodachrome por Dan Rhatigan e Ian Moore.

O desenvolvimento de fontes cromáticas para uso na web é um desafio. Considerando que desenhos como Lisa Lonergan's Knoxville siga os contornos romanos muito tradicionais, desenhos como Pigmento de Mark Frömberg - que possui 600 caracteres - não se encaixam facilmente nos formatos de contorno de vetor.

Knoxville

Knoxville por Lisa Lonergan.

pigment1pigment2

Pigmento por Mark Frömberg.

Tipos de letra, até rostos de estilo grunge, são projetados como um contorno. Os contornos podem ser dimensionados, coloridos e espaçados, no entanto, o designer escolhe. OpenType (OT), TrueType (TT), formato de fonte aberta da Web (WOFF) e quase todos os outros formatos disponíveis funcionam dessa maneira. Isso significa que um design cromático não pode ser especificado em um único arquivo. No entanto, desde que o tipo de letra cromática seja entregue como dois arquivos de fonte separados, podemos colocar um sobre o outro com bastante facilidade.

O CSS nos permitirá duplicar o título nos estilos usando a propriedade content , evitando dobrar o conteúdo na marcação, o que teria um impacto negativo no SEO e na acessibilidade.

O formato básico é:

Any old title

E no 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 enquanto, a falta de fontes cromáticas sendo produzidas para uso na web provavelmente significará que seu uso é um passo longe demais para sites como blogs que exigem inúmeros cabeçalhos. Mas para logotipos, ou cabeçalhos que raramente mudam, onde o uso de uma imagem é aceitável, os tipos cromáticos são uma maneira vibrante e envolvente de definir um tipo que mantém uma estética plana.

Você já trabalhou com tipos cromáticos? Quais dificuldades técnicas você encontrou? Deixe-nos saber nos comentários.