O Que Se Tornou Grosso

O que é e como usar grossura de fonte no design

Grosso é simplesmente a espessura da traço de uma letra. No mundo tipográfico, isso se chama weight em inglês, e em português as pessoas costumam chamar de "grosso", "pesado" ou "negrito" dependendo do contexto. A confusão entre esses termos é mais comum do que deveria, e já vi projetos inteiros quebrados por causa de uma má escolha de espessura de fonte. Quando você vê uma fonte como a Inter, Roboto ou Open Sans, ela geralmente vem com várias variações de peso: 300 (leve), 400 (normal), 500 (médio), 600 (semi-bold), 700 (bold/grosso), 800 (extra-bold) e 900 (black). Cada uma dessas espessuras serve para um propósito diferente, e errar a escolha gera legibilidade ruim ou hierarquia visual confusa.

Como aplicar o efeito grosso corretamente

No CSS, o atributo responsável é o font-weight. Você pode usar números (de 100 a 900) ou palavras-chave como bold, que equivale a 700. Se a fonte que você escolheu não tem a variação de peso que precisa, o navegador vai apenas simular — e essa simulação fica feia em textos longos. Na prática, o problema mais comum é alguém usar font-weight: bold em parágrafos inteiros achando que está dando destaque. O resultado é cansativo e ilegível. O grosso deve ser usado para títulos, subtítulos e ênfase pontual, nunca para corpo de texto. Um parágrafo em peso 400 com uma linha em 700 nas palavras-chave funciona muito melhor do que um bloco todo em negrito. Se você estiver usando uma variável CSS para controlar o peso, a abordagem mais limpa é definir um conjunto de tokens separados para cada nível de hierarquia. Algo como --text-body: 400 e --text-heading: 700 evita que um desenvolvedor resolva trocar o peso no meio do código e estrague a escala tipográfica.

Um caso prático que me custou tempo

Em um projeto de interface interna há alguns anos, o designer pediu para deixar todos os labels dos formulários em "grosso". Eu apliquei font-weight: 700 na fonte do projeto, que era uma família com pesos bem definidos. O problema é que a fonte tinha um design bastante condensado e, ao aumentar o peso para 700, as letras começavam a se tocar em tamanhos menores. Em telas de 13 polegadas, os labels ficavam ilegíveis a 12px. A solução foi simples, mas demorei para chegar nela: em vez de usar o peso 700, usei o 600 (semi-bold) e aumentei o letter-spacing para 0.3px. O resultado foi visualmente mais leve, manteve a hierarquia solicitada e resolveu o problema de colisão entre os traços. Se você está com o mesmo problema, testar o semi-bold com espaçamento extra costuma ser mais eficaz do que insistir no bold puro.

Pegadinhas que iniciantes ignoram

Muitas fontes gratuitas não vêm com todas as variações de peso. O Google Fonts, por exemplo, permite carregar apenas os pesos que você selecionar. Se você solicitar apenas o 400 e depois tentar usar font-weight: 700 no CSS, o navegador vai distorcer o glifo original. Isso produz aquele visual borrado e artificial que todo mundo já viu e não gostou. Outro erro frequente é confiar na cor para criar contraste de hierarquia quando o peso da fonte seria mais eficiente. Preto sobre cinza escuro dá certo, mas em telas com brilho baixo ou para pessoas com dificuldades visuais, a diferença de espessura é muito mais acessível do que a diferença de tonalidade sozinha. Usar peso 600 ou 700 em combinações com cores próximas melhora a leitura sem depender apenas do contraste cromático. Se você precisa de algo que realmente funcione em qualquer contexto e não quer lidar com problemas de falha de carregamento de pesos, considere usar uma fonte com sistema de variáveis, como a Inter ou a Roboto Flex. Essas fontes permitem ajustar a espessura de forma contínua, sem precisar carregar arquivos separados para cada variação. O controle fica mais fino e o resultado visual é mais consistente em diferentes tamanhos de tela.

o que se tornou grosso é simplesmente uma questão de entender para que serve cada espessura e não confundir peso com cor ou tamanho. Quando você domina a hierarquia tipográfica, o resto do design tende a se organizar sozinho, e a legibilidade melhora sem esforço adicional.