Vertical Text Code for Squarespace

Just copy this code into a code block — then edit the text inside to whatever you want. Woo!

📝 Vertical Text Effect for Squarespace

Copy and paste this into a Code Block in your Squarespace page. Replace "Vertical Example" with your text!

<!-- Vertical Text Effect -->
<style>
.vertical-text {
    writing-mode: vertical-rl;
    font-size: 1.5rem;
    color: #14A19D;
    text-orientation: mixed; /* Better CJK character support */
    margin: 1em 0;
    line-height: 1.6;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Optional hover effect */
.vertical-text:hover {
    color: #0E817C;
}

/* Ensure readability in dark mode */
@media (prefers-color-scheme: dark) {
    .vertical-text {
        color: #1CCCC7; /* Brighter shade for dark backgrounds */
    }
}

/* Improve mobile display */
@media (max-width: 768px) {
    .vertical-text {
        font-size: 1.25rem; /* Slightly smaller on mobile */
    }
}
</style>

<div 
    class="vertical-text"
    role="text"
    aria-orientation="vertical"
    aria-label="Vertical text reading: Vertical Example">
    Vertical Example
</div>

🚀 How to Customize Your Vertical Text Effect

This guide will help you edit the Vertical Text Plugin for your Squarespace site.

✏️ Editing the Text

To change the text, simply edit the following line inside the <div>:

<div class="vertical-text">Vertical Example</div>

Replace "Vertical Example" with your desired text.

🎨 Changing the Text Color

To customize the text color, update this value inside the <style> block:

.vertical-text {

color: #14A19D;

}

Use HEX codes (e.g., #FF5733) or predefined CSS color names (e.g., red, blue). You can also adjust the hover effect color:

.vertical-text:hover {

color: #0E817C;

}

🔠 Adjusting Font Size & Weight

To change the text size:

.vertical-text {

font-size: 1.5rem;

}

Increase the value for larger text (e.g., 2rem).
Decrease for smaller text (e.g., 1rem).

To adjust font weight (boldness):

.vertical-text {

font-weight: 500;

}

Lighter text → 300
Regular → 400
Bolder → 700

📱 Mobile Optimization

By default, text appears slightly smaller on mobile screens:

@media (max-width: 768px) {

.vertical-text {

font-size: 1.25rem;

}

You can adjust this value to make it larger or smaller on mobile.

🌙 Dark Mode Optimization

This code ensures better readability for users with dark mode enabled:

@media (prefers-color-scheme: dark) {

.vertical-text {

color: #1CCCC7;

}

Feel free to adjust this color to match your brand's dark mode styling.

🔍 SEO & Accessibility Enhancements

This vertical text is optimized for SEO and screen readers:

ARIA labels for accessibility: <div class="vertical-text" aria-label="Vertical text reading: Vertical Example">
ARIA orientation tag: Helps screen readers understand the text is displayed vertically.
Semantic <div> structure: Keeps the code clean and readable.