Drop caps without float hacks
The old way used float, a large font-size, and manual line-height and margin, and it broke across browsers. initial-letter gives you a real drop cap in one property.
2 -webkit-initial-letter: 3;
3 initial-letter: 3;
4}
5
6/* Standard; -webkit- prefix needed for Safari. */
2 float: left;
3 font-size: 3em;
4 line-height: 1;
5 margin-right: 8px;
6}
7
8/* Line wrapping and alignment often broke. */
Browser Support for initial-letter
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Your first month is free
Managed WordPress hosting for faster sites.
One property
No float, no guessing font-size or line-height. You say how many lines the letter sinks and the browser does the rest.
Stable layout
Initial-letter is designed for drop caps. Wrapping and alignment stay consistent across browsers.
Optional raise
initial-letter: 3 2 means sink 3 lines and raise 2. You get control without fragile hacks.
How it works
The old way: style ::first-letter with float: left, a big font-size (e.g. 3em), line-height: 1, and margin-right to clear the text. It kind of worked but line wrapping and alignment varied by browser and font, and you had to tweak by eye.
The modern way: set initial-letter: 3 (or another number). The number is how many lines the letter sinks into. The browser sizes and positions it correctly. Use two values, e.g. 3 2, for sink and raise. Safari requires the -webkit- prefix. One property, predictable result.