How Visual Hierarchy Works on Squarespace

(And Why Your Layout Isn't Converting)

Visual hierarchy is the system you use to guide your visitors' eyes around your website in a deliberate order. It's the difference between a page that feels clear and organised and one that feels chaotic. And it directly affects whether people stay, explore, and convert—or bounce within three seconds.

Here's what makes it critical for Squarespace sites specifically: your platform gives you powerful tools to control hierarchy (section padding, font scale, colour, spacing), but it doesn't force you to use them well. Most sites we audit have a visual hierarchy that's accidental rather than intentional. Images are oversized. Text is undersized. Buttons are buried. The eye has nowhere to land. And because the designer has spent weeks living inside the site, they don't notice. But your visitors do, within milliseconds, even if they can't articulate what feels wrong.

The good news is that fixing this isn't complicated. You don't need to redesign anything. You just need to understand why hierarchy matters and apply a few core principles systematically. This post breaks down exactly how to do that on Squarespace 7.1.

What Visual Hierarchy Actually Is

Visual hierarchy is how you establish dominance and subordination on a page. Some elements are important. Some are supporting. Some are background. The goal is to make that clear instantly, without your visitors having to think about it.

Think of a newspaper front page. The biggest headline is the most important story. Below that, a slightly smaller headline is the second most important story. Below that, smaller still, are the stories fewer people care about. A casual glance at the page, lasting maybe two seconds, tells you what matters and in what order.

Your website should work the same way. A first-time visitor, landing on your homepage, should immediately understand: what is this business, why do I care, what do you want me to do next? That understanding shouldn't require reading a word. It should come from the visual structure alone.

The reason this matters for conversion is straightforward: clarity builds trust, and trust builds action. When a visitor lands on your site and immediately understands what you do and why it might matter to them, they're infinitely more likely to engage. When they land and feel confused or overwhelmed, they click away. It really is that binary.

The Z-Pattern: How Western Visitors Naturally Scan Pages

In the 15th century, Johannes Gutenberg designed the pages of his Bible with a principle that still shapes web design today. He positioned key information where it would naturally catch the eye of a reader scanning a page. That pattern became known as the Gutenberg Diagram or Z-pattern, and it's worth understanding because it directly shapes how you should arrange content on your Squarespace site.

The eye of a Western reader naturally moves across a page in a rough Z: starting at the top left, sweeping right, drifting diagonally down to the bottom left, and finishing at the bottom right. There are two "fallow areas" where attention is naturally weak: the top right and the bottom left. This matters because it tells you where to place your most important information.

Primary Optical Area (Top Left)

This is where your strongest message belongs. Your headline, your value proposition, the thing that immediately answers "what do you do?" should sit here. On Squarespace, this is your hero section. And here's the mistake we see constantly: designers use a beautiful full-bleed image with no text at all. The photo is gorgeous. The headline is nowhere. The visitor's eye lands on beauty with no context, admires it for a moment, and then, without a clear next step, bounces.

Sweep Area (Top Right)

The eye sweeps here quickly but doesn't linger. This is ideal for a call to action: "Book Now," "Get Started," "Learn More." A button positioned in the top right of your hero section catches the eye naturally as part of the scanning pattern. You don't need to fight for attention here; you just need to place something clickable.

Fallow Area (Bottom Left)

Attention is weak here. Don't put important information you need people to see. This is fine for secondary details, disclaimers, or supporting text.

Terminal Area (Bottom Right)

The eye ends here. If you have a final call to action on the page, below the fold, this is where it lands naturally. Place a strong secondary CTA here and you're working with the pattern rather than against it.

On a Squarespace site, this translates into concrete placement decisions. Your hero headline top left. Your main button top right. Important supporting sections in the middle. Secondary CTAs bottom right. Follow this pattern and your page feels navigable even before the visitor reads a single word.

Heading Hierarchy: The Semantic Foundation

Here's something that seems basic but is consistently ignored: your heading structure should follow a clear hierarchy, and that hierarchy should be semantic, not visual. An H1 should be an H1 because it's the main heading on the page, not because you want large text. An H2 should be an H2 because it's a section heading, not because the default font size happens to look right.

Why does this matter? Three reasons. First, it makes your page scannable. A visitor reading your page should be able to skim the headings and understand the content flow. Second, it helps search engines understand what your page is about. Google uses heading structure to parse content. If your headings are chaotic (H1, H3, H2, H1, H4), you're giving Google nothing to work with. Third, it makes your site accessible. Screen reader users navigate pages by jumping between headings. If the heading structure is illogical, the page becomes impossible to navigate for them.

The rule is simple: every page gets one H1, at the very top, that describes what the page is about. Sections within the page get H2s. Subsections get H3s. Never skip a level. Never use a heading size and then choose a lower heading level because you want the text to be smaller. Instead, use Squarespace's Site Styles to adjust the visual size of each heading level.

In Squarespace 7.1, you control heading sizes through the Design panel. Go to Site Styles, scroll to Typography, and customize each heading level independently. Your H2 can be visually large. Your H3 can be small. It doesn't matter. What matters is that the semantic structure (H2, then H3) is correct. This single change—fixing heading hierarchy—is one of the highest-impact improvements you can make to a Squarespace site, both for user experience and for SEO.

Whitespace: The Active Element Designers Ignore

Gutenberg printed the pages of his Bible with roughly 40% of the page as empty space. This wasn't because vellum was cheap or because he had nothing to print. It was because he understood that the space around the text is what makes the text readable. The gaps matter as much as the content.

This is the single most transformative thing you can do to a Squarespace site: add more whitespace everywhere. Between sections. Between blocks. Around images. Between lines of text. The instinct, especially for DIY builders, is to stack content tightly, to fill every pixel, because empty space feels like wasted space. It isn't. It's breathing room. It's what allows each element to be seen on its own terms.

In Squarespace 7.1, you control this through two main settings. First, section padding: the space above and below each section. Second, block spacing: the gap between individual blocks within a section. As a rule of thumb, add more padding than you think you need. The most elegant sites we've worked on almost always have generous vertical padding. Think of it like the pause between movements in a piece of music. Without the silence, it's just noise.

A practical starting point: in most cases, aim for section padding of at least 40px on desktop, and at least 30px on mobile. If your site feels cramped, increase it to 60px or 80px and look at it again. The difference is dramatic. Content that felt stacked and overwhelming suddenly feels organised and spacious.

Font Scale and Type Hierarchy

Your headings aren't the only thing that should follow a clear hierarchy. Your body text, your captions, your button labels, everything should have a logical size relationship. A visitor should be able to look at your page and understand at a glance what's most important, what's supporting, and what's supplementary, based on text size and weight alone.

The mistake sites make is random sizing. The main heading is 48px. A subheading is 36px. A caption is 14px. Another section's heading is 42px. The visitor's brain is constantly recalibrating, never quite sure which text matters most. Instead, establish a clear scale. Perhaps your headings go: H1 at 48px, H2 at 36px, H3 at 28px, body text at 16px. Then stick to it religiously across every page. Consistency is what makes the hierarchy feel intentional.

This is where Squarespace's Site Styles again become invaluable. You set the scale once, in one place, and every page inherits it. And crucially, you're not limited to just size. You can also control weight (bold vs. regular), letter spacing, and line height. A light-weight, spaciously-spaced headline feels different from a heavy, tightly-spaced one, even at the same point size. Use these variations to create visual variety without breaking your scale.

The Grid: Why Alignment Matters More Than You Think

Gutenberg built the pages of his Bible on an invisible grid. Two columns of precisely justified text, surrounded by carefully proportioned margins. Everything aligned. Everything was exactly where it should be. This wasn't decoration. It was the foundation of the clarity that made his design revolutionary.

Squarespace 7.1's Fluid Engine uses an invisible 24-column grid on desktop and a 12-column grid on mobile. Every block you place snaps to that grid. And when things align properly, the page feels right in a way that's almost impossible to articulate but impossible to miss. When things are misaligned, even slightly, the page feels restless. The eye catches the inconsistency subconsciously, like a picture frame that's tilted a few degrees.

The most common mistake: choosing different column widths for different sections. One section's content stretches from column 2 to column 23. The next section stretches from column 3 to column 22. In isolation, each section looks fine. Together, the page feels assembled rather than designed. The visitor doesn't consciously notice the misalignment, but they feel it.

The fix is simple: pick your margins and stick to them. If your content sits within columns 3 to 22, make that your rule for every single section on every page. If you need a full-width section (a background image or a coloured block), fine. But your text content, your blocks, your grid of elements should all align consistently. This single discipline makes a site feel professional and intentional.

Colour and Contrast as Hierarchy Tools

Colour is a hierarchy tool. A bright colour draws the eye more forcefully than a muted one. A high-contrast colour combination is more attention-grabbing than a low-contrast one. Use this deliberately.

Your primary call to action button should be your brand's most vibrant colour, placed against a contrasting background. Secondary buttons should be more muted. Tertiary actions should be even subtler. A visitor scanning your page should immediately see what you want them to click, and in what order of priority.

The same applies to text. Your main heading might be dark grey or black. Subheadings might be a slightly lighter shade or a brand colour. Body text might be a neutral grey. Captions and supplementary text might be even lighter. This creates visual depth and makes scanning effortless.

In Squarespace, you establish your colour palette through Site Styles. Once you've set your colours (primary, secondary, accent, text, background), use them consistently. Don't arbitrarily change text colour in one section and then use the default in another. That inconsistency undermines hierarchy.

Button Placement and Size

Buttons are where hierarchy becomes actionable. Your primary call to action should be visually dominant: large, colourful, high-contrast, and positioned where the eye naturally falls. Your secondary CTA should be visually subordinate: smaller, less vibrant, positioned less prominently.

A common error: making all buttons the same size. "Book Now" and "Learn More" are given equal visual weight, even though "Book Now" is what you actually want visitors to do. Instead, make your primary button visibly larger. Use a vibrant colour. Surround it with whitespace so it stands out. Make secondary actions appear smaller and less attention-grabbing.

Positioning matters too. Your primary CTA should be visible without scrolling. Ideally in the top right of your hero section or at the end of an introductory paragraph. Secondary CTAs can be lower on the page. The further down the page, the less visual prominence it needs.

Mobile Hierarchy: Where Most Sites Fail

Here's the hard truth: over 70% of web traffic is mobile. And most Squarespace sites have a desktop hierarchy that falls apart on phones. Text that looks perfectly sized on a 27-inch monitor becomes tiny on a 5-inch screen. Spacing that creates elegant breathing room on desktop feels like endless scrolling on mobile. Buttons sized for a mouse cursor become impossible to tap with a finger.

The mistake is treating mobile as an automatic reflow of desktop. Squarespace's Fluid Engine does reflow responsively, but "automatic" doesn't mean "optimal." You need to actively adjust for mobile.

In the mobile editor view, check everything. Are your headings still readable at mobile size? Do your sections feel spacious or cramped? Can you easily tap your buttons? Are you hiding any sections that don't add value on a phone? Squarespace's Block Hiding feature lets you hide specific blocks on mobile without any code. Use it. A leaner, faster mobile experience often converts better than a complete replication of desktop.

Images: Size, Focal Points, and Lazy Loading

Images are incredibly powerful for visual hierarchy. A large image says "this matters." A small image says "this is supporting." The placement and size of images should reinforce your overall hierarchy, not contradict it.

In Squarespace, every image block has a focal point setting. This is critical on mobile, where background images crop differently. If your image has a person's face, set the focal point to that face. If it's a landscape, set it to the most interesting area. This ensures that on mobile, where the image might crop significantly, you're still showing the viewer the part that actually matters.

Also pay attention to image size. Your hero image should be large. Images in supporting sections should be smaller. Don't use images inconsistently. If you have a grid of portfolio pieces, they should all be the same size, aligned to your grid, and spaced consistently. That consistency reinforces hierarchy through uniformity.

Common Mistakes and Fixes

Mistake 1: No clear primary action. The visitor lands on your site and has no idea what you want them to do. Fix this by placing a single, visually dominant button where the eye naturally falls (top right of hero section). Make it large. Make it colourful. Make it clear. Hide secondary actions below the fold.

Mistake 2: Too much information above the fold. You're trying to convey everything on the first screen: your value proposition, your services, your testimonials, your portfolio, your contact form. The result is chaos. Fix this by choosing the single most important message for the hero section. Let that be the only thing the visitor sees before scrolling. Everything else lives below.

Mistake 3: Inconsistent heading sizes. Your H2 is 36px on the homepage but 42px on the services page. Fix this by controlling all heading sizes through Site Styles. One place. One scale. Applied everywhere.

Mistake 4: Images without strategic placement. Random large images scattered throughout. Fix this by using images to reinforce hierarchy: large, prominent images for important sections; smaller images or no images for supporting sections.

Mistake 5: Ignoring mobile. Your site looks beautiful on desktop and is unusable on phones (70% of your traffic). Fix this by spending time in the mobile editor. Adjust text sizes. Tighten spacing. Hide unnecessary blocks. Test on an actual phone.

Practical Implementation Checklist

Here's how to audit and improve your own site's visual hierarchy right now:

• Open your homepage. Zoom out to 50% so you can see the entire page at once. Can you immediately tell what's most important? If not, your hierarchy needs work.

• Check your heading levels. Every page should have one H1 at the top. Every section should have an H2. No skipping levels. No using heading levels for visual size.

• Look at your whitespace. Are sections cramped or spacious? Increase section padding by 20-30px and re-evaluate.

• Identify your primary call to action. Is it visually dominant? Is it positioned where the eye naturally falls? If not, make it larger, more colourful, and move it higher on the page.

• Check your font scale. Do your text sizes follow a logical progression? Is it clear at a glance what text is most important?

• Test on mobile. Pull up your site on your phone. Tap every button. Scroll through every page. Does the hierarchy hold on a small screen? If not, adjust in the mobile editor.

• Evaluate your colour use. Is it reinforcing hierarchy or contradicting it? Are secondary buttons the same colour and size as primary buttons?

Why This Actually Matters for Your Bottom Line

Visual hierarchy isn't a design theory to impress other designers. It directly affects conversion. When a visitor lands on your site and immediately understands what you do and what action you want them to take, they're exponentially more likely to take it. When they land and feel confused, they leave. The data backs this up consistently: clear, well-hierarchized sites have bounce rates 30-50% lower than cluttered sites. They have conversion rates 2-3 times higher. This isn't aesthetics. This is money.

Every site we've worked on that struggled with conversion had a hierarchy problem. Not usually a design problem. A hierarchy problem. The content was good. The products or services were good. But the visitor couldn't easily tell what mattered or what to do next. Fixing the hierarchy fixed the conversions.

Squarespace gives you all the tools you need. The grid is there. The spacing controls are there. The typography options are there. The button styling is there. You just need to use them systematically, with intention, understanding that every choice (size, colour, position, spacing) is telling your visitor a story about what matters. Get that story right, and conversions follow.