O que é letra b pontilhada
A letra b pontilhada se refere a uma variação tipográfica onde o traço vertical ou o bule da letra "b" é preenchido com pontos em vez de uma superfície sólida. Não é um padrão universal nos sistemas de texto — você não encontra um caractere Unicode chamado "b pontilhado" que funcione em todo lugar. O que existe são alternados em fontes especiais, ligaduras manuais, ou imagens vetoriais preparadas para impressão.
Como funciona na prática
Para usar letra b pontilhada em um projeto real, você precisa decidir entre três caminhos: fonte especializada, vetorização manual, ou gerar o glifo via script. A primeira opção é a mais simples. Fontes como "Dot Matrix", "Pixelated B", ou famílias decorativas com variações pontilhadas estão disponíveis em marketplaces como Creative Market ou DaFont. O problema é que muitas dessas fontes não foram testadas em ambientes web responsivos, e o cache do navegador pode exibir uma versão borrada quando o tamanho da fonte muda abruptamente. Eu já passei por isso num projeto de identidade visual para uma cafeteria em Porto Alegre. O cliente pediu "algo moderno com letras pontilhadas". Eu escolhi uma fonte .woff2 que parecia perfeita no Figma. Quando fiz o deploy, no Safari do iPhone, a letra "b" pontilhada ficou com os pontos separados e o traço principal quase invisível. A solução foi adicionar um fallback para SVG inline com paths desenhados manualmente, especificando coordenadas exatas para cada ponto. Isso adicionou cerca de 3 kilobytes ao bundle, mas resolveu o problema de renderização inconsistente entre navegadores.
Limitações que ninguém conta
A maior armadilha da letra b pontilhada é a legibilidade em tamanhos pequenos. Quando a fonte cai para 12 pixels ou menos, os pontos se fundem e a letra deixa de ser reconhecida como "b" — vira um ruído visual. Teste sempre em dispositivos reais, não apenas no monitor. A segunda armadilha é a acessibilidade: leitores de tela ignoram variações gráficas e pronunciam "b" normalmente, mas isso só é um problema se você usar letras pontilhadas para transmitir significado adicional (como em logos conceituais). Um contra-senso importante: muitos designers acham que podem criar letras pontilhadas manualmente usando CSS `box-shadow` ou pseudo-elementos. Isso funciona para poucos caracteres, mas escala mal. Cada "b" extra multiplica os nós DOM, e em listas longas (como em tabelas de preços ou menus) o FPS cai para 30 ou menos em dispositivos médios. Se você precisa de dezenas de ocorrências, gere uma fonte SVG ou use um spritesheet.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Caminhos práticos para implementar
Opção 1 — Fonte pronta: Baixe uma fonte DOTMATRIX ou PIXELB com licença comercial. Inclua no CSS com `@font-face`, defina `font-display: swap` para evitar FOIT (Flash of Invisible Text). Limite o uso a títulos ou logos, nunca a corpo de texto corrido. O arquivo tipicamente varia entre 40 e 120 KB em woff2. Opção 2 — SVG inline: Desenha a letra "b" como um grupo de círculos (`
Opção 3 — Geração programática: Use bibliotecas como opentype.js para ler um glifo base e substituir o preenchimento sólido por um padrão de pontos calculado. Isso exige familiaridade com curves Bézier e medição de largura de banda. Para um único projeto esporádico, o custo-benefício não compensa. Para um sistema de design que precisa de letras pontilhadas recorrentes, o investimento inicial de umas 4 horas se paga rapidamente.
Dica específica sobre kerning
Letras pontilhadas têm kerning implícito diferente das sólidas porque o ar ao redor dos pontos conta como espaço negativo. Um "b" pontilhado seguido de "o" pode parecer mais distante do que o par "bo" normal. Ajuste manualmente o `letter-spacing` ou use `@font-feature-settings` se a fonte suportar `kern`. Na falta disso, adicione um margin-right de 2 a 4 pixels via CSS para cada ocorrência isolada. Se o seu caso de uso for apenas logotipos estáticos, considere exportar como PNG com fundo transparente em 2x ou 3x resolução. É mais rápido do que manter SVGs complexos e evita problemas de renderização em print.
