Drop Caps

Cross-browser way (extra markup)

Just wrap the first character of the paragraph in a span, then target the span with CSS and style away.

<p>
<span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>
.firstcharacter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

CSS3 way (no extra markup)

Target the first character of the first paragraph using pseudo class selectors. No extra markup needed, but no IE < 9 support.

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>
p:first-child:first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

The initial-letter way

Using initial letter to create a drop cap

The browser support for initial-letter is pretty sparse at the time of this writing, but it can be used to calculate the number of lines the drop capped letter should occupy and the font size instead of doing that on your own.

p:first-child:first-letter {
  color: #903; 
  font-family: Georgia;
  initial-letter: 2;
}

This browser support data is from Caniuse, which also reports this feature is in W3C Working Draft status.

Desktop

Google ChromeMozilla FirefoxInternet ExplorerOperaApple Safari
NoNoNoNo9

Mobile / Tablet

iOS SafariAndroidOpera MobileAndroid ChromeAndroid Firefox
9.0*NoNoNoNo

Comments

  1. User Avatar
    Lucas Tadeu
    Permalink to comment#

    That’s a really nice funcionality, didn’t really know about the “first-letter”. Thanks for the tip!

  2. User Avatar
    andieevans
    Permalink to comment#

    Actually it kind of works in ie8. If the paragraph has nothing before it ( etc) then it will work…

  3. User Avatar
    Ken Lasher
    Permalink to comment#

    The first option gives you more control. I tried the second and the only that got a drop cap was the footer text. This is a cool feature. Having come from a print design background, I missed drop caps. I used to make images for this purpose back in the day. This is sweet!

  4. User Avatar
    rohit
    Permalink to comment#

    small but nice

  5. User Avatar
    Theraisa K
    Permalink to comment#

    Neat! I didn’t even think of using drop caps on a website, but now that I see it in action it could be very useful in a well-designed site.

  6. User Avatar
    Graha Nurdian

    This is awesome ! nice tips mate :)

  7. User Avatar
    Zach Stone
    Permalink to comment#

    Excellent snippet — I was having cross-browser issues with :first-letter, the span solution left me spic-n-pixel-perfect. Thanks!

  8. User Avatar
    andry
    Permalink to comment#

    Thank you very much for this tip.

  9. User Avatar
    Alistair
    Permalink to comment#
    p:first-child:first-letter
    

    This doesn’t seem to work.

  10. User Avatar
    Alistair
    Permalink to comment#

    Sorry ended up a douchebag comment whilst amazement took place.

    Testing this in Chrome 13.0.782.220 m

    That selector doesn’t seem to work. However i’m noticing other bugs with this build on the laptop also. Weird artifacts being left in browser when multiple tabs are open.

  11. User Avatar
    dewadg
    Permalink to comment#

    This steps helped me. Thanks for the tutorial :)

  12. User Avatar
    Piotr Ślusarski
    Permalink to comment#

    Thank you! It works!

  13. User Avatar
    Piotr Ślusarski
    Permalink to comment#

    BTW: are there any fonts that look particularly well and could be recommended to use in drop caps (apart from Georgia)?

  14. User Avatar
    WyldKard
    Permalink to comment#

    The problem is that drop-caps will display elsewhere in your page too, like at the beginning of a blockquote or in a footer. Is there a way to restrict it _only_ to the first letter in a document?

    • User Avatar
      That Guy
      Permalink to comment#

      Use more specific CSS selectors. For example, #maincontent p:first-child:first-letter {blah; blah;}

  15. User Avatar
    Frank Ebbert
    Permalink to comment#

    Sweet to be sure! Thank you!

    I use text indents at times for my paragraphs. The drop cap technique produces the odd quirk of applying the indent to the rest of the word using the drop cap. So that word doesn’t line up with the text line below. To escape that, I set the text indent: 0; for that paragraph. Depending on my structure, I may have to play with selectors a bit.

    For CSS3, I keep this in mind too: the first-child pseudo selector applies the drop cap to the first <p> on the page. I’ve seen some impressive layouts where there are more than one drop per page. I’ve not done that yet, but I can see where I’d need to drop the first-child selector and simply use first-letter.

    Cheers to fine design.

  16. User Avatar
    Lyoniel
    Permalink to comment#

    .. great trick, it is so useful, thanks!.

  17. User Avatar
    dianejwright
    Permalink to comment#

    Hi all. Regarding the subsequent application of dropcaps on a page, it seems as if combinators do the trick! I found this: http://www.sitepoint.com/forums/showthread.php?585658-Pseudo-Class-first-child-Problem

  18. User Avatar
    That Guy
    Permalink to comment#

    Great tip. Worked perfectly in Firefox 10. My font sizes are in percentages so, I had to tweak it a little to get it to display correctly in Chrome and IE9. Probably has something to do with how individual browsers render fonts.

    I had to add a line-height of 0.8em and add a negative bottom margin of -0.1em to get it to display correctly in Chrome and IE9.

  19. User Avatar
    Steliyan
    Permalink to comment#

    Does this trick is usable in the wordpress theme?

  20. User Avatar
    Dan Eden
    Permalink to comment#

    I’m almost certain that p:first-child:first-letter doesn’t work in any browser. At least, it’s not working for me in Chrome 18, Safari 5.2, Firefox 11, Opera 11.

    • User Avatar
      eric
      Permalink to comment#

      Dan, it should be written like the following

      p:first-child::first-letter

      You were missing a colon.

  21. User Avatar
    Markus Reiter

    Instead of :first-child you need to use :first-of-type. Otherwise the “first child” could be a <h1> for example.

    • User Avatar
      Anup Debnath
      Permalink to comment#

      I think .class>p:first-child:first-letter is batter way.

    • User Avatar
      Jason
      Permalink to comment#

      Thank you Markus! I’ve been smashing my head against the keyboard and “:first-of-type” finally did the trick!

  22. User Avatar
    Tim Baggaley
    Permalink to comment#

    I’m using

     .content > p:first-of-type:first-letter {/* DROP CAP style */}
    

    In a WP theme as it avoids confusing by photos and / or their captions appearing as the first elements in the target div. My problem is IE9 – it seems to take no notice of the line-height value which sets the vertical position in every other browser I’ve tested including IE 8 and IE 10. I cannot find away to adjust the vertical position of the drop cap in IE 9 – can you help me?

    See my site at: http://graphicviolence.co.uk and my CSS for my drop cap is:

    .art-postcontent > p:first-of-type:first-letter 
    {
       letter-spacing:0;
       text-transform:uppercase;
       color:#250607;
       font-size:50px;
       font-weight:normal;
       float:left;
       margin:5px 5px -7px 0; /* THESE VALUES SET TXT WRAP AROUND DROP CAP */
       line-height:1; /* THIS SETS BASELINE POSITION OF DROP CAP */
    }
    

    Thanks
    t

  23. User Avatar
    Gerry O'Neill
    Permalink to comment#

    @ Ken Lasher – two years late – anyways your better off using the followind type selector:

    .article>p:nth-of-type(1):first-letter

    The nth-of-type is a damn good way of selecting ;)

    • User Avatar
      Gerry O'Neill
      Permalink to comment#

      @ Ken Lasher – two years late – anyways your better off using the following type selector:

      .article>p:nth-of-type(1):first-letter

      The nth-of-type is a damn good way of selecting ;)

      Typo on the first copy of my comment, had to fix ;)

  24. User Avatar
    syahrul
    Permalink to comment#

    what is font you using in?

  25. User Avatar
    Kyle
    Permalink to comment#

    CSS Tricks saves the day again! When I don’t know whether something can be done, I almost always check here first. I had no idea there was a first-letter pseudo class.

    Thanks for this!

  26. User Avatar
    Rams
    Permalink to comment#

    I have no idea how you – and only you – manage to answer my questions in 3 year old posts!
    Thank you for sharing the knowledge

  27. User Avatar
    Tanner Campbell
    Permalink to comment#

    I needed to make the first letter of the first paragraph of each blog entry a drop cap and I needed <ie8 compatibility. I worked it out using the “+” selector.

    #div A + B {}

    If you’re savvy you can probably just look at my codepen and figure it out: http://codepen.io/TannerCampbell/pen/vlDut

    Here’s a little bit of an explanation though:

    #column-left p:first-letter {
      font-size: 3em;
    }

    That would take all p elements inside the #column-left id and make their first letter a dropcap. But that’s useless if you only want the first character to have the dropcap. By adding the preceding element and the + selector like so:

    #column-left h6 + p:first-letter {
      font-size: 3em;
    }

    You’re telling the browser, “Hey, Browser. I would like you to find all the p’s inside of #column-left and if they are preceded by an h6 tag, I’d like you to give their first letter a font size of 3em.”

    This is useful if you have multiple repeat occurrences of the same layout inside of one div or id. Like, for instance, a WordPress theme.

    Hope this was helpful to someone. Have a good one!

    Best,
    Tanner

  28. User Avatar
    Kenneth John

    Thanks it really helped me. I have got one question I need to add an

    effect but I need to define its width too how is it possible

  29. User Avatar
    Al Augustin
    Permalink to comment#

    We used some jQuery in order to implement the CSS3 version across all browsers Sample Link

  30. User Avatar
    Eric Jussaume
    Permalink to comment#

    The drop caps code snippet works great. Its simple and easy I used it on my portfolio website http://ejstudios.net and it looks great. Just put in the CSS snippet into the appearance > editor and the span into the html in the text of the actual page you want it to be displayed in.

  31. User Avatar
    Alan Houser
    Permalink to comment#

    Works well, unless you start the paragraph with quotes. :D (scrsht http://i.sqr.fr/SmMS )

  32. User Avatar
    Hyshka
    Permalink to comment#

    Used responsive units for 16px base font size:

    font-size: 4.687em;
    line-height: .8em;
    padding-top: .25rem;
    padding-right: .5rem;
    padding-left: .187rem;
    margin-bottom: -.1em;
    
  33. User Avatar
    Crispylogs
    Permalink to comment#

    It will only work, if there is not any element before it. The p tag should be the very first element of your html.

    • User Avatar
      Ajay
      Permalink to comment#

      Not true… I’m using it like so .content p:first-child:first-letter { ... }

      Just add some selector before to target the exact p tag you want….

    • User Avatar
      Lorenzo Matibag
      Permalink to comment#

      Use .dropcaps:first-letter instead. Just add the class=”dropcaps” to any p tag you want the drop cap to appear in.

  34. User Avatar
    Dave
    Permalink to comment#

    Unfortunately (for me) it seems that first-letter only works for letters. When I tried applying it to text starting with a symbol (☰) it didn’t work. It did work for a Chinese character though, so it’s not ASCII only. I could do with a first-char selector really.

  35. User Avatar
    William Hertling
    Permalink to comment#

    As Alan said, the first-letter selector doesn’t work so well if the first character is an opening quote (because it selects both the opening quote plus the next letter). I’m trying to replicate what my designer normally would do in print, which is to keep the initial quote small, then have a drop cap next to it. I tried using a span on the first alphabetic character, but then I get the drop-cap floating left of the opening quote, which is bad. Any suggestions?

  36. User Avatar
    Mark
    Permalink to comment#

    Dave, if ‘symbol’ is a font, it will work like any other font. Similar to Dave’s ‘first char ignored’. Using IE11 with “details” parent and “summary” precedent sibling. Well,
    nothing happens with “first-child” pseudo. Even tried your &lt; and &gt; pipes. Nothing. However, be it noted that both summary and details elements are new to IE, and neither can directly pseudo anything, for now. Only “first-letter” works for the contained “p” element, where Ruby and HTML are copesthetic. yet some DOM tags not yet fitted… p.cap:first-letter {} and “ together, only option for now. first-child details summary

  37. User Avatar
    Cammy
    Permalink to comment#

    I’m too trying to achieve this with a quote, but only want to have the starting quotation marks as the drop cap, not the first letter too. It’s working in effect but I have drop caps on the quotation marks and first letter – anyone any idea how to only drop cap the quotation marks and start the text at the top of the quotation marks not the bottom?

  38. User Avatar
    Bladeshatter
    Permalink to comment#

    Wouldn’t the CSS function:

    text-transform: capitalize;

    Work just as good to capitalize the first letter?

  39. User Avatar
    CallMeIsmail
    Permalink to comment#

    “Dan, it should be written like the following

    p:first-child::first-letter

    You were missing a colon.”

    That sounds like an unpleasant condition.

  40. User Avatar
    Raghava :)

    Nice Article. Overall good amount of valuable formation in the website for designers and developers.

  41. User Avatar
    Dan
    Permalink to comment#

    What if I only want to apply the drop cap to my blog pages, but it’s formatting it across the whole website? Ie. in my summary block, on my photo descriptions, etc. Any way to restrict it? I’m using squarespace by the way so I can only use CSS edits. Thanks!

  42. User Avatar
    Atasha
    Permalink to comment#

    Are these the only ones to be added? Because I have getting into a problem when trying to implement it. The page is getting broken, free instagram followers.

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-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag