{"id":73778,"date":"2025-12-01T06:34:36","date_gmt":"2025-12-01T09:34:36","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=73778&preview=true&preview_id=73778"},"modified":"2025-12-04T10:46:41","modified_gmt":"2025-12-04T13:46:41","slug":"tipografia-fluida","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/tipografia-fluida\/","title":{"rendered":"Dimensionando fontes de forma elegante com tipografia fluida"},"content":{"rendered":"

Fazer o texto parecer bom em todas as telas n\u00e3o \u00e9 t\u00e3o simples quanto parece. Por muito tempo, web designers usaram breakpoints de media queries para redimensionar fontes, mas essa abordagem rapidamente se torna confusa \u00e0 medida que surgem mais dispositivos e tamanhos de tela.<\/p>\n

A partir do WordPress 6.1<\/a> (lan\u00e7ado em novembro de 2022), agora h\u00e1 uma maneira melhor: tipografia fluida. Ela ajusta automaticamente os tamanhos de fonte definidos no seu arquivo theme.json<\/code> para serem dimensionados de forma suave, independentemente da largura ou altura da tela.<\/p>\n

Esse recurso n\u00e3o altera apenas o tamanho da fonte, mas tamb\u00e9m ajusta a altura da linha, o espa\u00e7amento entre palavras e at\u00e9 mesmo o espa\u00e7o em branco, tornando seu design mais consistente, leg\u00edvel e acess\u00edvel em todos os dispositivos.<\/p>\n

Este artigo explica como funciona a tipografia fluida, suas diferen\u00e7as em rela\u00e7\u00e3o aos breakpoints tradicionais e como voc\u00ea pode implement\u00e1-la no WordPress usando theme.json<\/code> e CSS.<\/p>\n

Mas, primeiro, vamos ver como costum\u00e1vamos lidar com a tipografia e por que a tipografia fluida \u00e9 uma melhoria t\u00e3o grande.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Tipografia por breakpoints vs tipografia fluida<\/h2>\n

Uma boa maneira de entender a tipografia fluida \u00e9 compar\u00e1-la com sua antecessora, a tipografia baseada em breakpoints, que usa media queries que segmentam larguras espec\u00edficas de dispositivos para dimensionamento de fonte.<\/p>\n

Tipografia por breakpoints<\/h3>\n

Normalmente, breakpoints s\u00e3o faixas espec\u00edficas de larguras de janela de visualiza\u00e7\u00e3o, geralmente definidas em pixels. Uma abordagem comum \u00e9 definir tr\u00eas breakpoints principais que t\u00eam como alvo telas de dispositivos m\u00f3veis, laptops e desktops.<\/p>\n

Aqui est\u00e3o configura\u00e7\u00f5es t\u00edpicas de breakpoints para laptops em um\u00a0 arquivo CSS<\/a>:<\/p>\n

@media (min-width: 48em) and (max-width: 74.9375em) {\n  body {\n    font-size: 1.125rem;\n    line-height: 1.6;\n  }\n  h1 {\n    font-size: 2rem;\n  }\n}<\/code><\/pre>\n
Embora isso funcione, tem uma grande desvantagem: \u00e0 medida que surgem novos dispositivos e tamanhos de tela, o gerenciamento de todos esses breakpoints se torna rapidamente insustent\u00e1vel.<\/p>\n
\"Ilustrando
Ilustrando como a tipografia dimensiona suavemente entre breakpoints.<\/figcaption><\/figure>\n
No exemplo de GIF acima, \u00e0 medida que a janela de visualiza\u00e7\u00e3o diminui, o texto \u00e9 redimensionado em saltos irregulares. Esse comportamento \u201cem degraus\u201d frequentemente leva a ajustes desajeitados ou imprevis\u00edveis, o que n\u00e3o \u00e9 ideal para uma tipografia suave e consistente.<\/p>\n
Tipografia fluida<\/h3>\n
Com a introdu\u00e7\u00e3o da propriedade CSS clamp()<\/a><\/code> em 2019, juntamente com as unidades de viewport (vw<\/code> e vh<\/code>), tornou-se poss\u00edvel obter um dimensionamento cont\u00ednuo e autom\u00e1tico.<\/p>\n
Isso permite que voc\u00ea defina tamanhos de fonte que s\u00e3o dimensionados dinamicamente com base nas dimens\u00f5es da janela de visualiza\u00e7\u00e3o, eliminando a necessidade de v\u00e1rios breakpoints.<\/p>\n
Aqui est\u00e1 um exemplo de uma fonte de tamanho m\u00e9dio (medium) usando clamp()<\/code>:<\/p>\n
.has-medium-font-size {\n  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);\n}<\/code><\/pre>\n
Vamos analisar melhor como o clamp()<\/code> funciona mais adiante, mas por enquanto, pense nele como uma f\u00f3rmula que define tamanhos m\u00ednimo, preferido e m\u00e1ximo, garantindo que o texto seja dimensionado de forma suave entre telas.<\/p>\n
\"Demonstrando
Demonstrando tipografia fluida.<\/figcaption><\/figure>\n
No GIF, \u00e0 medida que a janela de visualiza\u00e7\u00e3o se estreita, o texto se ajusta de forma fluida. N\u00e3o h\u00e1 saltos nem mudan\u00e7as bruscas de tamanho.<\/p>\n
Esse comportamento suave \u00e9 o que faz da tipografia fluida um avan\u00e7o t\u00e3o grande em rela\u00e7\u00e3o ao design baseado em breakpoints. Em vez de ajustar o texto em etapas, ela permite um dimensionamento cont\u00ednuo que parece natural em qualquer dispositivo.<\/p>\n
Mas o redimensionamento suave \u00e9 apenas o come\u00e7o. A tipografia fluida oferece v\u00e1rias outras vantagens que facilitam a cria\u00e7\u00e3o de designs flex\u00edveis, consistentes e acess\u00edveis.<\/p>\n
O argumento a favor da tipografia fluida<\/h2>\n
\u00c0 medida que voc\u00ea trabalhar com a tipografia fluida, os seguintes benef\u00edcios se tornar\u00e3o evidentes.<\/p>\n
Responsiva por padr\u00e3o<\/h3>\n
O texto \u00e9 dimensionado automaticamente de acordo com a janela de visualiza\u00e7\u00e3o, eliminando a necessidade de breakpoints. Independentemente de seu site ser visualizado em um telefone, tablet ou monitor ultra-wide, os tamanhos das fontes se ajustam naturalmente sem CSS adicional.<\/p>\n
Mais f\u00e1cil de manter<\/h3>\n
Sem a necessidade de m\u00faltiplas media queries, seu c\u00f3digo permanece simples e leg\u00edvel. Voc\u00ea pode definir tamanhos de fonte usando uma escala simples de \u201ccamiseta\u201d, variando de pequeno (small) a extra grande (x-large)\u00a0 e aplic\u00e1-los de forma consistente em todo o tema.<\/p>\n
Design consistente<\/h3>\n
Garanta que os tamanhos das fontes permane\u00e7am consistentes em todo o site, tanto globalmente quanto em blocos individuais, conforme necess\u00e1rio. Defina sua escala uma vez e ela fluir\u00e1 perfeitamente por todos os blocos, padr\u00f5es e modelos.<\/p>\n
Acessibilidade e legibilidade aprimoradas<\/h3>\n
Como a tipografia fluida se ajusta de forma cont\u00ednua, o texto sempre aparece em um tamanho confort\u00e1vel de ler em qualquer dispositivo. Isso deixa seu conte\u00fado mais acess\u00edvel, especialmente para usu\u00e1rios com prefer\u00eancias visuais espec\u00edficas ou n\u00edveis personalizados de zoom no navegador.<\/p>\n
Design preparado para o futuro<\/h3>\n
Como o tamanho do texto n\u00e3o depende mais de breakpoints artificiais, sua escala tipogr\u00e1fica est\u00e1 garantida para funcionar com qualquer tamanho de tela no futuro.<\/p>\n
Controle sobre a velocidade de dimensionamento<\/h3>\n
A capacidade de controlar a velocidade na qual o texto cresce ou diminui \u00e9 definida por um valor preferencial que muda com a largura da janela de visualiza\u00e7\u00e3o.<\/p>\n
Suporte dos navegadores<\/h2>\n
A fun\u00e7\u00e3o clamp()<\/code> \u00e9 bem suportada em todos os navegadores<\/a> modernos, incluindo as vers\u00f5es atuais do Chrome, Edge, Firefox e Safari.<\/p>\n
No entanto, se precisar de 100% de cobertura, voc\u00ea ainda desejar\u00e1 incluir um fallback para navegadores antigos, como o Internet Explorer 11 e as vers\u00f5es anteriores a 2020 do Safari e do Chrome.<\/p>\n
Veja como fazer isso:<\/p>\n
\/* Fallback (for IE11 and other old browsers) *\/\nli {\n  font-size: 1.25rem; \n}\n\n\/* Preferred (modern browsers) *\/\nli {\n  font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);\n}<\/code><\/pre>\n