{"id":747,"date":"2024-04-24T20:55:02","date_gmt":"2024-04-24T23:55:02","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=747"},"modified":"2025-11-07T15:36:02","modified_gmt":"2025-11-07T18:36:02","slug":"tipografia-no-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/tipografia-no-css\/","title":{"rendered":"Tipografia no CSS"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

Tipografia no CSS<\/strong>: O controle de Fontes<\/strong> (font-family<\/code>, font-size<\/code>) garante que a fonte certa seja exibida. No entanto, o controle de Tipografia<\/strong> vai al\u00e9m, focando em como o texto se comporta em seu container: alinhamento, espa\u00e7amento, tratamento de quebras e efeitos visuais.<\/p>\n\n\n\n

O CSS oferece um conjunto robusto de propriedades para transformar blocos de texto comuns em conte\u00fado leg\u00edvel, hier\u00e1rquico e esteticamente agrad\u00e1vel.<\/p>\n\n\n\n

Neste artigo, Tipografia no CSS, exploraremos as principais propriedades CSS que controlam o Layout do Texto<\/strong> e o refinamento tipogr\u00e1fico.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. Alinhamento e Dire\u00e7\u00e3o do Texto<\/h2>\n\n\n\n
Propriedade<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td>Valores Comuns<\/strong><\/td>Notas<\/strong><\/td><\/tr><\/thead>
text-align<\/code><\/strong><\/td>Alinhamento horizontal do conte\u00fado em n\u00edvel de bloco<\/strong>.<\/td>left<\/code>, right<\/code>, center<\/code>, justify<\/code><\/td>Afeta as linhas do texto, n\u00e3o o elemento em si.<\/td><\/tr>
text-align-last<\/code><\/strong><\/td>Define o alinhamento da \u00faltima linha<\/strong> em um bloco de texto.<\/td>auto<\/code>, left<\/code>, center<\/code><\/td>Mais usado em conjunto com text-align: justify<\/code>.<\/td><\/tr>
vertical-align<\/code><\/strong><\/td>Alinhamento vertical de elementos inline<\/code><\/strong> (texto, imagens).<\/td>baseline<\/code>, middle<\/code>, top<\/code>, bottom<\/code><\/td>Importante:<\/strong> Esta propriedade s\u00f3 funciona em elementos que se comportam como inline<\/em> ou inline-block<\/em>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Exemplo de vertical-align<\/code><\/h3>\n\n\n\n

CSS<\/p>\n\n\n\n

\/* Alinha o \u00edcone verticalmente ao centro do texto ao lado *\/\n.texto-com-icone {\n  font-size: 1.2rem;\n}\n.texto-com-icone img {\n  vertical-align: middle; \n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
2. Espa\u00e7amento e Indenta\u00e7\u00e3o<\/h2>\n\n\n\n
O controle do espa\u00e7amento tipogr\u00e1fico (tracking, leading, kerning) \u00e9 vital para a legibilidade.<\/p>\n\n\n\n
Propriedade<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td>Exemplo<\/strong><\/td>Unidade Recomendada<\/strong><\/td><\/tr><\/thead>
line-height<\/code><\/strong><\/td>Espa\u00e7amento vertical entre linhas.<\/td>1.5<\/code><\/td>Sem unidade<\/strong> (relativo ao font-size<\/code>) para melhor heran\u00e7a.<\/td><\/tr>
letter-spacing<\/code><\/strong><\/td>Espa\u00e7o horizontal entre letras<\/strong>.<\/td>0.1em<\/code><\/td>Use em<\/code> ou rem<\/code> para que o espa\u00e7amento escale com o tamanho da fonte.<\/td><\/tr>
word-spacing<\/code><\/strong><\/td>Espa\u00e7o horizontal entre palavras<\/strong>.<\/td>0.5rem<\/code><\/td>Raro, geralmente ajustado pelo navegador.<\/td><\/tr>
text-indent<\/code><\/strong><\/td>Recuo da primeira linha<\/strong> de um bloco de texto.<\/td>2em<\/code><\/td>Bom para par\u00e1grafos longos, imitando o estilo de impress\u00e3o.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
3. Transforma\u00e7\u00e3o e Decora\u00e7\u00e3o de Texto<\/h2>\n\n\n\n
A. Transforma\u00e7\u00e3o de Texto<\/h3>\n\n\n\n
A propriedade text-transform<\/code> permite alterar a capitaliza\u00e7\u00e3o sem modificar o HTML subjacente:<\/p>\n\n\n\n
CSS<\/p>\n\n\n\n
\/* Transforma todo o texto do cabe\u00e7alho em MAI\u00daSCULAS *\/\nh1 {\n  text-transform: uppercase;\n}\n\n\/* Transforma a primeira letra de cada palavra em Mai\u00fascula *\/\n.nome-proprio {\n  text-transform: capitalize;\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
B. Decora\u00e7\u00e3o de Texto (Shorthand)<\/h3>\n\n\n\n
A propriedade text-decoration<\/code><\/strong> \u00e9 um shorthand<\/em> moderno para definir a linha, a cor e o estilo da decora\u00e7\u00e3o de uma s\u00f3 vez.<\/p>\n\n\n\n
Propriedade<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td>Valores Comuns<\/strong><\/td><\/tr><\/thead>
text-decoration-line<\/code><\/td>Tipo de linha.<\/td>underline<\/code>, line-through<\/code>, none<\/code>, overline<\/code><\/td><\/tr>
text-decoration-color<\/code><\/td>Cor da linha.<\/td>red<\/code>, #333<\/code>, var(--cor)<\/code><\/td><\/tr>
text-decoration-style<\/code><\/td>Estilo da linha.<\/td>solid<\/code>, double<\/code>, dotted<\/code>, wavy<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
Exemplo Shorthand:<\/strong><\/p>\n\n\n\n
CSS<\/p>\n\n\n\n
a {\n  \/* Linha: sublinhada | Cor: vermelho | Estilo: ondulado *\/\n  text-decoration: underline red wavy; \n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
4. Controle de Quebras e Espa\u00e7os em Branco<\/h2>\n\n\n\n
Essas propriedades s\u00e3o cruciais para lidar com conte\u00fado gerado, nomes longos ou c\u00f3digo pr\u00e9-formatado.<\/p>\n\n\n\n