How to create a drop cap letter in Squarespace
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
This tutorial was recorded using Squarespace 7.1 and the blog specific code will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
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!
Video tutorial
Code Example
Here are the codes from this tutorial. Be sure to update the font style and size settings to make this work for your own unique website.
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;
}
