initial-letter

Avatar of Geoff Graham
Geoff Graham on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

initial-letter is a CSS property that selects the first letter of the element where it is applied and specifies the number of lines the letter occupies.

You may have seen something like this on news sites, where the first letter of a leading paragraph is larger than the rest of the content.

The New Yorker’s site styles the initial letter

The trick with styling the first letter of content used to take a little hack where you wrap the letter in a <div> and apply a class to style it:

/* Style that first letter! */
.first-letter {
  font-size: 35px;
  line-height: 70px;
}
<p><span class="first-letter">O</span>nce upon a time in a faraway land...<p>

That works, but it’s more HTML markup than we want and breaks up our content. Plus, it’s pain to have to apply that class manually any time you want to use it.

That where initial-letter comes in:

/* Style that first letter! */
.subhead {
  initial-letter: 2;
}
<p class="subhead">Once upon a time in a faraway land...<p>

That’s cleaner! Another approach is to apply it to the ::first-letter psuedo-selector instead:

/* Style that first letter! */
.subhead::first-letter {
  initial-letter: 2;
}

Did you see that? The initial-letter property automatically calculates both the font size and the number of lines needed to create our stylized drop cap! Want it to take up exactly 2, 3, 4 or more lines? Tell the property and it will do the heavy lifting.

Changing the property to occupy 1, 2 and 4 lines

Syntax and Values

initial-letter: normal | [<number> <integer>];

initial-letter accepts the following values:

  • normal: Does not apply a scaling effect on the first letter. This can be useful for resetting the value where one might be inherited from the cascade.
  • <number>: How many lines the letter should occupy where negative values are not allowed.
  • <integer>: How many lines the letter should sink where negative values are not allowed. This is handy should you need to position the letter lower to accommodate tricky spacing issues but, if not specified, it takes the value of <number>

Examples

Drop Cap, Raised Cap and Block Cap using Initial Letter

Styling the initial letter can be used to achieve some fancy typographical design methods. Please note that the following examples are only currently supported by Safari.

Drop Caps are probably the most familiar use case:

See the Pen initial-letter: Drop Cap by Geoff Graham (@geoffgraham) on CodePen.

Raised Caps are another example:

See the Pen initial-letter: Raised Cap by Geoff Graham (@geoffgraham) on CodePen.

Block Caps harken back to old fairy tales:

See the Pen initial-letter: Block Cap by Geoff Graham (@geoffgraham) on CodePen.

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
129NoNo126TP*

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
126No12618.0*

Related

More Information