Fontes CSS

Escolher a fonte certa para o seu site é importante!

A seleção da fonte é importante.

Escolher a fonte certa tem um enorme impacto em como os leitores experimentam um site.

A fonte certa pode criar uma identidade forte para sua marca.

Usar uma fonte que seja fácil de ler é importante. A fonte agrega valor ao seu texto. Também é importante escolher a cor e o tamanho do texto corretos para a fonte.

Famílias de fontes genéricas

Em CSS existem cinco famílias de fontes genéricas:

• As fontes com serifa têm um pequeno traço nas bordas de cada letra. Eles criam uma sensação de formalidade e elegância.
• As fontes sem serifa têm linhas limpas (sem pequenos traços anexados). Eles criam um visual moderno e minimalista.
• Fontes monoespaçadas - aqui todas as letras têm a mesma largura fixa. Eles criam uma aparência mecânica.
• As fontes cursivas imitam a caligrafia humana.
• Fontes de fantasia são fontes decorativas/lúdicas.

Todos os nomes de fontes diferentes pertencem a uma das famílias de fontes genéricas.

Diferença entre fontes com serifa e sem serifa:

Observação: em telas de computador, fontes sem serifa são consideradas mais fáceis de ler do que fontes com serifa.

Exemplo de fontes:

A propriedade da família de fontes (font-family)

Em CSS, usamos a font-family propriedade para especificar a fonte de um texto.

Nota: Se o nome da fonte for mais de uma palavra, deve estar entre aspas, como: "Times New Roman".

Dica: A font-family propriedade deve conter vários nomes de fontes como um sistema "fallback (substituto / reserva)", para garantir a máxima compatibilidade entre navegadores/sistemas operacionais. Comece com a fonte desejada e termine com uma família genérica (para permitir que o navegador escolha uma fonte semelhante na família genérica, se não houver outras fontes disponíveis). Os nomes das fontes devem ser separados por vírgula.

                            
.p1 {
    font-family: "Times New Roman", Times, serif;
}
    
.p2 {
    font-family: Arial, Helvetica, sans-serif;
}

.p3 {
    font-family: "Lucida Console", "Courier New", monospace;
}

O que são fontes seguras da Web?

As fontes seguras da Web são fontes instaladas universalmente em todos os navegadores e dispositivos.

Fontes substitutas (fallbacks)

No entanto, não existem fontes 100% totalmente seguras para a web. Há sempre uma chance de que uma fonte não seja encontrada ou não esteja instalada corretamente.

Portanto, é muito importante sempre usar fontes de fallback.

Isso significa que você deve adicionar uma lista de "fontes de backup" semelhantes na font-family propriedade. Se a primeira fonte não funcionar, o navegador tentará a próxima, e a próxima e assim por diante. Sempre termine a lista com um nome de família de fonte genérico.

                            
p {
    font-family: Tahoma, Verdana, sans-serif;
}

Melhores fontes seguras da Web para HTML e CSS

A lista a seguir são as melhores fontes seguras da Web para HTML e CSS:

• Arial (sem serifa)
• Verdana (sem serifa)
• Helvetica (sem serifa)
• Tahoma (sem serifa)
• Trebuchet MS (sem serifa)
• Times New Roman (serifa)
• Georgia (serif)
• Garamond (serifa)
• Courier New (monoespaço)
• Brush Script MT (cursiva)

Observação: antes de publicar seu site, sempre verifique como suas fontes aparecem em diferentes navegadores e dispositivos e sempre use fontes alternativas!

Arial (sem serifa)

Arial é a fonte mais usada para mídia online e impressa. Arial também é a fonte padrão no Google Docs.

Arial é uma das fontes da Web mais seguras e está disponível em todos os principais sistemas operacionais.

Verdana (sem serifa)

Verdana é uma fonte muito popular. Verdana é facilmente legível mesmo para tamanhos de fonte pequenos.

Helvetica (sem serifa)

A fonte Helvetica é amada pelos designers. É adequado para muitos tipos de negócios.

Tahoma (sem serifa)

A fonte Tahoma tem menos espaço entre os caracteres.

Trebuchet MS (sem serifa)

Trebuchet MS foi projetado pela Microsoft em 1996. Use essa fonte com cuidado. Não suportado por todos os sistemas operacionais móveis.

Times New Roman (serifa)

Times New Roman é uma das fontes mais conhecidas do mundo. Parece profissional e é usado em muitos jornais e sites de "notícias". É também a fonte principal para dispositivos e aplicativos Windows.

Georgia (serifa)

Georgia é uma fonte com serifa elegante. É muito legível em diferentes tamanhos de fonte, por isso é um bom candidato para design responsivo a dispositivos móveis.

Garamond (serifa)

Garamond é uma fonte clássica usada em muitos livros impressos. Tem uma aparência atemporal e boa legibilidade.

Courier New (monoespaço)

