Tipografia e Fontes no CSS

Introdução à Tipografia

Tipografia é a arte de criar e organizar fontes para tornar o texto mais legível e atraente. A escolha da fonte certa é essencial para a comunicação visual. Existem diversos tipos de fontes, cada uma com características próprias. A escolha da fonte certa depende do contexto e do público-alvo.

Para entender melhor a tipografia, é importante conhecer a anatomia do tipo. A seguir, veremos os principais elementos de uma fonte:

  • Altura-x: A altura das letras minúsculas, excluindo ascendentes e descendentes.
  • Ascendente: Parte da letra que se estende acima da altura-x, como em "b" e "d".
  • Descendente: Parte da letra que se estende abaixo da linha de base, como em "p" e "q".
  • Serifa: Pequenas linhas ou traços anexados ao final das hastes das letras. São com pezinhos, veja essa letra: A
  • Haste: Traço principal vertical ou diagonal de uma letra.
  • Contraste: Diferença entre as partes mais grossas e mais finas de uma letra.
  • Espaçamento: Espaço entre as letras e entre as linhas de texto.

Fontes Serifadas

As fontes serifadas são clássicas e possuem pequenos prolongamentos que ajudam a guiar nossos olhos, tornando a leitura mais fluida. Elas são ideais para títulos. Exemplos de fontes serifadas:

  • Times New Roman
    • font-family: 'Times New Roman', serif;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Georgia
    • font-family: Georgia, serif;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Garamond
    • font-family: Garamond, serif;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Palatino
    • font-family: Palatino, serif;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Baskerville
    • font-family: Baskerville, serif;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

OBS: Serifa são pequenas retas que ornamentam as hastes de alguns tipos de letras.

Fontes Sans-Serif

Também conhecidas como fontes não serifadas, são ideais para exibição em telas, pois transmitem clareza e organização. Exemplos de fontes sans-serif:

  • Arial
    • font-family: Arial, sans-serif;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Verdana
    • font-family: Verdana, sans-serif;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Helvetica
    • font-family: Helvetica, sans-serif;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Calibri
    • font-family: Calibri, sans-serif;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Open Sans
    • font-family: 'Open Sans', sans-serif;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

Fontes Monoespaçadas

Fontes monoespaçadas possuem a mesma largura para todas as letras, sendo muito usadas para leitura de códigos de programação.

  • Courier New
    • font-family: 'Courier New', monospace;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Lucida Console
    • font-family: 'Lucida Console', monospace;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Consolas
    • font-family: Consolas, monospace;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Monaco
    • font-family: Monaco, monospace;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Andale Mono
    • font-family: 'Andale Mono', monospace;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

Fontes Script

Fontes script imitam a escrita humana. Devem ser usadas com moderação, pois podem causar cansaço visual em textos longos.

  • Brush Script
    • font-family: 'Brush Script MT', cursive;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Lucida Handwriting
    • font-family: 'Lucida Handwriting', cursive;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Comic Sans MS
    • font-family: 'Comic Sans MS', cursive;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Freestyle Script
    • font-family: 'Freestyle Script', cursive;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Edwardian Script
    • font-family: 'Edwardian Script ITC', cursive;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

Fontes Display

Fontes display são decorativas e fogem das classificações tradicionais. São usadas para criar efeitos visuais e podem representar desenhos, objetos, etc.

  • Impact
    • font-family: Impact, sans-serif;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Chiller
    • font-family: Chiller, sans-serif;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Stencil
    • font-family: Stencil, sans-serif;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Rockwell
    • font-family: Rockwell, sans-serif;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Algerian
    • font-family: Algerian, sans-serif;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

Combinações Seguras de Fontes

Para garantir legibilidade e harmonia visual, é importante combinar fontes de forma segura. A regra básica é usar uma fonte serifada com uma sans-serif. Exemplos:

  • Serifada + Sans-serif:

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Sans-serif + Monoespaçada:

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

  • Script + Display:

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

Exemplo:

style="font-family: Arial, Helvetica, sans-serif;"

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, dignissimos eligendi mollitia ab perspiciatis quam velit pariatur deleniti quisquam, nesciunt iste voluptatem labore soluta beatae aperiam numquam? Maiores, pariatur! Porro?

Unidades de Medida no CSS3

Neste artigo, exploraremos os diferentes tamanhos de fontes e medidas utilizadas na tipografia. Entenderemos as diferenças entre medidas absolutas e relativas, bem como a importância do viewport na responsividade. Vamos também aprender sobre os estilos de fontes e como aplicá-los de maneira eficaz em nossos projetos.

