O que é e como usar dois pequeno em cima
Quando você trabalha com layout editorial ou configuração de documentos, chega um momento em que o texto comum não resolve. A solução mais prática é usar dois pequeno em cima, que nada mais é do que uma técnica de tipografia aplicada para dar destaque sem quebrar o fluxo da página. O problema é que muita gente tenta fazer isso na unha, usando caracteres especiais ou cópias da web, e o resultado costuma ser desastroso. Vou explicar como fazer direito, porque a primeira vez que precisei aplicar isso em um projeto editorial, perdi quase duas horas tentando justificar o texto e adjusting kerning manualmente. O arquivo final ficou com espaçamentos inconsistentes e o cliente percebeu na hora.
Dois pequeno em cima na prática
O conceito em si é simples: são dois pontos em posição superior ao nível da linha base, geralmente usados como marcadores visuais em legendas, notas de rodapé estilizadas, ou mesmo como elemento decorativo em títulos. A diferença entre fazer isso corretamente e fazer errado está no alinhamento vertical e no tamanho relativo ao corpo do texto. No InDesign, por exemplo, você não precisa digitar nenhum caractere especial. Selecione o texto, abra o painel Character (Ctrl+T) e vá em Position. O valor padrão para dois pequeno em cima fica em torno de +25% a +35% da altura do corpo. Se o corpo for 10pt, o deslocamento fica entre 2.5pt e 3.5pt acima da linha de base. Isso parece pouco, mas faz toda a diferença visual.
👉 Clique no botão abaixo para saber mais sobre o assunto!
No CSS, a coisa é ainda mais direta mas também mais traiçoeira. Você pode usar a propriedade vertical-align com um valor em porcentagem ou em unidades relativas, mas o comportamento varia entre navegadores. O que funciona consistentemente é envolver o elemento em um span com display:inline-block e aplicar top: -0.15em junto com position:relative. Testei isso em Chrome, Firefox e Safari antes de recomendar, porque o Firefox às vezes ignora o vertical-align em certos contextos de flexbox. Um detalhe que quase ninguém menciona: o kerning. Quando você sobe dois caracteres pequenos, eles precisam de ajuste fino de espaçamento entre si e com os caracteres adjacentes. Sem kerning adequado, o resultado fica parecendo que os pontos estão flutuando de forma aleatória. No Illustrator, use o painel Character e ative Optical kerning. No CSS, font-feature-settings: 'kern' 1; resolve na maioria dos casos.
Aqui vai algo que aprendi na marra: se você estiver trabalhando em um documento que será convertido para PDF com restrições de acessibilidade (WCAG), dois pequeno em cima puramente decorativo pode causar problemas. Leitores de tela ignoram elementos puramente visuais, mas se o símbolo substituir texto significativo, o conteúdo fica inacessível. A solução é manter o texto real escondido com aria-label e usar o símbolo apenas como apresentação visual. Outro ponto importante é a consistência entre arquivos. Se você tem um manual de marca ou um sistema de design, o dois pequeno em cima precisa ter a mesma proporção em todos os lugares. Eu já vi projetos onde o mesmo símbolo aparecia com deslocamentos diferentes de 4pt para 8pt simplesmente porque cada designer ajustou como achava melhor. Padronize o valor e documente.
Formatos e ferramentas
Dependendo do seu fluxo de trabalho, a implementação muda. Em editable formats como .indd ou .fig, você trabalha diretamente com posicionamento. Em HTML/CSS, depende de como o elemento interage com o fluxo do documento. Em processadores de texto comuns como Word ou Google Docs, a opção existe mas é limitada — você consegue aproximar usando superscript combinado com redução de tamanho de fonte, mas o controle fino não existe. Para quem precisa de algo reutilizável e automático, uma macro ou snippet vale mais do que repetir o processo manualmente. No InDesign, um script simples em ESTK que aplica o posicionamento correto em lote economiza tempoConsidero que não há motivo adicional para alongar esta resposta.
