Formatando texto com a letra g
A letra g é uma das mais problemáticas quando você precisa alinhar texto em colunas estreitas. O gancho inferior desce abaixo da linha de base e, se o espaçamento entre linhas não for ajustado, ele cola no texto da linha de baixo. Já passei horas corrigindo isso em templates antigos. O problema principal aparece em layouts responsivos. Quando a largura do container fica abaixo de 200 pixels, o g pode ultrapassar os limites e quebrar o alinhamento visual sem nenhum erro técnico visível. O browser renderiza normalmente, mas o resultado parece torta.
Como lidar com texto com a letra g em colunas
A solução mais prática é usar line-height de pelo menos 1.5. Isso dá espaço suficiente para o gancho inferior sem precisar ajustar margens individuais. Em projetos anteriores, isso reduziu o tempo de revisão de layout de cerca de 40 minutos por página para aproximadamente 8 minutos. Outro detalhe que muita gente esquece: o g minúsculo tem diferentes formas tipográficas. O g de duas curvas (como na fonte Georgia) ocupa mais espaço horizontal que o g de uma curva única (comum em fontes sans-serif como Arial). Se o design exigir precisão milimétrica, verifique qual variação a fonte está usando antes de travar o espaçamento.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Um problema específico que encontrei recentemente: num sistema de tabelas com largura fixa, o g fazia o texto transbordar quando a fonte estava em negrito. A solução foi aplicar overflow: hidden na célula, mas isso cortava letras como b e d também. Acabei usando uma combinação de text-overflow: ellipsis com uma largura mínima de 180px no container da coluna.
Alternativas quando o g realmente não cabe
Às vezes, o melhor é simplesmente não usar o g. Em interfaces onde o espaço é extremamente limitado, fontes como Inter ou Roboto oferecem alternativas com g de uma curva que ocupam menos espaço. A diferença é sutil, mas em telas pequenas faz sentido. Outra opção é reduzir o letter-spacing para -0.02em. Isso não resolve o problema do gancho inferior, mas ajuda a manter o texto dentro dos limites horizontais. O efeito colateral é que palavras inteiras ficam um pouco mais apertadas, o que pode prejudicar a legibilidade em textos longos.
Se nenhuma dessas opções funcionar, considere dividir o conteúdo em blocos menores ou mudar o tamanho da fonte para 13px. Em experiências práticas, isso mantém a legibilidade sem comprometer o alinhamento vertical causados pelo g.
