Presets

Initial Letter Size

Default: Drop size equals sink (normal drop cap)

Style Options

Typography

Sample Text

Live Preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Note: CSS initial-letter has limited browser support. This preview uses a simulated effect.

Syntax Reference

initial-letter: <size> [<sink>]
  • size: Number of lines the letter spans (height)
  • sink: Number of lines the letter sinks into (optional, defaults to size)
initial-letter: 33 lines tall, sinks 3 lines (classic drop cap)
initial-letter: 3 13 lines tall, sinks 1 line (raised initial)
initial-letter: 3 43 lines tall, sinks 4 lines (sunken initial)

Generated CSS

/* Initial Letter Styling */
p::first-letter {
  initial-letter: 3;
  color: #1a1a2e;
  font-family: Georgia;
  font-weight: normal;
  margin-right: 0.5rem;
}

/* Body Text Styling */
p {
  font-family: Georgia;
  font-size: 1rem;
  line-height: 1.6;
}

Full Example

/* Initial Letter - Complete Example */

/* Basic Drop Cap */
.article p:first-of-type::first-letter {
  initial-letter: 3;
  color: #1a1a2e;
  font-family: Georgia, serif;
  font-weight: bold;
  margin-right: 0.5rem;
}

/* Raised Initial (extends above line) */
.raised-cap::first-letter {
  initial-letter: 3 1; /* 3 lines tall, sink 1 line */
  color: #4a90d9;
  font-weight: bold;
}

/* Sunken Initial (below baseline) */
.sunken-cap::first-letter {
  initial-letter: 3 4; /* 3 lines tall, sink 4 lines (goes below) */
  color: #8b0000;
}

/* Decorative Boxed Initial */
.boxed-initial::first-letter {
  initial-letter: 2;
  background-color: #333;
  color: white;
  padding: 0.25em 0.5em;
  margin-right: 0.5rem;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* Circular Initial */
.circle-initial::first-letter {
  initial-letter: 2;
  background-color: #0066cc;
  color: white;
  padding: 0.25em;
  border-radius: 50%;
  margin-right: 0.5rem;
}

/* Gradient Initial */
.gradient-initial::first-letter {
  initial-letter: 3;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: bold;
}

/* Feature Detection */
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .drop-cap::first-letter {
    initial-letter: 3;
    -webkit-initial-letter: 3;
  }
}

/* Fallback for Non-Supporting Browsers */
@supports not ((initial-letter: 3) or (-webkit-initial-letter: 3)) {
  .drop-cap::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.1em;
    margin-top: 0.1em;
  }
}

/* Responsive Drop Caps */
@media (max-width: 768px) {
  .article p:first-of-type::first-letter {
    initial-letter: 2;
    -webkit-initial-letter: 2;
  }
}

/* Print Styling */
@media print {
  .article p:first-of-type::first-letter {
    initial-letter: 4;
    color: black;
    background: none;
  }
}

CSS Initial Letter Reference

Property Values

ValueDescription
normalNo initial letter (default)
<number>Number of lines the letter spans
<number> <number>Size and sink values (raised/sunken)

Browser Support

BrowserVersion
Chrome110+ (with prefix)
Safari9+ (-webkit-initial-letter)
FirefoxNot supported
Edge110+ (with prefix)

Related Selectors

  • ::first-letter - Selects the first letter of a block
  • ::first-line - Selects the first line of a block
  • :first-of-type - First element of its type
  • :first-child - First child element

Fallback Techniques

  • Use float: left with font-size for older browsers
  • Apply @supports for feature detection
  • Consider using SVG for complex decorative initials
  • Use web fonts with decorative characters

Best Practices

  • Use for article or chapter beginnings
  • Keep drop caps to 2-4 lines for readability
  • Ensure sufficient contrast with background
  • Test with different first characters (Q, J, Y may need adjustments)
  • Consider responsive adjustments for mobile

Common Patterns

  • Magazine Style: 3-4 line drop cap with serif font
  • Book Style: 2 line raised cap
  • Modern Style: Boxed or circular background
  • Decorative: Custom font with ornaments

Rate this tool