Textos

Nesta seção iremos ver algumas propriedades para usarmos nos nossos textos, veremos como utilizar itálicos, sublinhados, alterar a fonte e muito mais.

Font size

Com a propriedade font-size definimos o tamanho da fonte.

h2 {
  font-size: 22px;
}

Você também pode utilizar valores pré definidos, como:

• xx-small
• x-small
• small
• medium / padrão
• large
• x-large
• xx-large
• smaller (relativo ao elemento pai)
• larger (relativo ao elemento pai)

.target {
  font-size: 16px;
}

Font weight

Esta propriedade define como deve ser a largura da fonte, se ela deve ser mais fina ou mais grossa.

p {
  font-weight: 400;
}

Seus possíveis valores são:

• 100 / thin
• 200 / extra-light
• 300 / light
• 400 / normal
• 500 / medium
• 600 / semi-bold
• 700 / bold
• 800 / extra-bold
• 900 / black

.target {
  font-weight: 400;
}

Font family

Com essa propriedade definimos qual fonte vamos utilizar para nossos textos, você pode definir nomes genéricos como:

• serif
• sans-serif
• monospace
• cursive
• fantasy

Ou fazer o import de alguma fonte através do google fonts;

body {
  font-family: "Nunito Sans", Helvetica, sans-serif;
}

Você pode passar mais de uma família de fonte, caso a primeira de algum problema de carregamento, o browser vai tentar carregar a segunda opção, e assim por diante.

Nesse exemplo, o browser vai tentar usar a fonte Nunito Sans, caso ocorra algum problema de carregamento, ele vai tentar usar a Helvetica, se essa não estiver disponível também, o browser vai carregar qualquer fonte sem serifas (sans-serif).

.target {
  font-family: sans-serif;
}

Font style

Permite aplicar itálico no texto.

span {
  font-style: italic;
}

Seus possíveis valores são:

• normal
• italic
• oblique

.target {
  font-style: normal;
}

Color

Com a propriedade color nós podemos definir a cor dos textos, as cores podem ser nomeadas, em hexadecimal, rgb/a e hsl/a.

h2 {
  color: rgba(0, 0, 0, .6);
}

.target {
  color: #000;
}

Text decoration

A decoração do texto é definida pela propriedade text-decoration

a {
  text-decoration: none;
}

Seu valores são:

• underline
• overline
• line-through
• none

.target {
  text-decoration: none;
}

Text align

Podemos uar o propriedade text-align para alinhar o texto.

a {
  text-align: center;
}

Seu valores são:

• center
• right
• left
• end
• start
• justify

.target {
  text-align: center;
}

Text transform

Com o text-transform podemos definir se queremos nosso texto todo em caixa alta, ou tudo minúsculo ou deixar apenas as primeiras letras como maiúsculas.

h1 {
  text-transform: uppercase;
}

Aceitas os seguintes valores:

• uppercase
• lowercase
• capitalize
• none

.target {
  text-transform: none;
}

Line height

O line-height serve para alterar a altura da linha do texto.

h1 {
  line-height: 20px;
}

.target {
  line-height: 18;
}

Letter spacing

Com essa propriedade é possível modificar o espaçamento entre as letras do texto.

h1 {
  letter-spacing: 3px;
}

.target {
  letter-spacing: 0;
}