Propiedad CSS initial-letter
Aprende cómo la propiedad CSS initial-letter crea letras capitulares y elevadas con sintaxis, valores, soporte de navegadores y ejemplos prácticos.
La propiedad CSS initial-letter crea una letra capitular: amplía la primera letra de un bloque para que abarque varias líneas de texto y se alinee perfectamente con el párrafo circundante. Esta es la letra inicial de gran tamaño que se suele ver en libros, revistas y artículos de lectura extensa.
Antes de que existiera esta propiedad, las letras capitulares se simulaban con float más font-size ajustada manualmente y márgenes negativos — valores frágiles que se rompían cada vez que cambiaba la fuente o el interlineado. initial-letter hace los cálculos por ti: indicas cuán alta debe ser la letra en líneas, y el navegador la dimensiona y posiciona automáticamente para que su línea base y la altura de mayúsculas se alineen con el texto del cuerpo.
Se aplica al pseudoelemento ::first-letter (o al primer hijo en línea de un contenedor de bloque), no a todo el párrafo.
| Valor inicial | normal |
|---|---|
| Se aplica a | Pseudoelementos ::first-letter y al primer hijo a nivel de línea de un contenedor de bloque. |
| Heredada | No |
| Animable | No |
| Versión | CSS3 |
| Sintaxis DOM | element.style.initialLetter = "2 1"; |
Sintaxis
initial-letter: normal | <integer> | <integer> <integer>;La propiedad acepta la palabra clave normal o uno o dos enteros positivos separados por espacio.
Cómo funciona
- El primer valor (
size) controla cuántas líneas de alto tiene la letra.3significa que el glifo ocupa la misma altura que tres líneas de texto — el navegador ajusta elfont-sizepara lograrlo automáticamente. - El segundo valor (
sink) es opcional y controla cuántas líneas desciende la letra por debajo de la primera línea base del texto. Si se omite, el sink adopta por defecto el valor de size, produciendo una letra capitular clásica. Un sink de1mantiene la letra en la parte superior de la primera línea y produce una letra elevada.
/* 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;Ambos enteros deben ser positivos — los valores cero y negativos son inválidos. El valor sink no debe superar el valor size.
Valores
| Valor | Descripción |
|---|---|
normal | Sin efecto de letra inicial. Este es el valor por defecto. |
<integer> | Un entero positivo establece el tamaño en líneas; el sink adopta por defecto el mismo valor, produciendo una letra capitular. |
<integer> <integer> | El primer valor es el tamaño (altura en líneas). El segundo es el sink (líneas que desciende la letra). Usa 1 para el sink y obtendrás una letra elevada. |
initial | Restablece la propiedad a su valor por defecto (normal). |
inherit | Hereda el valor calculado del elemento padre. |
Ejemplo de letra inicial
Este ejemplo dimensiona la primera letra a dos líneas de alto con un sink de 1 (la letra se sitúa en la parte superior de la primera línea, parcialmente elevada y parcialmente hundida). El margin-right evita que el texto siguiente quede demasiado cerca de la capitular.
<!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>
Ejemplo de letra elevada
Establece el sink (segundo valor) en 1 para que la letra ampliada se sitúe en la parte superior de la primera línea y sobresalga por encima del párrafo en lugar de hundirse en él:
.example::first-letter {
-webkit-initial-letter: 3 1;
initial-letter: 3 1;
color: #8ebf42;
font-weight: bold;
margin-right: 0.1em;
}Un sink de 1 con un size de 3 significa que la letra tiene tres líneas de alto pero solo su borde inferior desciende hasta la primera línea base — el resto se eleva por encima de la línea inicial.
Estilizar la letra inicial
Puedes aplicar cualquier propiedad que también funcione en ::first-letter para decorar la capitular. Los enfoques más comunes incluyen:
color— usa un color de marca o de acento para que la capitular destaque.font-size— evita definirlo en la misma regla;initial-letterse encarga del tamaño de fuente.font-family— combina una fuente decorativa de display con la capitular mientras el cuerpo usa una tipografía diferente.font-weight— las capitulares en negrita son tradicionales en la tipografía editorial.margin-right— añade un pequeño espacio (0.1–0.6 em) entre la capitular y el texto siguiente.padding— añade espacio entre el glifo y cualquierbackground-coloroborder.color— establece un color de tinta 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;
}Compatibilidad con navegadores y alternativas
initial-letter tiene amplia compatibilidad en Safari y Chrome/Edge (Blink), pero Firefox aún no lo implementa. Proporciona siempre una alternativa para que la página siga viéndose correctamente en navegadores sin soporte.
Usa el prefijo -webkit-initial-letter junto con la propiedad sin prefijo para cubrir versiones antiguas de WebKit/Blink.
Alternativa de mejora progresiva
La regla @supports permite aplicar la propiedad moderna solo donde funciona, y un diseño más sencillo basado en float en todos los demás casos:
/* 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;
}
}El enfoque con float requiere ajustar manualmente line-height y margin para que la letra se alinee visualmente — que es exactamente la configuración frágil que initial-letter reemplaza. El bloque @supports restablece limpiamente esos valores manuales y aplica la propiedad estándar.
Cuándo usar initial-letter
Usa initial-letter cuando:
- Quieras letras capitulares editoriales que permanezcan alineadas incluso si el lector cambia el tamaño de fuente de su navegador.
- Estés creando maquetaciones de estilo revista, artículos de lectura extensa o páginas de capítulos de libros.
- Puedas tolerar la falta de soporte en Firefox con una alternativa basada en float.
Evítalo cuando:
- La primera «letra» sea en realidad un número, un emoji o un signo de puntuación — la alineación visual puede ser inesperada.
- Necesites un control exacto al píxel sobre la posición en todos los navegadores actuales sin una alternativa basada en float.
Propiedades relacionadas
::first-letter— el pseudoelemento al que apuntainitial-letter.::first-line— aplica estilo a la línea inicial de un bloque.float— la forma clásica (anterior a CSS3) de simular una letra capitular.font-size— tamaño del texto manualmente cuandoinitial-letterno es compatible.line-height— determina la cuadrícula de líneas a la que se ajusta la capitular.text-indent— otra herramienta tipográfica de primera línea, usada frecuentemente junto con letras capitulares.