Depois de terminar um projeto que exigia que eu aprendesse tudo o que pudesse sobre animações CSS e SVG, comecei a escrever esta série sobre Smashing Animations e “Como desenhos clássicos inspiram CSS moderno”. Para encerrar este ano, quero mostrar como usar CSS moderno para criar aquele elemento que torna os Toon Titles tão impactantes: sua tipografia.
Design da arte do título
Na era do cinema mudo da década de 1920 e início dos anos 30, a tipografia do título de um filme criava um clima, definia o cenário e lembrava ao público o tipo de filme que eles pagaram para ver.
Os cartões de título dos desenhos animados também continham marca, clima e cenário, tudo em um só. Nos primeiros anos, quando os orçamentos dos grandes estúdios eram maiores, esses cartões de título eram muitas vezes ilustrativos e pictóricos.
Mas quando a televisão cresceu durante a década de 1950, os orçamentos caíram e os cartões desenhados por artistas como Lawrence “Art” Goble adoptaram uma nova linguagem visual, tornando-se mais gráficos, estilizados e menos complexos.
Observação: Lawrence “Art” Goble é um dos heróis frequentemente esquecidos da animação americana de meados do século. Ele trabalhou principalmente para a Hanna-Barbera durante os anos mais influentes das décadas de 1950 e 1960.
Goble não era um animador de personagens. Seu papel era criar atmosfera, então ele projetou ambientes para Os Flintstones, Huckleberry Hound, Desenhe Rápido McGrawe Urso Ioguebem como os cartões de título de abertura que dão o tom. Seus cartões de título, com pinturas com logotipo sobreposto, ajudaram a definir o visual icônico da Hanna-Barbera.
A arte de Goble para personagens como Quick Draw McGraw e Yogi Bear foi eficaz em telas de TV menores. Em vez de reproduzir uma cena do desenho animado, ele se concentrou em apresentar uma ideia única e forte – muitas vezes em silhueta – que capturasse sua essência. Em “The Buzzin’ Bear”, Yogi passa voando em um helicóptero. Ele salta para longe, com a cesta de piquenique na mão, em “Bear on a Picnic”, e em seu “Prize Fight Fright”, Yogi coloca o texto do título na caixa.
Com pouco ou nenhum movimento para confiar, os quadros únicos de Goble tiveram que criar um clima, definir o cenário e descrever uma história. Eles fizeram isso usando cores planas, formas gráficas e tipografia que era frequentemente integrada à obra de arte.
Como designers que trabalham na web, os títulos toon podem nos ensinar muito sobre como transmitir a personalidade de uma marca, causar uma primeira impressão e definir expectativas para a experiência de alguém ao usar um produto ou site. Podemos aprender com as técnicas dos artistas para criar banners eficazes, cabeçalhos de páginas de destino e até mesmo as boas e antigas telas iniciais.
Tipografia do título Toon
Os cartões de título dos desenhos animados mostram como a fusão do tipo com as imagens proporciona o impacto que um cabeçalho ou herói precisa. Com um punhado de text-shadow, text-strokee transform truques, o CSS moderno permite que você aproveite a mesma energia.
O Gerador de Título de Texto Toon
No meio da escrita deste artigo, percebi que seria útil ter uma ferramenta para gerar texto com o estilo dos títulos de desenhos animados que tanto amo. Então eu fiz um.
My Toon Text Title Generator permite experimentar cores, traços e múltiplas sombras de texto. Você pode ajustar a ordem de pintura, aplicar espaçamento entre letras, visualizar seu texto em uma seleção de fontes de amostra e, em seguida, copiar o CSS gerado diretamente para sua área de transferência para usar em um projeto.
CSS do título do desenho animado
Você pode simplesmente copiar e colar o CSS fornecido pelo Toon Text Title Generator. Mas vamos examinar mais de perto o que ele faz.
Sombra de texto
Veja o tipo neste título do episódio “Yuk-Yuk Duck” de Augie Doggie, com suas letras amarelo-claras e sombra escura, dura e deslocada que o destaca do fundo e cria a ilusão de profundidade.
Você provavelmente já sabe disso text-shadow aceita quatro valores: (1) deslocamentos horizontais e (2) verticais, (3) desfoque e (4) uma cor que pode ser sólida ou semitransparente. Esses valores de deslocamento podem ser positivos ou negativos, então posso replicar “Yuk-Yuk Duck” usando uma sombra forte puxada para baixo e para a direita:
color: #f7f76d;
text-shadow: 5px 5px 0 #1e1904;
Por outro lado, este título “Pint Giant” tem uma sensação diferente com sua sombra negativa semi-suave:
color: #c2a872;
text-shadow:
-7px 5px 0 #b100e,
0 -5px 10px #546c6f;
Para adicionar profundidade extra e criar efeitos mais interessantes, posso colocar várias sombras em camadas. Para “Let’s Duck Out”, combino quatro sombras: a primeira, uma sombra sólida com um deslocamento horizontal negativo para tirar o texto do fundo, seguida por sombras progressivamente mais suaves para criar um desfoque ao redor dele:
color: #6F4D80;
text-shadow:
-5px 5px 0 #260e1e, /* Shadow 1 */
0 0 15px #e9ce96, /* Shadow 2 */
0 0 30px #e9ce96, /* Shadow 3 */
0 0 30px #e9ce96; /* Shadow 4 */
Essas sombras mostram que usando text-shadow não se trata apenas de criar efeitos de iluminação, pois também podem ser decorativos e adicionar personalidade.
Traço de texto
Muitos cartões de título de desenhos animados apresentam letras com contornos em negrito que os destacam do fundo. Posso recriar esse efeito usando text-stroke. Durante muito tempo, esta propriedade só estava disponível através de um -webkit- prefixo, mas isso também significa que agora é compatível com navegadores modernos.
text-stroke é uma abreviação para duas propriedades. O primeiro, text-stroke-widthdesenha um contorno em torno de letras individuais, enquanto a segunda, text-stroke-colorcontrola sua cor. Para “Whatever Goes Pup”, adicionei um 4px traço azul para o texto amarelo:
color: #eff0cd;
-webkit-text-stroke: 4px #7890b5;
text-stroke: 4px #7890b5;
Os traços podem ser especialmente úteis quando combinados com sombras, então, para “Growing, Growing, Gone”, adicionei um traço fino 3px acidente vascular cerebral para um pouco desfocado 1px sombra para criar este efeito de texto tridimensional:
color: #fbb999;
text-shadow: 3px 5px 1px #5160b1;
-webkit-text-stroke: 3px #984336;
text-stroke: 3px #984336;
Ordem de pintura
Usando text-stroke nem sempre produz o resultado esperado, principalmente com letras mais finas e traços mais grossos, pois por padrão o navegador desenha um traço sobre o preenchimento. Infelizmente, o CSS ainda não me permite ajustar o posicionamento dos traços, como costumo fazer no Sketch. No entanto, o paint-order propriedade tem valores que me permitem colocar o traço atrás, e não na frente, do preenchimento.
paint-order: stroke. Certo: paint-order: fill. (Visualização grande)paint-order: stroke pinta o traço primeiro, depois o preenchimento, enquanto paint-order: fill faz o oposto:
color: #fbb999;
paint-order: fill;
text-shadow: 3px 5px 1px #5160b1;
text-stroke-color:#984336;
text-stroke-width: 3px;
Um traço eficaz mantém as letras legíveis, adiciona peso e – quando combinado com sombras e ordem de pintura – dá ao texto plano uma presença real.
Planos de fundo dentro do texto
Muitos cartões de título de desenho animado vão além da cor plana, adicionando textura, gradientes ou detalhes ilustrados às letras. Às vezes é uma textura, outras vezes pode ser um gradiente com uma mudança tonal sutil. Na web, posso recriar esse efeito usando uma imagem de fundo ou gradiente atrás do texto e, em seguida, recortando-o no formato das letras. Isso depende de duas propriedades trabalhando juntas: background-clip: text e text-fill-color: transparent.
Primeiro, aplico um fundo atrás do texto. Pode ser uma imagem bitmap ou vetorial ou um gradiente CSS. Para este exemplo do episódio “Baba Bait” do Quick Draw McGraw, o texto do título inclui um gradiente sutil de cima para baixo do escuro para o claro:
background: linear-gradient(0deg, #667b6a, #1d271a);
Em seguida, recolho o plano de fundo nos glifos e torno o texto transparente para que o plano de fundo seja exibido:
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Com apenas essas duas linhas, o fundo não é mais pintado atrás do texto; em vez disso, está pintado dentro dele. Essa técnica funciona especialmente bem quando combinada com pinceladas e sombras. Um gradiente recortado fornece cor e textura às letras, um traço mantém suas bordas nítidas e uma sombra as eleva do fundo. Juntos, eles recriam a aparência em camadas de cartões de título pintados à mão usando nada mais do que um pouco de CSS. Como sempre, teste o texto recortado com cuidado, pois às vezes as peculiaridades do navegador podem afetar as sombras e a renderização.
Divisão de texto em caracteres individuais
Às vezes não quero estilizar uma palavra ou título inteiro. Quero estilizar letras individuais – para posicionar um caractere no lugar, dar peso extra a um glifo ou animar algumas letras de forma independente.
Em HTML e CSS simples, só há uma maneira confiável de fazer isso: agrupar cada caractere em seu próprio span elemento. Eu poderia fazer isso manualmente, mas seria frágil, difícil de manter e desmoronaria rapidamente quando a cópia fosse alterada. Em vez disso, quando preciso de controle por letra, uso uma biblioteca de divisão de texto como splt.js (embora outras soluções estejam disponíveis). Isso pega um nó de texto e agrupa palavras ou caracteres automaticamente, dando-me ganchos extras para animar e estilizar sem bagunçar minha marcação.
É uma abordagem que mantém meu HTML legível e semântico, ao mesmo tempo que me dá o controle refinado que preciso para recriar a tipografia irregular e cheia de personalidade que você vê nos cartões de título clássicos de desenhos animados. No entanto, essa abordagem apresenta ressalvas de acessibilidade, já que a maioria dos leitores de tela lê os nós de texto em ordem. Então isto:
Hum Sweet Hum
… lê como você esperaria:
Hum doce hum
Mas isto:
H
u
m
…pode ser interpretado de forma diferente dependendo do navegador e do leitor de tela. Alguns concatenarão as letras e lerão as palavras corretamente. Outros podem fazer uma pausa entre as letras, o que na pior das hipóteses pode soar como:
“ZUMBIR…”
Infelizmente, algumas soluções de divisão não oferecem um resultado sempre acessível, por isso escrevi meu próprio divisor de texto, splinter.js, que está atualmente em versão beta.
Transformando Cartas Individuais
Para ativar meu Toon Text Splitter, adiciono um data- atributo ao elemento que desejo dividir:
Hum Sweet Hum
Primeiro, meu script separa cada palavra em letras individuais e as envolve em uma span elemento com atributos de classe e ARIA aplicados:
O script então pega o conteúdo inicial do elemento split e o adiciona como um atributo aria para ajudar a manter a acessibilidade:
Com esses atributos de classe aplicados, posso estilizar personagens individuais como quiser.
Por exemplo, para “Hum Sweet Hum”, quero replicar como suas letras se afastam da linha de base. Depois de usar meu Toon Text Splitter, apliquei quatro diferentes translate valores usando vários :nth-child seletores para criar uma aparência semi-aleatória:
/* 4th, 8th, 12th... */
.toon-char:nth-child(4n) { translate: 0 -8px; }
/* 1st, 5th, 9th... */
.toon-char:nth-child(4n+1) { translate: 0 -4px; }
/* 2nd, 6th, 10th... */
.toon-char:nth-child(4n+2) { translate: 0 4px; }
/* 3rd, 7th, 11th... */
.toon-char:nth-child(4n+3) { translate: 0 8px; }
Mas translate é apenas uma propriedade que posso usar para transform meu texto toon.
Eu também poderia girar esses personagens individuais para uma aparência ainda mais caótica:
/* 4th, 8th, 12th... */
.toon-line .toon-char:nth-child(4n) { rotate: -4deg; }
/* 1st, 5th, 9th... */
.toon-char:nth-child(4n+1) { rotate: -8deg; }
/* 2nd, 6th, 10th... */
.toon-char:nth-child(4n+2) { rotate: 4deg; }
/* 3rd, 7th, 11th... */
.toon-char:nth-child(4n+3) { rotate: 8deg; }
Mas translate é apenas uma propriedade que posso usar para transform meu texto toon. Eu também poderia rotate esses personagens individuais para uma aparência ainda mais caótica:
/* 4th, 8th, 12th... */
.toon-line .toon-char:nth-child(4n) {
rotate: -4deg; }
/* 1st, 5th, 9th... */
.toon-char:nth-child(4n+1) {
rotate: -8deg; }
/* 2nd, 6th, 10th... */
.toon-char:nth-child(4n+2) {
rotate: 4deg; }
/* 3rd, 7th, 11th... */
.toon-char:nth-child(4n+3) {
rotate: 8deg; }
E, claro, eu poderia adicionar animações para agitar esses personagens e dar vida aos meus títulos em estilo de texto. Primeiro, criei uma animação de quadro-chave que gira os personagens:
@keyframes jiggle {
0%, 100% { transform: rotate(var(--base-rotate, 0deg)); }
25% { transform: rotate(calc(var(--base-rotate, 0deg) + 3deg)); }
50% { transform: rotate(calc(var(--base-rotate, 0deg) - 2deg)); }
75% { transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); }
}
Antes de aplicá-lo ao span elementos criados pelo meu Toon Text Splitter:
.toon-char {
animation: jiggle 3s infinite ease-in-out;
transform-origin: center bottom; }
E, finalmente, definindo a quantidade de rotação e um atraso antes de cada personagem começar a balançar:
.toon-char:nth-child(4n) { --base-rotate: -2deg; }
.toon-char:nth-child(4n+1) { --base-rotate: -4deg; }
.toon-char:nth-child(4n+2) { --base-rotate: 2deg; }
.toon-char:nth-child(4n+3) { --base-rotate: 4deg; }
.toon-char:nth-child(4n) { animation-delay: 0.1s; }
.toon-char:nth-child(4n+1) { animation-delay: 0.3s; }
.toon-char:nth-child(4n+2) { animation-delay: 0.5s; }
.toon-char:nth-child(4n+3) { animation-delay: 0.7s; }
Um quadro para causar uma boa impressão
Os artistas de títulos de desenhos animados tinham uma moldura para causar uma boa impressão, e sua tipografia era tão importante quanto a obra de arte que pintavam. O mesmo acontece na web.
Com algumas propriedades CSS cuidadosamente escolhidas – sombras, traços, fundos recortados e alguma animação restrita – podemos recriar o mesmo impacto. Adoro textos de desenho animado não porque seja nostálgico, mas porque seu design é intencional. Faça escolhas deliberadas e deixe um pouco de tipografia de texto adicionar impacto aos seus designs.
