A tipografia em “Cuphead” • B9

Comentários

Sua voz importa aqui no B9! Convidamos você a compartilhar suas opiniões e experiências na seção de comentários abaixo. Antes de mergulhar na conversa, por favor, dê uma olhada nas nossas Regras de Conduta para garantir que nosso espaço continue sendo acolhedor e respeitoso para todos.

Capa - A tipografia em “Cuphead”

A tipografia em “Cuphead”

Jogo lançado no segundo semestre de 2017 impressiona pela direção de arte cuidadosa e trabalho tipográfico

por Valter Vinícius Costa

Os fãs de jogos de plataforma ganharam um motivo para comemorar o mês de setembro de 2017: depois de ser adiado várias vezes, foi lançado “Cuphead” (disponível para PC e Xbox One), primeiro trabalho do estúdio MDHR. O jogo — que já era muito aguardado há anos — não decepcionou. Foi considerado um dos jogos do ano, sendo, por exemplo, premiado pelo The Game Awards como Melhor jogo independente de estréia; Melhor Jogo Independente e Melhor Direção de Arte.

Mas não só quem é fã de games de plataforma aproveitou “Cuphead”: o lançamento foi um presente também para fãs de desenhos animados. E, para o olhar mais atento, também para os interessado por tipografia. O jogo — que narra a saga dos irmãos Cuphead e Mugman enquanto tentam não perder suas almas para o diabo — é inspirado na estética das animações dos anos 1930 e 1940. Por isso, parte importante da sua direção de arte passa por aplicar essa estética ao desenho das letras que acompanham seus cenários e personagens.

Quase tudo foi desenhado exclusivamente para “Cuphead”. Apenas uma fonte foi comprada externamente

“Cuphead” utiliza a tipografia como importante elemento narrativo (não apenas comunicativo) em momentos chave do jogo. Qualquer pessoa que tenha jogado “Cuphead” deve concordar: a aparição das frases “A KNOCKOUT!” ou “BRAVO!!!” preenchendo quase toda a tela nos finais de fase gera uma sensação de recompensa à altura da alta dificuldade de vencer cada etapa do jogo. A tipografia ainda ajuda a estabelecer o ambiente de cada fase: as batalhas com “chefões” são iniciadas com a frase “WALLOP!” escrita toda em letras maiúsculas, enquanto que as fases de plataforma (sem chefes) iniciam com “Run’n Gun!” escrita com maiúsculas e minúsculas e em tamanho menor na tela, de forma menos “urgente”. As letras ainda aparecem como elemento narrativo na forma de onomatopéias, no decorrer de algumas fases do jogo.

Imagem 2: Onomatopeia em uma das batalhas de “Cuphead”

A preocupação do estúdio com esse elemento está não apenas no uso, mas também nos desenhos das letras. Quase tudo foi desenhado exclusivamente para “Cuphead”. Apenas uma fonte foi comprada externamente. A Silentina, baseada em intertítulos de filmes do cinema mudo. Para realização deste trabalho tipográfico fizeram parte da equipe do estúdio dois profissionais especializados: Warren Clark — responsável pelas peças de lettering — e Mark Simonson, que atuou como consultor em tipografia e também desenvolveu seis das fontes utilizadas.

Imagem 3: “A KNOCKOUT!”, anúncio de vitória nas batalhas de “chefes”

As fontes do jogo foram produzidas a partir de amostras escaneadas de tipografias da década de 1930 e tracejadas digitalmente

É importante esclarecer que tecnicamente lettering não é a mesma coisa que tipografia: o primeiro refere-se ao desenho de letras pensadas para uma composição específica; já a tipografia diz respeito à sistematização do caracteres desenhados, com o objetivo de serem aplicados a qualquer layout. Entretanto, convenciona-se abranger o lettering dentro do escopo do termo “tipografia”.

“Cuphead” se utiliza dos dois recursos. Por exemplo, o título da imagem acima — “A KNOCKOUT!” é um lettering — , onde cada caractere foi pensado especificamente para a composição deste título, no qual a palavra é composta por uma curva crescente da esquerda para a direita (note como as duas letras “K” são diferentes uma da outra nesse contexto). Já os balões de fala, os menus e outros textos de comunicação do jogo são compostos por fontes (caracteres sistematizados para serem capazes de escrever qualquer palavra).

