home / guides

Add a Decorative Drop-Cap to your Text

Having experimented a bit with this, adjusting the font-size and line-height can be an issue.

Class Specific Dropcap

paragraph 1

paragraph 2

paragraph 3

Code

<p>paragraph 1</p>
<p>paragraph 2</p>
<p class="dropme">paragraph 3</p>

/** Just this Class will receive a dropcap **/
.dropme:first-letter {
  color: #B91646;
  float: left;
  font-weight: bold;
  font-size: 2em;
  line-height: 1.9em;
  padding-right: 0.1em;
  margin-top: -0.1em;
}

Dropcap First Paragraph Only

Code

<div class="guide-dropcap-01">
  <p>paragraph 1</p>
  <p>paragraph 2</p>
  <p>paragraph 3</p>
</div>

/** Dropcap Only The First Paragraph **/
.guide-dropcap-01 {
  p:first-of-type::first-letter {
    color: #B91646;
    float: left;
    font-weight: bold;
    font-size: 2em;
    line-height: 1.9em;
    padding-right: 0.1em;
    margin-top: -0.1em;
  } 
} 

Dropcap All Paragraphs

Code

<div class="guide-dropcap-02">
  <p>paragraph 1</p>
  <p>paragraph 2</p>
  <p>paragraph 3</p>
</div>

/** Dropcap All Paragraphs **/
.guide-dropcap-02 {
  p:first-child::first-letter {
    color: #B91646;
    float: left;
    font-weight: bold;
    font-size: 2em;
    line-height: 1.9em;
    padding-right: 0.1em;
    margin-top: -0.1em;
  }
}

NOTES

1em equals the font size of the parent element.

1rem equals the font size of the html element, so adjusting the HTML’s font size scales other sizes from it.

The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).