Pular para conteúdo

Tipografia recomendada

Direcionamento tipográfico recomendado para a evolução visual do portal do CCB, preservando a memória visual já reconhecida no ambiente atual e organizando melhor a hierarquia de leitura do novo site.

1. Diagnóstico

Ponto de partida no cenário atual

  1. A documentação atual já registra uso de Roboto, Oswald, Open Sans e Poppins nos assets visuais compartilhados do portal.
  2. A leitura visual das telas também mostra com clareza uma linguagem de display muito próxima de Bebas Neue, especialmente em banners, faixas, cards promocionais, categorias de festival e chamadas curtas em caixa alta.
  3. O portal combina, portanto, dois planos tipográficos distintos: fontes de interface mais neutras no código e tipografia condensada de alto impacto embutida em artes e peças visuais.
  4. A nova direção tipográfica deve preservar essa ideia de identidade musical e popular, mas com mais consistência e menos ruído.

Objetivo da tipografia

  1. Dar mais clareza de leitura para a home e para as páginas internas.
  2. Preservar personalidade sem cair em uma linguagem genérica de produto digital.
  3. Separar com nitidez:
  4. navegação e títulos principais;
  5. corpo de texto;
  6. textos de apoio;
  7. destaques promocionais.
  8. Evitar que cada bloco pareça usar uma família visual diferente sem controle.

2. Oportunidades de Melhoria

O que evitar

  1. Não transformar toda a interface em composição de título condensado.
  2. Não misturar várias famílias fortes no mesmo bloco.
  3. Não usar tipografia promocional agressiva como linguagem dominante da interface.
  4. Não abandonar completamente a memória visual já consolidada em favor de uma linguagem genérica de SaaS.

3. Proposta de Redesign

Sistema recomendado

Fonte principal de interface e leitura

Papel Fonte recomendada Uso
corpo principal Roboto texto corrido, formulários, descrições, tabelas e interface funcional
apoio de leitura Open Sans textos mais leves, explicações longas e blocos auxiliares quando for preciso abrir mais a leitura

Fonte de identidade e destaque

Papel Fonte recomendada Uso
títulos institucionais e navegação Oswald menu principal, headings de seção, títulos de cards e chamadas fortes de interface
display promocional Bebas Neue hero promocional, faixas, campanhas, banners e blocos de destaque curto em caixa alta
refinamento pontual Poppins badges, pequenos destaques, labels, números e microchamadas mais contemporâneas

Papel de cada família

Roboto

  1. Deve ser a base de leitura do portal.
  2. Funciona bem em parágrafos, formulários, cards e textos explicativos.
  3. Deve resolver a maior parte da interface funcional sem chamar atenção para si.
  4. É a família mais adequada para conteúdo longo, ajuda, direitos autorais, benefícios e páginas internas densas.

Open Sans

  1. Pode funcionar como apoio para blocos mais respirados e institucionais.
  2. É útil quando o texto precisa parecer um pouco mais acolhedor e menos técnico do que em Roboto.
  3. Não precisa dominar a interface; deve ser complementar.

Oswald

  1. Deve concentrar a expressão institucional do portal.
  2. É a melhor ponte entre a base visual existente e uma versão mais organizada do novo site para menu, navegação e headings.
  3. Funciona bem em:
  4. menu principal;
  5. títulos de seção;
  6. headings da home;
  7. títulos de cards;
  8. blocos institucionais e de benefícios.
  9. Deve ser usada com controle para não competir com a tipografia promocional de display.

Bebas Neue

  1. Deve ser reconhecida como referência visual importante do CCB.
  2. É a família que melhor traduz a energia de banners, faixas e chamadas condensadas observadas no portal.
  3. Funciona bem em:
  4. headlines curtas de hero;
  5. faixas promocionais;
  6. campanhas sazonais;
  7. títulos de festival;
  8. números e destaques de alto impacto.
  9. Não deve virar fonte dominante de leitura nem tomar conta da navegação.
  10. Seu papel é de display curto e marcante.

Poppins

  1. Pode entrar apenas como apoio de refinamento.
  2. Funciona bem em labels, pequenos destaques, números e CTAs curtos.
  3. Não deve substituir Oswald como fonte institucional.
  4. Não deve substituir Bebas Neue como fonte de display promocional.
  5. Não deve substituir Roboto como base de leitura.

Hierarquia tipográfica recomendada

  1. Menu principal em Oswald, com leitura clara e compacta.
  2. Itens de navegação devem parecer fortes e organizados, sem excesso de peso decorativo.

Hero e chamadas principais

  1. O título principal pode usar Oswald ou Bebas Neue, dependendo do grau de impacto desejado.
  2. O texto de apoio do hero deve usar Roboto.
  3. CTAs devem manter alta legibilidade, preferencialmente com Poppins ou Roboto em peso forte, dependendo da composição.
  4. Bebas Neue deve ficar restrita ao headline ou a pequenos trechos de display, não ao texto explicativo.

Cards e seções

  1. Título de card: Oswald quando o bloco precisar mais identidade estrutural.
  2. Descrição de card: Roboto.
  3. Títulos institucionais e de seção: Oswald.
  4. Parágrafos explicativos: Roboto.
  5. Faixas promocionais e chamadas sazonais podem usar Bebas Neue.

Conteúdo denso

  1. Ajuda, direitos autorais, benefícios, explicações de associação e textos de serviço devem priorizar Roboto.
  2. Open Sans pode ser usada pontualmente em blocos editoriais mais leves, se isso ajudar a abrir a leitura.

4. Recomendações de Conversão

Leitura visual desejada

  1. O portal deve parecer mais claro e hierarquizado do que o estado atual publicado.
  2. A tipografia deve transmitir confiança e proximidade, não frieza corporativa.
  3. Oswald preserva a energia institucional e direta do CCB.
  4. Bebas Neue preserva a memória visual de banner e impacto promocional reconhecida pelo público.
  5. Roboto sustenta o funcionamento da interface e a leitura prolongada.
  6. Poppins entra como apoio controlado, para atualizar a interface sem descaracterizar a marca.

Resumo operacional

Base recomendada

  • Roboto para corpo, interface, formulários e textos longos
  • Oswald para menu, headings, títulos e identidade institucional
  • Bebas Neue para display promocional, hero curto, faixas e campanhas
  • Open Sans como apoio editorial e leitura leve
  • Poppins para microdestaques e acabamento visual

Regra de composição

  1. Uma fonte institucional: Oswald
  2. Uma fonte de display promocional: Bebas Neue
  3. Uma fonte de leitura principal: Roboto
  4. Duas famílias auxiliares, usadas com moderação: Open Sans e Poppins

Briefing sintético para criação visual

Use uma direção tipográfica que preserve a memória visual do CCB sem repetir excesso visual. A interface deve usar Roboto como fonte base de leitura e funcionamento, com Oswald como principal fonte institucional para menu, headings e títulos de interface. Bebas Neue deve ser reconhecida como fonte de display promocional, reservada para headlines curtos, faixas, campanhas e chamadas visuais de alto impacto. Open Sans pode aparecer como apoio em blocos editoriais mais leves, enquanto Poppins deve ser usada apenas em pequenos destaques, labels e refinamentos visuais. O resultado deve parecer institucional, musical e claro, com personalidade popular e forte, mas sem cair em um visual de banner promocional permanente.

Referências cruzadas

  1. Fontes observadas no estado atual em Interface e Navegacao > Assets CSS e JS de Interface.
  2. Direção cromática em Paleta Recomendada.
  3. Direção estrutural da home em Home Reformulada.