Tutorial Iniciante de CSS: Texto

Você pode alterar o tamanho e a forma do texto numa página usando uma série de atributos, mostrados abaixo.

font-family

É o nome da fonte, como Times New Roman, Arial ou Verdana.

A fonte que você especifica precisa estar instalada no computador do usuário, então não tem muita utilidade usar fontes incomuns. É melhor usar algumas das fontes ditas “seguras” (que estão na grande maioria dos computadores). Dessas, as mais usadas são Arial, Verdana e Times New Roman. Você pode especificar mais de uma fonte, separadas por vírgulas. Fazendo isso, se o usuário não tiver a primeira fonte que você especificou, o navegador vai procurar pela lista até que encontre uma que ele tenha. Isso é muito útil, porque diferentes computadores geralmente tem diferentes fontes instaladas.

font-family: arial, helvetica;

Este exemplo é usado para que fontes parecidas sejam usadas em PCs (que geralmente tem Arial, mas não Helvetica) e Macs (que geralmente não tem Arial mas tem Helvetica, que será usada). Lembre que, numa lista de fontes, a primeira que o usuário tiver vai ser usada.

Nota: Se o nome de uma fonte tem mais de uma palavra, ele deve ser colocado entre aspas (“”), como em:

font-family: "Times New Roman"

font-size

O tamanho da fonte. Tome cuidado com isso – textos como cabeçalhos não devem ser parágrafos com fontes grandes; você ainda deve usar cabeçalhos (h1, h2, etc.) mesmo que, na prática, você possa fazer o tamanho da fonte de um parágrafo maior que o de um cabeçalho (embora você não deva).

font-weight

Define se um texto está em negrito ou não. Na prática, você vai usar font-weight: bold

ou

font-weight: normal

Na teoria, esse valor também pode ser bolder (mais escuro), lighter (mais claro), 100, 200, 300, 400 (equivale a normal), 500, 600, 700 (equivale a bold), 800 ou 900, mas como muitos navegadores balançam a cadeça e dizem “Acho que não é bem assim…”, é mais seguro ficar com bold e normal.

font-style

Define se o texto está em itálico ou não. Pode ser

font-style: italic

ou

font-style: normal

text-decoration

Define se o texto tem ou não uma linha o “enfeitando”.

text-decoration: overline Coloca uma linha acima do texto.

text-decoration: line-through Põe uma linha no meio do texto.

text-decoration: underline Só deve ser usado em links, porque os usuários geralmente esperam que texto sublinhado seja link.

Essa propriedade é geralmente usada pra decorar links, como retirar o sublinhado com

text-decoration: none

text-transform

Muda a caixa do texto (maiúscula ou minúscula).

text-transform: capitalize

Faz com que a Primeira Letra De Cada Palavra fique maiúscula.

text-transform: uppercase

Faz com que todo o texto fique MAIÚSCULO.

text-transform: lowercase

Faz com que todo o texto fique minúsculo.

text-transform: none

Esse eu vou deixar pra você adivinhar.

Cole isso no seu “web.css” e veja o resultado no navegador. Brinque um pouco com os valores. Experimente.

body {
	font-family: arial, helvetica, sans-serif;
	font-size: 0.8em;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.5em;
}

a {
	text-decoration: none;
}

strong {
	font-style: italic;
	text-transform: uppercase;
}

font-variant

A propriedade font-variant é usada para escolher as variantes normal ou small-caps. Uma fonte small-caps é aquela que usa letras maiúsculas de tamanhos reduzidos. Confundiu? Dê uma olhada nos exemplos a seguir:

Se a propriedade font-variant for definida para small-caps e não estiver disponível na máquina do usuário, será usada fonte em maiúscula.

Espaçando texto

As propriedades letter-spacing e word-spacing servem para definir o espaço entre letras e palavras, respectivamente. O valor pode ser um tamanho ou normal.

A propriedade line-height define a altura das linhas em um elemento, como um parágrafo, sem ajustar o tamanho da fonte. Pode ser um número (que especifica um múltiplo do tamanho da fonte, ou seja, ‘2′ vai ser duas vezes o tamanho da fonte), um tamanho, uma porcentagem ou normal.

A propriedade text-align vai alinhar o texto dentro do elemento para a esquerda (valor left), direita (right), centro (center) ou deixar o texto justificado (justify).

A propriedade text-indent vai identar a primeira linha de um parágrafo por um tamanho ou uma porcentagem dada. Esse estilo é tradicionalmente usado em impressão, mas raramente em mídia digital, como a web.

p {
	letter-spacing: 0.5em;
	word-spacing: 2em;
	line-height: 1.5;
	text-align: center;
}

 

Para se aprofundar no tema, leia esses dois artigos no site do Maujor: Estilizando texto parte 1 e parte 2.

Leia também o texto do Ramon Page sobre melhorar a legibilidade com espaços em branco. Afinal, além de saber as regras CSS você precisa saber o que fazer com elas.

Páginas Relacionadas

• Próxima Página: Margens e Espaçamentos (Padding)
• Página Anterior: Cores

Exemplos

• Tamanho não importa – mudando o tamanho padrão com font-size.
• Mudando a caixa da fonte – usando text-transform e text-variant.
• Espaçando texto – Usando text-align, text-indent, word-spacing e letter-spacing.

Referência

• font-family
• font-size
• font-weight
• font-style
• text-decoration
• text-transform
• letter-spacing
• word-spacing
• line-height
• text-align
• text-indent

BlogBlogs Tags: +web, minicurso, tutorial, css, iniciante

Esse material é uma adaptação do CSS Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.