O CSS tamanho da fonte A propriedade define o tamanho da fonte que aparece no seu site. Acertar nesse quesito vai além da estética, pois o tamanho da fonte impacta a legibilidade, a acessibilidade e, consequentemente, a taxa de conversão da sua loja.
O que é font-size em CSS?
O processo de tamanho da fonte A propriedade `size` controla o tamanho do conteúdo de texto de um elemento. Por padrão, a maioria dos navegadores renderiza o texto em `size`. 16pxMas você pode ajustar isso globalmente ou por elemento.
Exemplo:
p {
font-size: 16px;
}
Você pode definir o tamanho usando unidades absolutas (como pixels) ou unidades relativas (como em or remEscolher a opção certa determina o quão responsivo e acessível seu texto será.
Unidades CSS para tamanho da fonte
Existem diversas maneiras de definir o tamanho do texto em CSS. Vamos analisar as mais comuns e quando usar cada uma delas.
1. px (Pixels)
Unidade absoluta.
- Permanece sempre fixo, independentemente do tamanho da tela ou das configurações do usuário.
- Ideal para logotipos ou elementos de interface do usuário que precisam manter a consistência.
Limitação: Não se adapta às configurações de zoom ou tamanho de fonte padrão do navegador do usuário.
h1 {
font-size: 32px;
}
2. em (Relativo ao pai)
Unidade relativa.
- 1em corresponde ao tamanho da fonte do elemento pai.
- Útil para dimensionar o texto proporcionalmente dentro de um componente.
Observação: Pode "se acumular" se estiver aninhado; um elemento de 1.2em dentro de um elemento pai com 1.2em resulta em 1.44 vezes o tamanho original.
p {
font-size: 1.2em;
}
3. rem (Relativo à raiz)
Em relação à raiz (html) elemento.
- 1rem = o tamanho da fonte do elemento raiz (geralmente 16px).
- Recomendado para consistência em todo o site.
- Facilita a manutenção da acessibilidade e do design responsivo.
h1 {
font-size: 2.5rem; /* equals 40px if base font-size = 16px */
}
4. % (Em relação ao pai)
Atos semelhantes a em, define o tamanho da fonte como uma porcentagem do elemento pai.
p {
font-size: 100%; /* equals parent’s font size */
}
5. vw / clamp() (Tipografia fluida)
A tipografia responsiva moderna frequentemente utiliza unidades de janela de visualização ou de braçadeira() Função para ajustar o tamanho do texto ao tamanho da tela.
h1 {
font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem);
}
Isso significa:
- Tamanho mínimo da fonte = 1.5rem
- Dimensionamento baseado na largura da janela de visualização (2.5 VW + 1 rem)
- Tamanho máximo da fonte = 3rem
Ideal para títulos com aparência equilibrada tanto em computadores quanto em dispositivos móveis.
Melhores práticas de acessibilidade e legibilidade
Uma boa tipografia melhora não só o design, mas também a experiência do usuário e a acessibilidade.
- Tamanho base: Use pelo menos 16px (1rem) para o corpo do texto.
- Unidades escaláveis: Uso rem or em para que os usuários possam usar o zoom facilmente.
- Altura da linha: Conjunto altura da linha: 1.4–1.6 Para uma leitura confortável.
- contraste: Garantir que o contraste de cores atenda aos padrões exigidos WCAG padrões (pelo menos 4.5:1 para texto normal).
- Evite textos muito pequenos. Em dispositivos móveis, qualquer tamanho inferior a 14px pode reduzir a legibilidade.
Exemplo de boas práticas:
body {
font-size: 1rem; /* 16px base */
line-height: 1.5;
}
Observe que a acessibilidade também afeta diretamente o SEO. O Google prioriza páginas que são otimizadas para dispositivos móveis e legíveis.
Tamanho de fonte responsivo no Shopify e GemPages
Usando as configurações de tema do Shopify
Se você estiver usando um tema do Shopify, geralmente é possível ajustar os tamanhos das fontes diretamente nas configurações. Loja Online > Personalizar > Definições de tema > Tipografia.
Muitos temas incluem controles deslizantes ou menus suspensos para controlar o tamanho do texto globalmente (por exemplo, corpo do texto, título, texto do botão).
Usando o editor GemPages
Se você precisar de um controle mais preciso, como alterar o tamanho da fonte apenas para páginas criadas com GemPages, você pode adicionar CSS personalizado no arquivo de configuração. painel de configurações > Guia Avançado > Seção CSS.
Exemplo: Ajustar o tamanho da fonte raiz com consultas de mídia
:root {
font-size: 100%; /* base 16px */
}
@media (max-width: 600px) {
:root {
font-size: 93.75%; /* ~15px for smaller screens */
}
}
Isso garante que a sua fonte seja ligeiramente reduzida em dispositivos móveis, mantendo o equilíbrio visual sem comprometer o layout.
Erros comuns e soluções rápidas
| Erro | Questão | Conserto rápido |
| Misturando unidades px e rem | Escala inconsistente | Use rem em todo o site para previsibilidade |
| Uso excessivo ! Importante | Difícil de ignorar | Use CSS com a especificidade adequada. |
| Inserir fontes pequenas diretamente no código | Prejudica a legibilidade em dispositivos móveis. | Siga a regra de base mínima de 16px. |
| Esquecendo o dimensionamento responsivo | O texto parece muito grande/pequeno em alguns dispositivos. | Adicione braçadeira() ou consultas da mídia |
Perguntas frequentes sobre o tamanho da fonte CSS
1. Qual é a melhor unidade de tamanho de fonte para usar em CSS?
Uso rem Na maioria dos casos, ele se adapta ao elemento raiz, tornando-o responsivo e acessível.
2. Qual o tamanho ideal da fonte para o corpo do texto em sites?
AROUND 16px (1rem) para o corpo do texto. Você pode aumentá-lo para melhor legibilidade, especialmente em dispositivos móveis.
3. Como faço para alterar o tamanho da fonte no Shopify?
Acesse Tema Customizer > Configurações de tipografiaSe o seu tema não oferece essa opção, use CSS personalizado ou o elemento de tipografia do GemPages.
4. Textos menores são ruins para SEO?
Indiretamente, sim. A baixa legibilidade aumenta as taxas de rejeição, o que pode afetar as métricas de engajamento que influenciam o SEO.
Obrigado por seus comentários