initial-letter

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

ChromeOperaFirefoxIEEdgeSafari
NoNoNoNoNoTP*

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
11.0-11.2*NoNoNoNoNo

Related

More Information

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag