Tipografia no CSS: Uma das características mais importantes do CSS é a capacidade de controlar a tipografia de um site. Neste artigo, vamos explorar em detalhes como a tipografia funciona no CSS.
Propriedades de Tipografia no CSS
text-transform
A propriedade text-transform é usada para especificar a capitalização do texto.
p {
text-transform: uppercase;
}Neste exemplo, o texto dentro dos elementos p será transformado em maiúsculas.
text-decoration
A propriedade text-decoration é usada para adicionar decoração ao texto, como sublinhado, linha através do texto e linha acima do texto.
a {
text-decoration: none;
}Neste exemplo, os links não terão sublinhado.
text-align
A propriedade text-align é usada para alinhar o texto horizontalmente.
p {
text-align: justify;
}Neste exemplo, o texto dentro dos elementos p será justificado.
vertical-align
A propriedade vertical-align é usada para alinhar o texto verticalmente.
img {
vertical-align: middle;
}Neste exemplo, as imagens serão alinhadas verticalmente no meio do elemento pai.
line-height
A propriedade line-height é usada para especificar a altura da linha.
p {
line-height: 1.5;
}Neste exemplo, a altura da linha para o texto dentro dos elementos p será 1.5 vezes o tamanho da fonte.
text-indent
A propriedade text-indent é usada para indentar a primeira linha de um bloco de texto.
p {
text-indent: 50px;
}Neste exemplo, a primeira linha de cada parágrafo será recuada em 50 pixels.
text-align-last
A propriedade text-align-last é usada para especificar como alinhar a última linha de um bloco de texto.
p {
text-align: justify;
text-align-last: center;
}Neste exemplo, a última linha de cada parágrafo será centralizada.
word-spacing
A propriedade word-spacing é usada para especificar o espaço entre as palavras.
p {
word-spacing: 10px;
}Neste exemplo, haverá um espaço de 10 pixels entre as palavras em cada parágrafo.
letter-spacing
A propriedade letter-spacing é usada para especificar o espaço entre as letras.
p {
letter-spacing: 2px;
}Neste exemplo, haverá um espaço de 2 pixels entre as letras em cada parágrafo.
text-shadow
A propriedade text-shadow é usada para adicionar sombra ao texto.
h1 {
text-shadow: 2px 2px 4px #000000;
}Neste exemplo, o texto dentro dos elementos h1 terá uma sombra preta.
white-space
A propriedade white-space é usada para controlar o comportamento dos espaços em branco.
pre {
white-space: pre;
}Neste exemplo, o texto dentro dos elementos pre preservará os espaços em branco.
tab-size
A propriedade tab-size é usada para controlar o tamanho das tabulações.
pre {
tab-size: 4;
}Neste exemplo, as tabulações dentro dos elementos pre terão o tamanho de 4 espaços.
writing-mode
A propriedade writing-mode é usada para especificar a direção do texto.
p {
writing-mode: vertical-rl;
}Neste exemplo, o texto dentro dos elementos p será exibido de cima para baixo e da direita para a esquerda.
hyphens
A propriedade hyphens é usada para controlar a hifenização.
p {
hyphens: auto;
}Neste exemplo, o navegador decidirá automaticamente onde hifenizar o texto dentro dos elementos p.
text-orientation
A propriedade text-orientation é usada para especificar a orientação do texto.
p {
writing-mode: vertical-rl;
text-orientation: upright;
}Neste exemplo, o texto dentro dos elementos p será exibido de cima para baixo e cada letra será exibida na posição vertical.
direction
A propriedade direction é usada para especificar a direção do texto.
p {
direction: rtl;
}Neste exemplo, o texto dentro dos elementos p será exibido da direita para a esquerda.
word-break
A propriedade word-break é usada para especificar como quebrar as palavras para melhor ajustar às linhas.
p {
word-break: break-all;
}Neste exemplo, o navegador pode quebrar as palavras em qualquer ponto para evitar o transbordamento.
overflow-wrap
A propriedade overflow-wrap é usada para especificar se o navegador deve quebrar as palavras para evitar o transbordamento.
p {
overflow-wrap: break-word;
}Neste exemplo, o navegador quebrará as palavras em pontos apropriados para evitar o transbordamento.
Conclusão
A tipografia no CSS é uma ferramenta poderosa que permite aos desenvolvedores criar sites visualmente atraentes e acessíveis. Compreender e utilizar as propriedades de tipografia do CSS pode melhorar significativamente a qualidade do seu código e a experiência do usuário.
Não hesite em experimentar diferentes propriedades de tipografia em seus próprios projetos.
E para você validar seus códigos, você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger!!!
