InsideTheSquare.co

View Original

How to create a drop cap letter in Squarespace

See this content in the original post

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!

See this content in the original post
See this content in the original post

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;
}

See this content in the original post

⭐ Free Training: Squarespace CSS Basics

🔗 How to install CSS in one page on your Squarespace site

📺 Tutorial: add a custom font to Squarespace

📖 Free guide: font & text properties