Add this classic initial caps feature to your blog posts! Simply copy the code below and add it to a code block, then replace the placeholder text with your first paragraph and voila! You've got yourself a neat drop cap.

📝 Simple Drop Cap Effect for Squarespace

Copy and paste this into a Code Block at the top of your Blog Post. Replace the placeholder text with your first paragraph!

<!-- Simple Drop Cap Effect -->
<style>
.simple-drop-cap {
    font-size: 1.2em;
    line-height: 1.7;
    color: #2c3e50;
    margin: 1.5em auto;
    max-width: 800px;
}

.simple-drop-cap::first-letter {
    float: left;
    font-size: 4.5em;
    line-height: 1;
    padding-right: 0.1em;
    color: #14A19D;
}
</style>

<div 
    itemscope 
    itemtype="https://schema.org/Article"
    role="article"
    aria-label="Article with drop cap">
    <p class="simple-drop-cap" itemprop="articleBody">ADD PARAGRAPH TEXT HERE!</p>
</div>

📝 How to Customize This Drop Cap Effect

This simple drop cap effect creates a large, styled first letter for blog posts while maintaining SEO optimization. Below are the key areas you can customize:

1️⃣ Add Your Own Text

Scroll down to the bottom to locate the following section of the code:

<p class="simple-drop-cap" itemprop="articleBody">ADD PARAGRAPH TEXT HERE!</p>

Replace "ADD PARAGRAPH TEXT HERE!" with your actual blog post intro.

✅ SEO Note:
This paragraph includes itemprop="articleBody", helping search engines recognize it as the main content of your article.

2️⃣ Change the Drop Cap Size

Adjust the font size of the first letter:

.simple-drop-cap::first-letter {

font-size: 4.5em; /* Change this value */

}

Example:

Smaller effect: font-size: 3em;
Bigger effect: font-size: 6em;

3️⃣ Change the Drop Cap Color

Update the color of the first letter:

.simple-drop-cap::first-letter {

color: #14A19D; /* Change this value */

}

Example:

Red: color: #FF5733;
Black: color: #000000;

4️⃣ Adjust the Main Text Style

Modify the font size and color for the paragraph:

.simple-drop-cap {

font-size: 1.2em; /* Adjust text size */

color: #2c3e50; /* Change text color */

}

Example:

Larger text: font-size: 1.4em;
Lighter text: color: #777777;

5️⃣ SEO & Accessibility Notes

✅ This code maintains SEO and accessibility by:

Using Schema.org markup: itemscope itemtype="https://schema.org/Article"
- → Helps Google recognize this section as an article.

Adding itemprop="articleBody" to the paragraph
- → Ensures search engines correctly index the main text.
Using ARIA attributes: role="article" aria-label="Article with drop cap"
- → Improves screen reader compatibility.