Mas mesmo quando se utiliza de fontes, “Cuphead” tenta simular o estilo dos letterings dos anos 30. Isso acontece claramente nos balões de fala do jogo, onde para a fonte aplicada foram criados caracteres alternativos e o mecanismo de texto adaptado para que cada frase não repetisse as mesmas formas dentro de um balão. Na segunda amostra da imagem abaixo a letra “E” tem formas diferentes nas palavras “CUPHEAD” e “BE”. O mesmo vale para o “D” em “CUPHEAD” e “GOOD”. A fonte modificada conta com duas versões para todos os caracteres e alguns possuem até três (R, S, T, L, N, E, A, B, C, H, O). A Imagem 4 mostra as três as versões da letra “O” (nas palavras “COME”, “TO” e “SHOW”). “É sutil, mas faz toda a diferença”, afirma Chad Moldenhauer, um dos criadores e diretor de arte do jogo.

Imagem 4: Fonte utilizada nos balões de fala em “Cuphead” (fonte padrão)

Imagem 5: Balão de fala em “Cuphead” (fonte modificada para o jogo, com caracteres alternativos)

O motivo disso é, mais uma vez, o momento que inspira o jogo: nos anos 30 e 40 o uso de famílias tipográficas — com tipos de metal — era pouco prático e pouco versátil, por isso a comunicação visual da época se beneficiava muito do trabalho dos letristas, que facilitavam o desenho e uso de letras. Por isso, o caráter “imperfeito” dos desenhos feitos à mão é buscado em “Cuphead”. Inclusive, todo o jogo é desenhado à mão, não apenas as letras.

“Durante as pesquisas sobre a época, percebemos que hand lettering era a única possibilidade. Como nós queríamos que “Cuphead” fosse bem fiel aos anos 1930, o lettering teria um papel importante nisso”, explica Moldenhauer.

As fontes do jogo foram produzidas a partir de amostras escaneadas de tipografias da década de 1930 e tracejadas digitalmente. Sobre esse processo, fala ainda Mark Simonson:

“Você tem que entender as limitações da composição de tipos naquela época; como eles eram espacejados, todas as irregularidades no alinhamento e outros elementos que criam aquela aparência”

Em “Cuphead”, as fontes apresentam seus detalhes “falhos” tanto do desenho propriamente dito das letras como em alguns outros aspectos técnicos. No desenho é mais fácil perceber, como no exemplo dos balões de fala, onde as letras são deliberadamente inconsistentes. Os letterings do jogo seguem a mesma linha. Não fazem questão de parecerem perfeitos. Note como a perna do “K” na Imagem 2 possui um relevo incomum no seu lado esquerdo.

Na mesma imagem, outra letra mais sutil também ajuda a enxergar essas particularidades: a letra “T”. Veja como — de cima para baixo— sua haste se inicia estreita e vai se tornando mais larga. Porém, isso acontece apenas do lado esquerdo, enquanto o lado direito continua reto. Há também uma inconsistência no peso (largura dos traços) dessa letra. Sua barra (horizontal) é levemente mais pesada que a sua haste (vertical), o que é o contrário do que seria a relação comum entre esses elementos (em geral, a haste do T maiúsculo tem mais peso do que a sua barra, uma vez que a haste é o que visualmente sustenta a letra). Esses são só alguns dos exemplos, mas é possível encontrar “defeitos propositais” em praticamente todas as letras em “Cuphead”.

Já sobre as outras questões técnicas, Mark Simonson afirma que não era preciso ter um espacejamento (cálculo do espaço existente entre os glifos) perfeito e, tampouco, o kerning (cálculo do espaço entre pares específicos de letras). Na imagem abaixo, note o espaço irregular entre as letras “P” e “A”, demasiadamente separadas.

Imagem 6: Cartela de entrada para as batalhas

O designer de tipos e designer gráfico Rodrigo Saiani ajuda a explicar quais recursos utilizados por “Cuphead” o fazem ser uma boa representação tipográfica dos anos 1930:

“A inspiração no cinema mudo; bom uso do preto e branco; a mistura eclética de fontes compondo a comunicação; letras que seguem um caminho ondulado; uso de letreiramento de quadrinhos, no caso dos diálogos”.

Imagem 7: A frase “Run’n Gun!” dá início às fases de plataforma

Uma das famílias tipográficas de Saiani também é utilizada em videogames: a Motiva Sans foi escolhida para ser a fonte padrão do sistema SteamOS. Porém, sobre o desafio do uso de tipografia no caso específico de “Cuphead” ele afirma que “a preocupação estética fica acima da técnica”. Ainda sobre a tarefa de aplicar tipografia no jogo, é interessante o depoimento de Warren Clark, que diz: “O ambiente dos videogames é e continuará sendo estrangeiro para mim. Meu desafio [com “Cuphead”] era mostrar que a disciplina da tipografia é universal”.

