Guia Completo de Texto e Fontes em CSS

em

No desenvolvimento web, o estilo do texto é um dos elementos mais importantes para criar uma experiência visual atraente e funcional. Com CSS, é possível personalizar textos e fontes de diversas maneiras. Neste artigo, exploraremos as propriedades mais comuns de texto e fontes em CSS, acompanhadas de exemplos práticos.

Estilizando Textos com CSS

  1. Cor do Texto (color)
    Define a cor do texto.

    p {
        color: #333;
    }

  2. Alinhamento do Texto (text-align)
    Controla como o texto é alinhado dentro de seu contêiner.

    h1 {
        text-align: center;
    }

  3. Decoração do Texto (text-decoration)
    Altera a decoração, como sublinhado, linha sobre o texto ou nenhum.

    a {
        text-decoration: none;
    }

  4. Espaçamento entre Letras (letter-spacing)
    Controla a distância entre os caracteres.

    h2 {
        letter-spacing: 2px;
    }

  5. Espaçamento entre Linhas (line-height)
    Ajusta o espaçamento entre as linhas de texto.

    p {
        line-height: 1.6;
    }

  6. Transformação de Texto (text-transform)
    Controla a capitalização do texto.

    .uppercase {
        text-transform: uppercase;
    }

  7. Recuo de Texto (text-indent)
    Define o recuo da primeira linha de um parágrafo.

    p {
        text-indent: 20px;
    }

Estilizando Fontes com CSS

  1. Família de Fontes (font-family)
    Define a fonte do texto. Recomendamos incluir fontes alternativas como backup.

    body {
        font-family: 'Arial', 'Helvetica', sans-serif;
    }

  2. Tamanho da Fonte (font-size)
    Controla o tamanho do texto.

    h1 {
        font-size: 2em; /* 2 vezes o tamanho da fonte base */
    }

  3. Peso da Fonte (font-weight)
    Define a espessura do texto.

    strong {
        font-weight: bold;
    }

  4. Estilo da Fonte (font-style)
    Aplica itálico ou outro estilo.

    em {
        font-style: italic;
    }

  5. Variações do Tamanho da Fonte (font-variant)
    Define variações como "small-caps".

    .small-caps {
        font-variant: small-caps;
    }

Combinação de Propriedades de Fonte com font

A propriedade font permite combinar várias configurações em uma única declaração.

Exemplo:

p {
    font: italic small-caps bold 16px/1.5 'Georgia', serif;
}

Explicação:

  • italic: Estilo da fonte.

  • small-caps: Variante da fonte.

  • bold: Peso da fonte.

  • 16px: Tamanho da fonte.

  • 1.5: Altura da linha.

  • 'Georgia', serif: Família da fonte.

Trabalhando com Fontes Personalizadas

Fontes personalizadas podem ser adicionadas ao seu site usando o @font-face ou importando via Google Fonts.

Exemplo com Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
body {
    font-family: 'Roboto', sans-serif;
}

Conclusão

Dominar as propriedades de texto e fonte em CSS é essencial para criar interfaces visualmente agradáveis e acessíveis. Experimente combinar as propriedades para obter o estilo desejado e leve a experiência do usuário para o próximo nível. Se precisar de mais dicas, deixe um comentário!

Comentários

Postar um comentário