Medidas Absolutas no CSS

Medidas absolutas são fixas e não se alteram conforme o dispositivo do usuário. Exemplos:

  • cm: Centímetros
  • mm: Milímetros
  • px: Pixels (padrão de 16px)
  • pt: Pontos (usado em impressoras)
  • pc: Picas (1 pica = 12 pontos)
  • in: Polegadas

Medidas Relativas no CSS

Medidas relativas são proporcionais ao tamanho da fonte padrão. São preferíveis para garantir a responsividade do site. Exemplos:

  • em: Medida relativa ao tamanho da fonte padrão (1em = 16px)
  • rem: Medida relativa ao tamanho da fonte raiz
  • %: Porcentagem relativa ao elemento pai
  • vw: Unidade relativa à largura da viewport (1vw = 1% da largura da viewport)
  • vh: Unidade relativa à altura da viewport (1vh = 1% da altura da viewport)
  • vmin: Unidade relativa ao menor valor entre a largura e a altura da viewport
  • vmax: Unidade relativa ao maior valor entre a largura e a altura da viewport
  • ch: Unidade relativa à largura do caractere "0" da fonte usada
  • ex: Unidade relativa à altura da letra "x" da fonte usada
  • lh: Unidade relativa à altura da linha

Medidas Mais Usadas para Fontes

Medidas Relativas

As medidas relativas são preferíveis para garantir a responsividade do site. Exemplos:

  • em: Medida relativa ao tamanho da fonte padrão (1em = 16px)

    • p { font-size: 1.5em; }

  • rem: Medida relativa ao tamanho da fonte raiz

    • h1 { font-size: 2rem; }

Medidas Absolutas

As medidas absolutas são fixas e não se alteram conforme o dispositivo do usuário. Exemplos:

  • px: Pixels (padrão de 16px)

    • p { font-size: 16px; }

  • pt: Pontos (usado em impressoras e pelo Microsoft Office)

    • h1 { font-size: 24pt; }

Line Height (altura da linha)

A propriedade line-height no CSS é usada para definir a altura da linha de texto. Ela controla o espaço vertical entre as linhas de texto em um parágrafo, melhorando a legibilidade e a estética do texto. Por padrão, o valor de line-height é normal, o que geralmente equivale a aproximadamente 1.2 vezes o tamanho da fonte.

Exemplo de uso:


p {
    line-height: 1.5;
}

O valor pode ser numérico, percentual, ou em unidades de medida como em, px, etc. Exemplos:

  • Numérico: line-height: 1.5; (1.5 vezes o tamanho da fonte do elemento)
  • Percentual: line-height: 150%; (150% do tamanho da fonte do elemento)
  • Unidade de medida: line-height: 24px; (24 pixels de altura para cada linha)

Usar line-height de forma adequada pode melhorar significativamente a legibilidade do texto, especialmente em blocos de texto longos.

Compatibilidade de Fontes em Navegadores

Nem todas as fontes são suportadas por todos os navegadores, o que pode causar problemas de exibição. Para contornar isso, use a propriedade font-family com uma lista de fontes alternativas. Se a primeira fonte não estiver disponível, o navegador usará a próxima da lista.

Exemplo de Código

font-family: Arial, Helvetica, sans-serif;

Google Fonts

Fontes Online

Vídeo recomendado: Usando Google Fonts

Podemos usar fontes web como Google Fonts, amplamente suportadas pelos navegadores modernos. Isso permite usar fontes externas sem a necessidade de baixar e instalar no computador do visitante. Para isso, utilize o serviço gratuito Google Fonts, disponível em Google Fonts. Outra solução é incluir diferentes formatos de fontes (e.g., TTF, OTF, WOFF) para garantir a compatibilidade.

Exemplo de Código

Veja abaixo um exemplo de uso de uma fonte on-line:


<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<style>
body {
    font-family: 'Roboto', Arial,Helvetica, sans-serif;
}
</style>

Neste exemplo, se a fonte 'Roboto' não estiver disponível, o navegador usará Arial. Se Arial também não estiver disponível, usará Helvetica, e assim por diante até encontrar uma fonte disponível. O valor 'sans-serif' no final da lista garante que, se nenhuma das fontes especificadas estiver disponível, o navegador usará uma fonte genérica sem serifa.

Usando Fontes Baixadas

Vídeo recomendado:Usando Fontes Externas Baixadas

Também temos a opção de baixar as fontes desejadas. Isso é bom para acelerar a abertura da página sem o texto piscar ao buscar a fonte em outro servidor. Devemos declarar a fonte no arquivo CSS da seguinte forma:

