Captions are text titles and descriptions that add information and context to your images. Captions don’t have their own style tweaks. Instead, they follow the tweaks for other text on your site.
How you style an image’s caption depends on where it is and how it’s set to display. Captions generally display in one of three ways:
- Caption below - The text displays on the page, below the image.
- Caption overlay - The text displays over the image, either at all times or only on hover.
- Lightbox caption overlay - With lightbox enabled, the image appears in a popup when clicked. A caption displays over the image either at all times or only on hover.
This guide covers the style rules for all images on your site that display captions.
Watch a video
Before you begin
- Fonts and colors have separate tweaks.
- We recommend keeping captions short, especially when the caption overlays an image. Longer captions may get cut off in certain devices and browsers.
In version 7.0:
- It's not possible to add line breaks to image caption titles. You can add line breaks to image description text.
- Each template has its own tweak names, but we use the term "body text" to refer to any text that isn't a heading or meta text. For example, in Adirondack, the tweak that controls the body text font is called Text. In Skye, it’s called Body. To learn more, visit Formatting and styling text.
- Some templates only have one tweak that controls all header colors or all header fonts. In those cases, captions that follow specific header styles (like Heading 3) will follow the general header tweak.
If you’re having difficulty styling captions on a 7.0 site, we recommend experimenting on a test page:
- Create a Layout Page in the Not Linked section of your navigation.
- Add a Text Block that contains Heading 1, Heading 2, Heading 3, and body text (You’ll need at least four lines of text).
- Use Site Styles to give each of these a distinct font and color.
- Look at your caption to see how it’s changed.
Gallery section
Version 7.0 doesn't support gallery sections. Use a Gallery Page instead.
Images in gallery sections support descriptions, which display when the Captions toggle is turned on in the section editor.
In all layouts:
- Font: Follows Fonts
- Color: Follows Paragraph: Medium under Colors
- Size: Not adjustable
- Caption alignment: Not adjustable
Keep in mind:
- Image descriptions don't support line breaks.
- Captions appear under each image in all Grid layouts and Slideshow: Simple and Full layouts. In the Slideshow: Reel layout, captions only appear under the center image.
- Captions don't appear in lightbox view.
Image Block
Most Image Block layouts support a title and subtitle with their own style settings.
How you style captions depends on which version of Squarespace your site is on.
For the Inline layout, captions can display below the image, as an overlay, or as a lightbox overlay. See the below for style rules for each.
Caption below
For captions that display below the Inline Image Block:
- Font: Follows Fonts
- Color: Follows Colors
- Size: Set in the text editor
Caption overlay
For captions that display over the Inline Image Block at all times or on hover:
- Font: Follows Fonts
- Color: Always white
- Size: Set in the text editor
Lightbox overlay
For captions that display over the Inline Image Block while in a lightbox pop-up:
- Font: Follows Fonts
- Color: Always white
- Size: Follows Paragraphs: Paragraph 3 under Fonts
For the Inline layout, captions can display below the image, as an overlay, or as a lightbox overlay. See below for style rules for each.
Caption below
In most templates, for captions that display below the Inline Image Block:
- Font: Follows body text
- Color: Follows body text
- Size: Not adjustable
There are exceptions in these template families:
|
Bedford |
Size: Follows body text |
|
Five |
Font: Always black and uppercase |
|
Pacific |
Size: Follows body text |
|
Skye |
Font, color, and size: Follows the Image & Gallery Block Captions tweak |
|
York |
Size: Follows body text |
Caption overlay
In most templates, for captions that display over the Inline Image Block when it's displaying on the page:
- Font: Follows body text
- Color: Always gray
- Size: Not adjustable
There are exceptions in these template families:
|
Five |
Font: Always uppercase |
|
Skye |
Font: Follows the Image & Gallery Block Captions tweak |
Lightbox overlay
In most templates, for captions that display over the Inline Image Block while in a lightbox pop-up:
- Font: Follows body text
- Color: Always white
- Size: Not adjustable
There are exceptions in these template families:
|
Adirondack |
Font: Not adjustable |
|
Bedford |
Font: Not adjustable |
| Five | Size: Follows body text |
|
Flatiron |
Color: Follows body text |
|
Pacific |
Font: Not adjustable |
|
Skye |
Font: Follows the Excerpt tweak |
|
Tremont |
Font: Not adjustable |
|
Wexley |
Size: Follows body text |
Summary Block
The Summary Block supports captions for all its designs (Wall, List, Carousel, Grid).
How you style the Summary Block caption depends on which version of Squarespace your site is on.
In all Summary Block designs:
- Title size: Follows Paragraphs: Paragraph 2 under Fonts
- Description size and Meta size: Not adjustable
- All fonts: Follow Fonts
- All colors: Follow Colors
In all templates:
- Title size, Description size, and Meta size: Not adjustable
- Description font: Follows body text
- Description color: Follows body text
- Title color: Varies by template, see the list below
In most templates:
- Meta 1 and 2 font: Follows body text
- Meta 1 and 2 color: Follows body text
- Title font: Follows body text
There are exceptions in these template families:
|
Adirondack |
Title font: Follows the Summary Block Title Font tweak |
|
Avenue |
Title font: Follows the Summary Block Title Font tweak |
|
Aviator |
Title font: Follows the Summary Block Title Font tweak |
|
Bedford |
Title font: Follows the Summary Block Title Font tweak |
|
Brine |
Title color: Follows body text |
|
Farro |
Title color: Follows body text |
|
Five |
Title color: Follows the Body Link tweak Gallery and Blog:
Events:
Products:
|
|
Flatiron |
Title color: Follows the Link Color tweak |
|
Forte |
Title color: Follows the Body Link Color tweak |
|
Galapagos |
Title color: Follows the Link Color tweak |
|
Ishimoto |
Title color: Follows the Body Link Color tweak |
|
Marquee (discontinued) |
Title font: Follows the Summary Block Title Font tweak |
|
Momentum |
Title font: Follows the Summary Block Title Font tweak |
|
Montauk |
Title font: Follows the Summary Block Title Font tweak |
|
Native |
Title font: Follows Heading 1 |
|
Pacific |
Title font: Follows the Summary Block Title Font tweak |
|
Skye |
Title font: Follows the List Title tweak |
|
Supply |
Title color: Follows the Link Color tweak |
|
Tremont |
Title color: Follows the Body Link Color tweak Gallery and Blog:
Events:
Products
|
|
Wells |
Title color: Follows the Body Link Color tweak |
|
Wexley |
Title color: Follows the Body Link Color tweak |
|
York |
Title color: Follows the Body Link Color tweak Gallery and Blog:
Event:
Products:
|
Instagram Block
The Instagram Block supports captions for the Slideshow and Stacked designs, and in the Grid design when viewed in a lightbox.
How you adjust the caption text depends on which version of Squarespace your site is on.
Stacked
Stacked captions below each image:
- Caption font: Follows Fonts
- Caption color: Follows Paragraph: Medium under Colors
- Caption size: Follows Paragraphs: Paragraph 2 under Fonts
Slideshow
Slideshow captions display as an overlay, either at all times or on hover:
- Caption font: Follows Fonts
- Caption color: Always white
- Caption size: Not adjustable
Grid
Grid captions display in the lightbox overlay:
- Caption font: Follows Fonts
- Caption color: Always white
- Caption size: Not adjustable
Stacked
Stacked captions below each image. In all templates:
- Caption font: Follows body text
- Caption color: Follows body text
- Caption size: Follows body text
Slideshow
Slideshow captions display as an overlay, either at all times or on hover. In all templates:
- Caption font: Follows body text
- Caption color: Always white
- Caption size: Not adjustable
Grid
Grid captions display in the lightbox overlay. In most templates:
- Caption font: Follows body text
- Caption color: Always white
- Caption size: Follows body text
Exceptions
The caption font and caption size aren't adjustable in these template families:
- Adirondack
- Bedford
- Pacific
Grid Gallery Block
How you adjust Grid Gallery Block caption text depends on which version of Squarespace your site is on.
In version 7.1 you can only add Gallery Blocks to blog posts, product items, and individual events.
Grid Gallery Block titles can display below the image. Titles and descriptions display in the lightbox overlay.
Title below
For titles that display below Grid Gallery Block images:
- Font: Follows Fonts
- Color: Follows Paragraph: Medium under Colors
- Size: Not adjustable
Lightbox overlay
For captions that display over Grid Gallery Block images while in a lightbox popup:
- Title font: Follows Fonts
- Title color: Always white
- Title size: Not adjustable
- Description font: Follows Fonts
- Description color: Always white
- Description size: Not adjustable
Grid Gallery Block titles can display below the image. Titles and descriptions display in the lightbox overlay.
Title below
In all templates, for titles that display below Grid Gallery Block images:
- Font: Follows body text
- Color: Follows body text
- Size: Not adjustable
Lightbox overlay
In most templates, for captions that display over Grid Gallery Block images while in a lightbox popup:
- Title font: Follows Heading 1
- Title color: Always white
- Title size: Follows body text
- Description font: Follows body text
- Description color: Always white
- Description size: Follows body text
There are exceptions in these template families:
|
Adirondack |
Title size: Not adjustable |
|
Bedford |
Title size: Not adjustable |
|
Five |
Title size: Follows Heading 1 |
|
Flatiron |
Description color: Follows body text |
|
Galapagos |
Title color: Follows Heading 1 Note: Enable Custom Headings in Site Styles |
|
Pacific |
Title color: Follows Heading 1 |
|
Skye |
Title font: Follows the List Title tweak Note: List Title and Title Color tweaks are only available when viewing a Blog Page |
|
Tremont |
Description font: Not adjustable |
|
York |
Title color: Follows Heading 1 |
Tip: In some templates, the Title Color tweak also affects blog post titles. To ensure visibility, your Title Color should be different than your site's background color.
Slideshow Gallery Block
How you adjust Slideshow Gallery Block caption text depends on which version of Squarespace your site is on.
In version 7.1 you can only add Gallery Blocks to blog posts, product items, and individual events.
Slideshow Gallery Block captions can only display as an overlay. For captions that display over the Slideshow Gallery Block:
- Title font: Follows Fonts
- Title color: Always white
- Title size: Not adjustable
- Description font: Follows Fonts
- Description color: Always white
- Description size: Not adjustable
Slideshow Gallery Block captions can only display as an overlay. In most templates, for captions that display over the Slideshow Gallery Block:
- Title font: Follows body text
- Title color: Always white
- Title size: Not adjustable
- Description font: Follows body text
- Description color: Always white
- Description size: Not adjustable
In the Skye family:
- Title font: Follows body text
- Description font: Follows the Image & Gallery Block Captions tweak
Stack Gallery Block
How you adjust Stack Gallery Block caption text depends on which version of Squarespace your site is on.
In version 7.1 you can only add Gallery Blocks to blog posts, product items, and individual events.
Stack Gallery Block captions can only display below the image:
- Title font: Follows Fonts
- Title color: Follows Heading: Medium in Colors
- Title size: Follows Heading 3 in Fonts
- Description font: Follows Fonts
- Description color: Follows Paragraph (Medium) in Colors
- Description size: Follows Paragraph 2 in Fonts
Stack Gallery Block captions can only display below the image. In most templates:
- Title font: Follows Heading 3
- Title color: Follows Heading 3
- Title size: Follows Heading 3
- Description font: Follows body text
- Description color: Follows body text
- Description size: Follows body text
Tip: Enable Custom Headings in Site Styles to style Galapagos headers.
In the Skye family:
- Title color: Follows the Body Gallery Block Title tweak
- Description font: Follows the Image & Gallery Block Captions tweak
- Description color: Follows the Image & Gallery Block Captions tweak
- Description size: Follows the Image & Gallery Block Captions tweak
Carousel Gallery Block
In version 7.1 you can only add Gallery Blocks to blog posts, product items, and individual events.
Carousel Gallery Blocks don’t display captions.
Gallery Page
Version 7.1 doesn't support Gallery Pages. Use a gallery section instead.
Every template has a built-in Gallery Page. Many templates use a standard Gallery Page, which can display either as a slideshow or grid. Others have unique Gallery Pages.
Unique Gallery Pages
These template families have unique (template-specific) Gallery Pages. Use the links below to learn about each template’s Gallery Page. If your template isn’t listed here, it has a standard Gallery Page.
Standard Gallery Pages
In most templates with standard Gallery Pages:
Grid format:
- Title font: Follows Heading 1
- Title color: Always white
- Title size: Follows body text
- Description font: Follows body text
- Description color: Always white
- Description size: Follows body text
Slideshow format:
- Title font: Follows body text
- Title color: Always white
- Title size: Not adjustable
- Description font: Follows body text
- Description color: Always gray
- Description size: Not adjustable
- Note: The body text tweak adjusts the space between the title and description
There are exceptions in these template families:
|
Template family |
Grid format |
Slideshow format |
|
Adirondack |
Title font: Not adjustable |
Title font: Follows Heading 1 Note: Always displays at the top and centered |
|
Bedford |
Title size: Not adjustable |
|
|
Five |
Title size: Follows Heading 1 |
|
|
Galapagos |
Title color: Follows Heading 1 Note: Enable Custom Headings in Site Styles. |
|
|
Marquee (discontinued) |
Title font: Follows body text |
|
|
Native |
|
Note: Always displays at the top |
|
Pacific |
Title color: Follows Heading 1 |
|
|
Skye |
Title font: Follows the List Title tweak Note: List Title and Title Color tweaks are only available when viewing a Blog Page |
Title font: Follows the List Title tweak Note: List Title and Title Color tweaks are only available when viewing a Blog Page |
|
York |
Title font: Follows Heading 1 |
|
Project Pages
Version 7.1 doesn't support Project Pages. Use a gallery section instead.
The Project Page is a template-specific portfolio layout, available in the York family (Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York). On Project Pages, the image title and description text display on the page beside or below the image.
Use the tweaks in the Project: Fonts section of Site Styles to style the text of your image title and descriptions. You can also scale the fonts to control how they display.