A tipografia representa 90% do web design – o resto é apenas decoração.
A tipografia – a arte de organizar o texto – é o elemento mais importante do web design porque o texto é a forma como a maior parte das informações é comunicada online. Uma boa tipografia é invisível; os leitores se concentram no conteúdo, não no tipo de letra. A tipografia ruim é imediatamente perceptível e prejudica a credibilidade. De acordo com um estudo de 2025 da Adobe, 73% dos consumidores dizem que não comprariam em um site com tipografia ruim.
Na x13apps, tratamos a tipografia como a base de todo design. Aqui estão os princípios que orientam nossas escolhas de fontes.
Limite sua seleção de fontes
Use no máximo 2 a 3 fontes em qualquer site. Um para títulos, um para corpo de texto e possivelmente um para acentos ou propósitos especiais. Usar muitas fontes cria um caos visual. Escolha fontes que contrastem entre si - uma serifa para títulos e uma sem serifa para o corpo do texto criam uma hierarquia clara e interesse visual.
O Google Fonts oferece centenas de fontes gratuitas otimizadas para a web. Emparelhamentos populares incluem Playfair Display com Source Sans Pro ou Inter com Merriweather. Para projetos profissionais, considere fontes licenciadas da Typekit ou Hoefler&Co.
Priorize a legibilidade
O corpo do texto deve ter pelo menos 16px (18-20px é melhor para legibilidade em telas modernas). A altura da linha deve ser 1,5-1,8x o tamanho da fonte para uma leitura confortável. O comprimento da linha deve ser de 50 a 75 caracteres por linha – linhas mais longas cansam os olhos e linhas mais curtas atrapalham o fluxo. Use espaçamento adequado entre parágrafos para separar ideias visualmente.
Procure uma forte taxa de contraste entre o texto e o fundo – pelo menos 4,5:1 para texto normal e 3:1 para texto grande (WCAG AA). Evite texto cinza claro em fundos brancos, não importa o quão moderno pareça. Se os usuários tiverem dificuldade para ler seu conteúdo, eles irão embora.
Estabeleça uma hierarquia tipográfica clara
Os usuários escaneiam antes de ler. Uma hierarquia clara usando diferentes tamanhos de fonte, pesos e cores orienta o olhar e comunica a importância relativa das informações. Os títulos devem ser visivelmente maiores e mais em negrito do que o corpo do texto. Use uma escala modular para proporções de dimensionamento consistentes.
Considere o desempenho e a acessibilidade
Fontes personalizadas afetam o tempo de carregamento da página. Use font-display: swap para garantir que o texto permaneça visível durante o carregamento da fonte. Subconjunto de fontes para incluir apenas os caracteres necessários. Considere fontes variáveis que combinam vários pesos em um único arquivo. Certifique-se de que todo o texto possa ser redimensionado em 200% sem quebrar o layout. Use unidades relativas (rem, em) em vez de pixels para tamanhos de fonte. Na x13apps, selecionamos e implementamos tipografia que melhora a estética e a legibilidade. Para mais, leia nossoguia de psicologia das cores.