Resizing vs composing: why one layout can’t fit all

The quick way to produce a banner campaign is to design one banner, say a 300×250 or a 1080×1080, and resize it to every other format. This guide shows why that breaks down once the shapes get far apart, and what it means to compose a banner for each shape instead.

The arithmetic of aspect ratios

A banner’s aspect ratio is its width divided by its height. A 300×250 is 1.2, close to square. A 728×90 is 8.1. A 160×600 is 0.27. The leaderboard is about thirty times as wide, relative to its height, as the wide skyscraper. No single arrangement of logo, headline, image and button works at both ends of that range.

Take a 300×250 and try to turn it into a 728×90. There are three ways to do it, and each one fails.

1. Scale to fit. The height has to shrink from 250 to 90 pixels, so everything shrinks to 36%. The banner becomes a 108×90 island in a 728-pixel strip, and a 24-pixel headline ends up under 9 pixels tall.
2. Scale to fill. The width has to grow from 300 to 728 pixels, so everything grows by a factor of about 2.4. Only about 15% of the original height still fits in the frame, so the headline, the logo or the button gets cut off.
3. Stretch. The banner fills the frame, but the type, the logo and the photo are distorted. Brand guidelines exist to prevent exactly that.

The same happens going the other way, from a square to a tower, and from a feed image to a Story. Between different shapes, the layout has to change.

Resizing is still the right tool within one shape. A 300×250 and a 336×280 share a ratio of 1.2, so one composition serves both. The same goes for 1200×628 and 1200×627. Even then, check each format’s safe zone and minimum type size: a floor of 10 pixels does not shrink with the banner.

Five shapes, not thirty-five sizes

You do not need a separate design for every size. Sizes with a similar ratio can share a layout, so Sizewright sorts its 37 formats into five shapes by ratio.^[1]

Two results are worth noting. The 970×250 billboard is a landscape, not a strip, so it has room for a subline. And 4:5 feed images such as 1080×1350 count as square: at a ratio of 0.8, they sit on the square side of the line.

A minimum type size per format

Scaling also ignores a rule that should never bend: text has to be readable at the size it is shown. Sizewright sets the minimum text size at 4% of a banner’s shorter side, and never less than 10 pixels.

In pixels, a Story needs text more than four times as large as a medium rectangle. A design scaled from one to the other has no reason to land on the right size.

What moves where in each shape

Composing means the elements stay the same while their arrangement changes. The logo, the headline, the image and the button appear in every size, each placed where the shape has room for it.^[4] The brand colors, the fonts, the logo’s clear space and the reading order stay constant too: the reader meets the brand and the headline first, and the button last.

• Strip: one row. Logo on the left, headline in the middle, button on the right.^[2] The subline drops out, and the image becomes a narrow slice or drops out too.
• Landscape: two columns. Text on one side, image on the other, with room for a subline under the headline.
• Square: a split or a stack. The image takes half the frame or sits behind the text, and an offer can get a block of its own.
• Portrait: image on top, copy below. There is room for the long headline, the subline, the button and the logo.
• Tower: a column. Logo at the top, the headline broken over several lines, the image in the middle, the button at the bottom.

728 × 90

160 × 600

Copy in three lengths

A layout can move elements around, but it cannot make a headline shorter. That is why composed campaigns are written with copy in more than one length:

• a headline in a short, a medium and a long version
• an optional subline, also in three lengths
• a button label in a short and a long version^[5]

In the Noordkaap example, the strip and the tower use a short headline: “Roasted this week.” The 1080×1920 version of the same campaign has room for a longer one, with a subline under it: “Freshly roasted, delivered every week.”

Sizewright fits the copy in a real browser, with up to ten attempts per banner. When the text does not fit, it switches to the short button label first, then to shorter sublines and headlines, and finally drops optional lines.^[4] The guide to banner copy covers how to write those versions.

How Sizewright composes a set

Each of Sizewright’s twelve layout families, from split field and full bleed to offer block and listing, has a composition for each of the five shapes.^[5] For every banner, two layout variants are rendered and the better one is kept.^[4] Every result is then checked against the measured rules, including minimum type size, overflow and safe zone.^[6]

You can browse the layout families and their compositions in the templates, see how a campaign covers every size in every format, and look up any single size in the banner size guide.