@font-face {
    font-family: 'star';
    src: url('../../fonts/twinkle-star/twinklestar-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Os atributos font-weight: normal; e font-style: normal; são apenas para evitar erros.

Tipos de formatos:

  • opentype (otf)
  • truetype (ttf)
  • embedded-opentype
  • truetype-aat (Apple Advanced Typography)
  • svg

É possível adicionar mais de um formato da mesma fonte para compatibilidade com mais navegadores:

@font-face {
    font-family: 'star';
    src: url('../../fonts/twinkle-star/twinklestar-Regular.ttf') format('truetype'),
        url('../../fonts/twinkle-star/twinklestar-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

OBS: Esse site sofre atualizações frequentes. Basicamente, você deve ir ao site, encontrar a fonte desejada, selecioná-la e pegar o código @import para incluir no seu arquivo CSS.

Estilos de Fontes no CSS

Os estilos de fontes são propriedades que permitem modificar a aparência do texto em um documento HTML. Eles são essenciais para criar uma tipografia atraente e legível. Vamos explorar os principais estilos de fontes e como aplicá-los usando CSS.

Font Style (Estilo da Fonte)

A propriedade font-style é usada para definir o estilo da fonte. Os valores mais comuns são:

  • normal: O texto é exibido normalmente.
    • font-style: normal;

    Este é um exemplo de texto normal.

  • italic: O texto é exibido em itálico.
    • font-style: italic;

    Este é um exemplo de texto em itálico.

  • oblique: O texto é exibido em oblíquo, semelhante ao itálico, mas com uma inclinação diferente.
    • font-style: oblique;

    Este é um exemplo de texto em oblíquo.

Font Weight (Peso da Fonte)

A propriedade font-weight define a espessura das letras. Os valores podem ser numéricos (100 a 900) ou palavras-chave:

  • normal: Peso normal (equivalente a 400).
  • bold: Peso negrito (equivalente a 700).
  • bolder: Mais negrito que o elemento pai.
  • lighter: Mais leve que o elemento pai.

Exemplo de uso:


    p.normal {
    font-weight: normal;
    }
    p.bold {
    font-weight: bold;
    }
    p.bolder {
    font-weight: bolder;
    }
    p.lighter {
    font-weight: lighter;
    }

Variação de Fontes

A propriedade font-variant no CSS permite controlar a aparência de fontes, especialmente em relação a letras maiúsculas e minúsculas. É uma ferramenta útil para estilizar textos de forma mais sofisticada e legível.

Opções de font-variant

Transformação de Texto

Shorthand de Fontes

Shorthand é uma forma mais prática de definir os estilos completos de uma fonte em uma linha. Exemplo:

p {
    font-family: Arial, Helvetica, Tahoma, sans-serif;
    font-size: large;
    font-style: italic;
    font-weight: bold;
}

Podemos escrever tudo na mesma linha:

font: italic bold 1em Arial, Helvetica, Tahoma, sans-serif;

A Para a propriedade font, devemos informar na seguinte ordem:

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size/line-height
  5. font-family

Alinhamento de Texto

Existem quatro tipos de alinhamento de textos:

Exemplo interativo

text-align:

text-transform:

font-variant:

font-family:

font-size:

Lorem ipsum dolor sit amet, consectetur.

OBS.:Repare que nem todas a fontes terão compatibilidade com seu navegador.

Adicionando Sombras ao Texto

A propriedade text-shadow no CSS é usada para adicionar sombras ao texto, criando um efeito visual interessante. A sintaxe básica é:


            text-shadow: offset-x offset-y blur-radius color;

Onde:

Exemplos de Uso

Veja alguns exemplos de como aplicar a propriedade text-shadow:

Usar a propriedade text-shadow é uma forma criativa de DESTRUIR a estética do seu site e destacar elementos importantes. Brincadeiras a parte, use com moderação.

Detectando Fontes em Textos e Imagens

Identificar fontes usadas em textos e imagens pode ser uma tarefa desafiadora, mas existem ferramentas que facilitam esse processo. A seguir, apresentamos duas soluções eficazes para detectar fontes em textos e imagens.

Detectando Fontes em Textos

Para detectar fontes em textos, recomendamos o uso de uma extensão do Google Chrome chamada Fonts Ninja. Esta extensão permite identificar rapidamente as fontes usadas em qualquer página web.

Detectando Fontes em Imagens

Para detectar fontes em imagens, você pode utilizar os seguintes sites especializados:

Materiais de apoio

14 - Fontes.pdf