Tutorial Iniciante de CSS: Texto

6 03 2008

Exemplo de texto espaçado com CSS

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"

diversas fontes css

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

Usos da propriedade text-decoration

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:

4 exemplos de fontes small-caps

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.

Uso do text-indent

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

Exemplos

Referência

BlogBlogs Tags: , , , ,

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

Anúncios

Ações

Information

6 responses

20 07 2008
Tutorial Avançado de CSS: Regras @ « Codando

[…] Texto – Uma companhia útil se você está usando a regra @font-face. […]

15 07 2009
Paulo

Olá. Comecei a acompanhar este tutorial. Muito bem redigido, fácil de entender. Era o que eu precisava. Parabéns.

29 04 2010
Quem é o Pêra?

Olá,

Faltou o ponto e vírgula no final da propriedade font-weight.
Estou fazendo os tutoriais e adorando!
PARABÉNS bem fácil de entender!

7 01 2011
Antonio Sergio

Gostei muito e estou apredendendo fácil. Uso o wordpress.com que não permite mudanças a não ser pagas, então enquanto não aprendo tudo estou fazendo um arquivo com os exercícios. Gostaira da opinião de outros sobre meu trabalho.

11 12 2012
Mauricio

Parabens pelo blog, muito legal! Eu vi uma vez, mas nao consigo me lembrar como faz, sabe me dizer como faz para fazer o texto depois de atingir o maximo da largura do input, fazer com que ele fique com os tres pontihos? vlw

25 12 2012
Thiago

Fantástico, explica bem, claramente, objetivo, dá exemplos, cria situações na nossa mente, show de bola, esse blog deveria estar em algum outro site grande como UTILIDADES. Parabéns!!!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: