Propriedade CSS initial-letter | Drop Caps Explicadas

A propriedade CSS initial-letter cria uma drop cap: ela amplia a primeira letra de um bloco para que ocupe várias linhas de texto e se alinhe perfeitamente ao parágrafo ao redor. Essa é a letra inicial grande que você frequentemente vê em livros, revistas e artigos longos.

Antes dessa propriedade existir, as drop caps eram simuladas com float combinado com font-size ajustado manualmente e margens negativas — valores frágeis que quebravam sempre que a fonte ou a altura da linha mudava. initial-letter faz os cálculos por você: você define a altura da letra em linhas, e o navegador dimensiona e posiciona automaticamente para que a linha de base e a altura da maiúscula se alinhem ao texto do corpo.

Você a aplica ao pseudo-elemento ::first-letter (ou ao primeiro filho inline de um contêiner de bloco), não ao parágrafo inteiro.

Valor Inicial	`normal`
Aplica-se a	Pseudo-elementos `::first-letter` e o primeiro filho de nível inline de um contêiner de bloco.
Herdada	Não
Animável	Não
Versão	CSS3
Sintaxe DOM	`element.style.initialLetter = "2 1";`

Sintaxe

initial-letter: normal | <integer> | <integer> <integer>;

A propriedade aceita a palavra-chave normal ou um a dois inteiros positivos separados por espaço.

Como funciona

O primeiro valor (size) controla quantas linhas de altura a letra terá. 3 significa que o glifo ocupa a mesma altura que três linhas de texto — o navegador ajusta o font-size automaticamente para alcançar isso.
O segundo valor (sink) é opcional e controla quantas linhas a letra desce abaixo da primeira linha de base do texto. Se omitido, o sink assume o mesmo valor que o size, produzindo uma drop cap clássica. Um sink de 1 mantém a letra no topo da primeira linha e produz uma raised cap.

/* 3 lines tall, sunk 3 lines (classic dropped cap — sink defaults to size) */
initial-letter: 3;

/* 3 lines tall, sunk only 1 line — letter rises above the paragraph */
initial-letter: 3 1;

/* Reset to no effect */
initial-letter: normal;

Informação

Ambos os inteiros devem ser positivos — valores zero e negativos são inválidos. O valor de sink não deve exceder o valor de size.

Valores

Valor	Descrição
`normal`	Nenhum efeito de initial-letter. Este é o valor padrão.
`<integer>`	Um único inteiro positivo define o tamanho em linhas; o sink assume o mesmo valor, gerando uma drop cap.
`<integer> <integer>`	O primeiro valor é o tamanho (altura em linhas). O segundo é o sink (linhas que a letra desce). Use `1` para o sink para obter uma raised cap.
`initial`	Redefine a propriedade para seu valor padrão (`normal`).
`inherit`	Herda o valor calculado do elemento pai.

Exemplo de letra inicial

Este exemplo dimensiona a primeira letra para ter duas linhas de altura com um sink de 1 (a letra fica no topo da primeira linha, parcialmente elevada, parcialmente afundada). O margin-right evita que o texto seguinte fique colado à cap.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Slabo 27px';
        font-size: 1.5em;
        line-height: 1.5;
        padding: 40px 0;
      }
      article {
        width: 80%;
      }
      .example::first-letter {
        -webkit-initial-letter: 2 1;
        initial-letter: 2 1;
        color: #8ebf42;
        font-weight: bold;
        margin-right: .60em;
      }
    </style>
  </head>
  <body>
    <article class="example">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </article>
  </body>
</html>

Experimente Você Mesmo »

Exemplo de raised cap

Defina o sink (segundo valor) como 1 para que a letra ampliada fique no topo da primeira linha e se eleve acima do parágrafo em vez de descer nele:

.example::first-letter {
  -webkit-initial-letter: 3 1;
  initial-letter: 3 1;
  color: #8ebf42;
  font-weight: bold;
  margin-right: 0.1em;
}

Um sink de 1 com um size de 3 significa que a letra tem três linhas de altura, mas apenas sua borda inferior desce até a primeira linha de base — o restante se projeta acima da linha inicial.

Estilizando a letra inicial

Você pode aplicar qualquer propriedade que também funciona em ::first-letter para decorar a cap. As abordagens mais comuns incluem:

color — use uma cor de marca ou de destaque para fazer a cap se destacar.
font-size — evite definir isso na mesma regra; initial-letter assume o controle do dimensionamento da fonte.
font-family — combine uma fonte decorativa para a cap enquanto o corpo usa uma tipografia diferente.
font-weight — caps em negrito são tradicionais na tipografia editorial.
margin-right — adicione uma pequena lacuna (0,1–0,6 em) entre a cap e o texto seguinte.
padding — adicione espaço entre o glifo e qualquer background-color ou border.
color — defina uma cor de texto contrastante.

p::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
  font-family: Georgia, serif;
  color: #b5451b;
  font-weight: bold;
  margin-right: 0.15em;
  padding: 0.05em 0.1em;
  background-color: #fdf3ee;
}

Suporte a navegadores e fallback

initial-letter tem amplo suporte no Safari e no Chrome/Edge (Blink), mas o Firefox ainda não o implementa. Sempre forneça um fallback para que a página ainda pareça razoável em navegadores sem suporte.

Aviso

Use o prefixo -webkit-initial-letter junto com a propriedade sem prefixo para cobrir versões mais antigas do WebKit/Blink.

Fallback de aprimoramento progressivo

A regra @supports permite aplicar a propriedade moderna apenas onde ela funciona, e um layout mais simples baseado em float em todos os outros lugares:

/* Fallback for Firefox and older browsers */
p::first-letter {
  font-size: 3.5em;
  font-weight: bold;
  float: left;
  line-height: 0.65;
  margin: 0.05em 0.1em 0 0;
}

/* Override with the proper property where supported */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  p::first-letter {
    font-size: unset;
    float: unset;
    line-height: unset;
    margin: unset;
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}

A abordagem com float requer ajuste manual de line-height e margin para alinhar visualmente a letra — que é exatamente a configuração frágil que initial-letter substitui. O bloco @supports redefine de forma limpa esses valores manuais e aplica a propriedade padrão.

Quando usar `initial-letter`

Use initial-letter quando:

Você deseja drop caps editoriais que permaneçam alinhadas mesmo que o leitor altere o tamanho da fonte do navegador.
Você está produzindo layouts no estilo de revista, artigos longos ou páginas de capítulos de livros.
Você pode tolerar a lacuna do Firefox com um fallback de float.

Evite quando:

A primeira "letra" é na verdade um número, emoji ou marca de pontuação — o alinhamento visual pode ser inesperado.
Você precisa de controle pixel-perfect sobre a posição em todos os navegadores hoje sem um fallback de float.

Propriedades relacionadas

::first-letter — o pseudo-elemento que initial-letter usa como alvo.
::first-line — estiliza a linha inicial de um bloco.
float — a forma clássica (pré-CSS3) de simular uma drop cap.
font-size — dimensiona o texto manualmente quando initial-letter não é suportado.
line-height — determina a grade de linhas à qual a cap se encaixa.
text-indent — outra ferramenta tipográfica para a primeira linha, frequentemente usada junto com drop caps.

Prática

Qual é o propósito da propriedade CSS 'initial-letter'?

É usada para definir um estilo específico para pontuação em um texto.É usada para criar um efeito de drop cap ou raised cap na primeira letra de um parágrafo.É usada para alinhar o texto verticalmente dentro de uma linha.É usada para definir o tamanho da letra inicial e o tipo de alinhamento, permitindo que ela seja elevada ou afundada.É usada para definir o tamanho da fonte de um parágrafo.