Outro aspecto importante a se notar sobre o uso de letras no jogo é a profusão de diferentes estilos de desenho — tanto nas fontes como nos letterings — , muitas vezes misturando letras serifadas, sem-serifa e cursivas no mesmo layout. São tantas que é até difícil contar quantas fontes o jogo utiliza. Cada etapa do game tem suas próprias fontes (e geralmente cada tela utiliza mais de uma). Por exemplo, algumas das fontes utilizadas no livro exibido de capa desse post não se repetem mais durante o resto do jogo. O mesmo vale para outras tipografias utilizadas em momentos específicos da narrativa.

Imagem 8: Menu do jogador

Mais uma vez Saiani indica o motivo para essa abordagem: “O jogo segue o que ocorria na comunicação popular e publicidade americana. A estética vigente era um tanto verborrágica e muito eclética tipograficamente. O que pra gente parece uma bagunça, era simplesmente a forma de comunicação vigente da época”.

Ele aponta ainda para outra referência do jogo: o movimento Art Déco, de origem européia e que reverbera nos Estados Unidos a partir dos anos 1930. A influência está na forma “pontuda” de algumas letras. Veja em “WALLOP!” (imagem abaixo) como os caracteres (exceto a letra L) se utilizam de formas triangulares. Observe também na Imagem 2 como a letra “N” possui três terminações retas e uma triangular. A inspiração, no entanto, é puramente morfológica. O jogo a adapta à sua estética e às suas próprias “idiossincrasias”.

Imagem 9: A frase “WALLOP!” inicia as batalhas

As inspirações mais diretas do jogo surgem mesmo das animações da década de 1930. Por exemplo, a fonte dos balões de fala foi inspirada em letterings do desenho “O gato Félix”. Outra personagem utilizada foi a “Betty Boop”: o título do curta-metragem “Bimbo’s Initiation” serviu de base para a criação das cartelas de entrada nas batalhas em “Cuphead” (compare a Imagem 5 com a imagem abaixo). Esse título ainda é útil para ver mais uma vez o quanto o jogo simula a “verborragia” visual da época. Cinco estilos diferentes de desenho são utilizados nessa tela (e que “Cuphead” reproduz). Até o logotipo MPPDA, da então Motion Picture Producers and Distributors of America, é simulado em “Cuphead”, com as letras do estúdio MDHR.

Imagem 10: Abertura do curta-metragem “Bimbo’s Initiation”, da personagem Betty Boop

É relevante perceber ainda como os criadores do jogo relatam a inspiração em outros jogos (“Gunstar Heroes”, “Contra III”, “Contra Hard Corps”, “Super Mario World”, “Street Fighter III”, “Mega Man”) em relação às mecânicas de gameplay, mas não para a direção de arte (incluindo a tipografia). Chad Moldenhauer explica que, além dos desenhos animados, a equipe buscou inspiração tipográfica em: quadrinhos; cartões postais; cards de baseball; embalagens; publicidade; anuários e formulários de pesquisas do governo.

Card de baseball usado como referência para fontes do jogo (reprodução: Mark Simonson)

Perguntado se “Cuphead” poderia definir um marco para a tipografia nos videogames, Chad afirma: “Isso é um pouco difícil de definir. Nós não conhecemos nenhum jogo que tenha um uso tão extensivo de hand lettering (ou mesmo scans de tipos de metal), então existe a possibilidade de que “Cuphead” seja o primeiro, mas não temos provas disso”.

> Esse artigo foi originalmente publicado no Medium

todo tipo
de conversa
para quem quer
sair do raso
Photo by Prince Akachi on Unsplash

transforme sua marca em conversa
conte com o b9

20 anos de pioneirismo digital

Aqui no B9, a gente adora uma conversa. Mais do que uma paixão, elas viraram o nosso negócio. O B9 já produziu milhares de episódios, canais temáticos, eventos, palestras e campanhas que contam histórias, expandem horizontes e criam conexões autênticas com a audiência. Buscando diferentes pontos de vista e com ideias que nos tiram do raso. Através de oportunidades de mídia, conteúdos originais em podcast e projetos multiplataformas, o B9 também coloca marcas e empresas nessas rodas de conversa. Pra conhecer nossos cases e tudo o que o B9 pode fazer pela sua marca acesse o site:

negocios.b9.com.br
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro