Estilizando fontes com CSS

Angelo Ferreira Gomes
5 de jul. de 2017
6 min de leitura

Primeiros passos para estiliza um texto

Devemos lembrar que textos são constituídos por palavras e palavras são formadas por letras ou fontes.

Neste capítulo demonstraremos como estilizar uma fonte, a partir do uso de atributos no CSS.

Para facilitá-lo na implementação do nosso exemplo, siga os passos abaixo:

1º Passo: Crie um arquivo CSS Vinculado na mesma pasta do seu projeto e salve com o nome "estilo-fonte.css";

2º Passo: Vincule o arquivo CSS através da tag <link>, codificada dentro da <head>, conforme exemplo abaixo:

<head>

</head>

3º Passo: Insira um texto na sua página HTML, utilizando os elementos <div> e <p> :

Exemplo:

<div>

<p> Este texto foi estilizado com atributos CSS.</p>

</div>

4º Passo: Agora, vamos listar as propriedades básicas para estilizar uma fonte com CSS e implementar o código exemplo:

color: cor da fonte.
código hexadecimal: #ffc6d9
código rgb: rgb(255,235,0)
código rgba: rgb(255,235,0, 0.7)
código hsl: hsl(210,100%,40%)
código hsla: hsla(155,80%,35%,0.4)
palavra-chave: red, blue, green...etc
transparente: transparent;

font-family: família (tipo) de fontes.
nome da família de fonte: define-se pelo nome da fonte. Exemplos: "verdana", "helvetica", "arial", etc.
nome da família genérica: define-se pelo nome genérico da fonte. Exemplos: "serif", "sans-serif", "cursive", etc;

font-size: tamanho da fonte.
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
medida CSS de comprimento. Exemplos: px, em, rem, % (porcentagem) ...

font-style: estilo da fonte.
normal: fonte normal (em pé)
italic: fonte inclinada
oblique: fonte obliqua;

font-variant: fontes maiúsculas de menor altura;
normal: fonte normal
small-caps: transforma em maiúsculas de menor altura;

font-weight: peso da fonte.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

font-stretch: grau de expansão/contração dos glifos;
normal
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded

font: maneira abreviada para declarar todas as propriedades anteriores (exceto cor).

Exemplo:

{

color: #00f;

font-family: arial, helvetica, sans-serif;

font-size: 16px;

font-style: normal;

font-variant: normal;

font-weight: bold;

font-stretch: condensed;

}

Estilizando textos com CSS

Atributos CSS específicos para texto.

Agora que já sabemos estilizar uma fonte com o CSS, devemos cuidar da formatação do nossos textos.

Em CSS há um grupo de atributos específicos para estilizar um texto e vamos vê-los a seguir:

Seguindo a metodologia dos capítulos anteriores, siga os passos abaixo:

1º Passo: Crie um arquivo CSS Vinculado na mesma pasta do seu projeto e salve com o nome "estilo-texto.css";

2º Passo: Vincule o arquivo CSS através da tag <link>, codificada dentro da <head>, conforme exemplo abaixo:

<head>

</head>

3º Passo: Insira um texto na sua página HTML, utilizando os elementos <div> e <p> :

Exemplo:

<div>

<p> Este texto foi estilizado com atributos CSS.</p>

</div>

4º Passo: Agora, vamos listar as propriedades básicas para estilizar um texto com CSS e implementar o código exemplo:

text-indent: define um recuo de parágrafo no início da primeira linha do texto.
px - unidade de medida CSS
% - porcentagem
em - valor herdado;

text-align: define o alinhamento horizontal do texto.
left - alinha o texto à esquerda do box. Este é o valor inicial (ou default)
right - alinha o texto à direita do box
center - alinha o texto no centro do box
justify - alinha o texto de modo justificado
inherit - o valor do alinhamento do texto é herdado de um elemento pai;

text-transform: define os efeitos de capitalização (maiúsculas, minúsculas) do texto.
capitalize - causa o efeito de transformar as primeiras letras das palavras do texto em maiúscula
uppercase - causa o efeito de transformar todas as letras das palavras do texto em maiúscula
lowercase - causa o efeito de transformar todas as letras das palavras do texto em minúsculas
none - não causa qualquer efeito de transformação
inherit - a capitalização do texto é herdada de um elemento pai;

text-decoration: define uma linha decorativa para o texto ou fazer com que o texto "pisque".
underline - a linha decorativa é desenhada sob o texto
overline - a linha decorativa é desenhada sobre o texto
line-through - a linha decorativa é desenhada riscando o texto
blink - causa o efeito de texto "piscante". Critérios de acessibilidade fazem com que a maioria dos navegadores não implementem este efeito
none - não desenha uma linha decorativa no texto;

