files/en-us/web/css/reference/properties/initial-letter/index.md
The initial-letter CSS property sets the size and sink for dropped, raised, and sunken initial letters. This property applies to {{cssxref("::first-letter")}} pseudo-elements and inline-level first children of block containers.
/* Keyword values */
initial-letter: normal;
/* One value */
initial-letter: 3; /* 3 lines tall, baseline at line 3 */
initial-letter: 1.5; /* 1.5 lines tall, baseline at line 2 */
/* Two values */
initial-letter: 3 2; /* 3 lines tall, baseline at line 2 (raised 1 line) */
initial-letter: 3 1; /* 3 lines tall, baseline unchanged (raised 2 lines) */
/* Global values */
initial-letter: inherit;
initial-letter: initial;
initial-letter: revert;
initial-letter: revert-layer;
initial-letter: unset;
The keyword value normal, or a <number> optionally followed by an <integer>.
normal
<number>
<integer>
{{cssinfo}}
{{csssyntax}}
<p class="normal">Initial letter is normal</p>
<p class="onefive">Initial letter occupies 1.5 lines</p>
<p class="three">Initial letter occupies 3 lines</p>
.normal::first-letter {
-webkit-initial-letter: normal;
initial-letter: normal;
}
.onefive::first-letter {
-webkit-initial-letter: 1.5;
initial-letter: 1.5;
}
.three::first-letter {
-webkit-initial-letter: 3;
initial-letter: 3;
}
p {
outline: 1px dashed red;
}
{{EmbedLiveSample('Setting_initial_letter_size', 250, 180)}}
In this example, all the initial letters are the same size, but with different sink values.
<p class="four">Initial letter: Sink value = 4</p>
<p class="same">Initial letter: Sink value not declared (same as size)</p>
<p class="two">Initial letter: Sink value = 2</p>
<p class="one">Initial letter: Sink value = 1</p>
.four::first-letter {
-webkit-initial-letter: 3 4;
initial-letter: 3 4;
}
.same::first-letter {
-webkit-initial-letter: 3;
initial-letter: 3;
}
.two::first-letter {
-webkit-initial-letter: 3 2;
initial-letter: 3 2;
}
.one::first-letter {
-webkit-initial-letter: 3 1;
initial-letter: 3 1;
}
p {
outline: 1px dashed red;
}
{{EmbedLiveSample('Setting_the_sink_value', 250, 240)}}
{{Specifications}}
{{Compat}}