Courier New é a fonte serif monoespaçada mais usada. Courier New é frequentemente usado com exibições de codificação, e muitos provedores de e-mail o usam como fonte padrão. Courier New também é a fonte padrão para roteiros de filmes.

Brush Script MT (cursiva)

A fonte Brush Script MT foi projetada para imitar a caligrafia. É elegante e sofisticado, mas pode ser difícil de ler. Use-o com cuidado.

Fallbacks de fonte CSS comumente usados

Abaixo estão alguns fallbacks de fontes comumente usados, organizados pelas 5 famílias de fontes genéricas:

• Serif (Serifa)
• Sans-serif (Sem serifa)
• Monospace (Monoespaço)
• Cursive (Cursiva)
• Fantasy (Fantasia)

Estilo de fonte

A font-style propriedade é usada principalmente para especificar texto em itálico.

Esta propriedade tem três valores:

• normal (normal) - O texto é mostrado normalmente.
• italic (itálico) - O texto é mostrado em itálico.
• oblique (oblíquo) - O texto está "inclinado" (o oblíquo é muito semelhante ao itálico, mas menos suportado).

                            
p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

Espessura da fonte

A font-weight propriedade especifica o peso de uma fonte:

                            
p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

Variante de fonte

A font-variant propriedade especifica se um texto deve ou não ser exibido em uma fonte em versalete.

Em uma fonte de letras minúsculas, todas as letras minúsculas são convertidas em letras maiúsculas. No entanto, as letras maiúsculas convertidas aparecem em um tamanho de fonte menor do que as letras maiúsculas originais no texto.

                            
p.normal {
    font-variant: normal;
}

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

Tamanho da fonte

A font-size propriedade define o tamanho do texto.

Ser capaz de gerenciar o tamanho do texto é importante no design da web. No entanto, você não deve usar ajustes de tamanho de fonte para fazer com que os parágrafos pareçam títulos ou os títulos pareçam parágrafos.

Sempre use as tags HTML apropriadas, como <h1> - <h6> para títulos e <p> para parágrafos.

O valor do tamanho da fonte pode ser um tamanho absoluto ou relativo.

Tamanho absoluto:

• Define o texto para um tamanho especificado.
• Não permite que um usuário altere o tamanho do texto em todos os navegadores (ruim por motivos de acessibilidade).
• O tamanho absoluto é útil quando o tamanho físico da saída é conhecido.

Tamanho relativo:

• Define o tamanho em relação aos elementos circundantes.
• Permite que um usuário altere o tamanho do texto nos navegadores.

Nota: Se você não especificar um tamanho de fonte, o tamanho padrão para texto normal, como parágrafos, é 16px (16px = 1em).

Definir o tamanho da fonte com pixels

                            
h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

Dica: Se você usar pixels, ainda poderá usar a ferramenta de zoom para redimensionar a página inteira.

Definir tamanho da fonte com Em

Para permitir que os usuários redimensionem o texto (no menu do navegador), muitos desenvolvedores usam em vez de pixels.

1em é igual ao tamanho da fonte atual. O tamanho de texto padrão nos navegadores é 16px. Portanto, o tamanho padrão de 1em é 16px.

O tamanho pode ser calculado de pixels para em usando esta fórmula: pixels / 16 = em

                            
h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

No exemplo acima, o tamanho do texto em em é o mesmo do exemplo anterior em pixels. No entanto, com o tamanho em, é possível ajustar o tamanho do texto em todos os navegadores.

Infelizmente, ainda há um problema com versões mais antigas do Internet Explorer. O texto fica maior do que deveria quando fica maior e menor do que deveria quando fica menor.

Use uma combinação de porcentagem e Em

A solução que funciona em todos os navegadores é definir um tamanho de fonte padrão em porcentagem para o elemento.

                            
body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

Nosso código agora funciona muito bem! Ele mostra o mesmo tamanho de texto em todos os navegadores e permite que todos os navegadores ampliem ou redimensionem o texto!

Tamanho da fonte responsiva

O tamanho do texto pode ser definido com uma vwunidade, o que significa a "largura da janela de visualização".

Dessa forma, o tamanho do texto seguirá o tamanho da janela do navegador:

                            
<h1 style="font-size:10vw">Hello World</h1>

Viewport é o tamanho da janela do navegador. 1vw = 1% da largura da janela de visualização. Se a janela de visualização tiver 50 cm de largura, 1vw é 0,5 cm.

Propriedade da fonte

Para encurtar o código, também é possível especificar todas as propriedades de fonte individuais em uma propriedade.

A propriedade font é uma propriedade abreviada para:

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

Nota: Os valores font-size e font-family são obrigatórios. Se um dos outros valores estiver ausente, seu valor padrão será usado.

                            
p.a {
    font: 20px Arial, sans-serif;
}

p.b {
    font: italic small-caps bold 12px/30px Georgia, serif;
}

Todas as propriedades da fonte