word-spacing: controla o espaçamento entre as palavras do texto.
normal - é o valor padrão da propriedade
px - unidade de medida CSS
% - porcentagem
em - valor herdado;

letter-spacing: controla o espaçamento entre as letras da palavra.
normal - é o valor padrão da propriedade
px - unidade de medida CSS
% - porcentagem
em - valor herdado;

white-space: controla como serão tratados os espaços em branco inseridos na marcação HTML do texto.
normal - qualquer quantidade de espaços em branco na marcação será renderizada como um espaço
pre - as quebras de linhas ocorrerão quando houver quebra de linha na marcação, não havendo overflow (ultrapassagem da marge do definda pelo elemento)
nowrap - o texto extrapola o container (overflow)
pre-wrap - as quebras ocorrerão quando houver quebra de linha na marcação ou para evitar overflow
pre-line - as quebras ocorrerão quando houver quebra de linha na marcação ou para completar uma linha
inherit - Valor herdado de um elemento pai;

word-break: controla a possibilidade de quebra de linha dentro de uma palavra.
normal - a quebra de linha segue o comportamento normal
break-all - a quebra de linha poderá ocorrer dentro de uma palavra, exceto se definido ao contrário pela propriedade line-break
keep-all - a quebra de linha não poderá ocorrer dentro de uma palavra, tal como no valor normal, inclusive quando definido ao contrário pela propriedade line-break;

line-break: controla a possibilidade de quebra de linha dentro de uma palavra.
normal - a quebra de linha segue o comportamento normal
break-all - a quebra de linha poderá ocorrer dentro de uma palavra, exceto se definido ao contrário pela propriedade line-break
keep-all - a quebra de linha não poderá ocorrer dentro de uma palavra, tal como no valor normal, inclusive quando definido ao contrário pela propriedade line-break;

word-wrap: controla a possibilidade de quebra de linha dentro de uma palavra.
normal - a quebra de linha segue o comportamento normal
break-word - a quebra de linha poderá ocorrer dentro de uma palavra.

Exemplo:

{

text-indent: 50px; text-align: justify; text-transform: capitalize; text-decoration: underline; text-overflow: clip; word-spacing: 8px; letter-spacing: 8px; white-space: pre; word-break: keep-all; line-break: keep-all; word-wrap: break-word;

}

Efeito Drop Caps

Criando capitulares no seu texto.

Este efeito foi trazido da tipografia de revistas e jornais, onde a primeira letra do texto recebe um efeito diferenciado, tornando-se maior que as demais letras.

Sua implementação é feita através da combinação de atributos para fontes e textos no CSS.

Exemplo:

No HTML:

<p>

<span class="primeiro-caracter ">A</span> cidade do Rio de Janeiro, é a segunda maior metrópole do Brasil e está localizada no Sudeste do país. A cidade maravilhosa é o destino turístico número um do Brasil.

</p>

No CSS:

.primeiro-caracter

{

color: #903;

float: left;

font-family: Georgia;

font-size: 75px;

line-height: 60px;

padding-top: 4px;

padding-right: 8px;

padding-left: 3px;

}

Estilizando um texto em 3 colunas

Editar um texto em colunas é mais comum do que pensamos. Dependendo do layout desejado a estilização do texto pode ajudar nesta tarefa.

Exemplo:

No HTML:

<p>

A cidade do Rio de Janeiro, é a segunda maior metrópole do Brasil e está localizada no Sudeste do país. A cidade maravilhosa é o destino turístico número um do Brasil.

</p>

No CSS:

{

-webkit-column-count: 3; /* Define o número de colunas. */ column-count: 3; /* Define o número de colunas. */

}

Efeito Resize

Muito útil para ajustar o texto ao tamanho da tela.

Esta estilização em CSS faz com que o texto implementado no HTML se redimensione, acompanhando o tamanho da tela.

Exemplo:

No HTML:

<p>

A cidade do Rio de Janeiro, é a segunda maior metrópole do Brasil e está localizada no Sudeste do país. A cidade maravilhosa é o destino turístico número um do Brasil.

</p>

No CSS:

{

resize: both;

}

Estilos bem interessantes utilizando o atributo text-shadow.

O atributo "text-shadow" habilita efeitos de texto que antes eram difíceis ou impossíveis de conseguir de forma compatível com os padrões sem precisar recorrer a imagens de texto embutidas.

Abaixo, demonstraremos alguns textos, implementados em tags diferentes e estilizados com efeitos criados no CSS.

Exemplo:

No HTML:

<h1 class="shadow1">Efeito Shadow 1 em uma tag H1.</h1> <p class="shadow2">Efeito Shadow 2 em uma tag P</p> <div class="shadow3">Efeito Shadow 3 em um container DIV</div> <span class="shadow4">Efeito Shadow 4 em um container SPAN</span> <br /> <em class="shadow5">Efeito Shadow 5 com CSS</em>