How to create a drop cap letter in Squarespace

content block

Sep 26

A drop cap character is the first letter of a block of text that is larger than the rest, designed to elevate the style of your website content.

In this step-by-step tutorial, you’ll learn how to create a drop cap character in Squarespace using custom CSS. You’ll be able to adjsut the size, location, and font to create a beautiful & unique drop cap character for any blog post or content block.

You’ll find the codes to create this magic underneath the video, but make sure you watch the tutorial so you know what parts of the code to change to make it uniquely yours!

Here are the codes from this tutorial. Be sure to update the values style to make this work for your own unique website design.

/* The first letter in every new block of text in a blog post */
.blog-item-content .html-block:first-letter{
 font-weight: bolder;
 display: block;
 float: left;
 margin-top: 1rem;
 margin-bottom: 0rem;
 margin-right: 3px;
 font-size: 4rem; 
}

/* The first letter in a specific block of text */
#block-12345:first-letter{
 font-weight: bolder;
 display: block;
 float: left;
 margin-top: 1rem;
 margin-bottom: 0rem;
 margin-right: 3px;
 font-size: 4rem; 
}