Stacked vs. Horizontal Logos: Choosing the Right Layout

Neither a stacked nor a horizontal logo is better in general. Each fits a different shape of space. A horizontal layout suits wide, short placements. A stacked layout suits square or tall ones. Most identities that are used across many formats benefit from having both, plus rules for when to use each. This guide explains the observable differences between the two layouts and how to choose between them for a specific use.

What the two layouts actually are

Both terms describe a lockup. A lockup is a fixed arrangement of a logo's parts, usually a symbol or icon plus a wordmark (the brand name set in a specific typeface). In a horizontal lockup, the symbol sits beside the wordmark, usually to its left, and the whole unit reads in one line. In a stacked lockup, the symbol sits above the wordmark. A long name may also be broken across two or more lines.

The distinction matters for scope. Switching from horizontal to stacked rearranges existing elements. It is not a redesign. If the symbol's shape, the typeface or the colors also change between two versions you are comparing, you are looking at a redesign, and the layout is only one of several variables.

How the layouts differ

The points below fall into two kinds. Some are observable geometric facts that follow from how each lockup is arranged. Others are editorial interpretations of what those facts tend to mean in use. Interpretations are labeled as such.

Proportion and footprint

Observable: a horizontal lockup has a wide aspect ratio, and its width is several times its height. A stacked lockup is closer to square or taller than wide. The exact ratios depend on the logo, so measure your own artwork rather than assuming a typical figure.

Interpretation: wide containers favor the horizontal version, such as website headers, email signatures, letterheads and banner placements. Square or vertical containers favor the stacked version, such as social profile frames, app-style tiles, merchandise tags and posters. Putting the wrong layout into a container forces it to shrink to fit the container's shorter dimension, which leaves empty space on the other axis.

Typography and legibility at small sizes

Observable: in a box of fixed height, a horizontal lockup can usually set the wordmark larger than a stacked lockup can, because the stacked version must share that height between the symbol and the text. In a box of fixed width, the reverse often holds. The stacked version's text line is shorter, so it can be set at a larger size.

Interpretation: the wordmark is usually the first part to become hard to read as a logo shrinks. Choose the layout that gives the wordmark the most size in the space you actually have. If the wordmark is unreadable in either layout, the answer may be a third version, a symbol-only mark, rather than either lockup.

Spacing and clear space

Observable: each lockup has its own internal gap between symbol and wordmark, and its own clear space. Clear space is the protected margin kept free of other elements around the logo. The two layouts need separate specifications because the gap runs horizontally in one and vertically in the other.

Interpretation: a stacked lockup often needs its alignment set deliberately. Centering the wordmark under the symbol is common, but a visually centered result may differ from a mathematically centered one if the symbol's shape is asymmetric. Judge the alignment by eye at the intended size, then lock it into the master file.

Color

Layout does not change a logo's palette. What can change is the visual balance. In a stacked lockup the symbol often appears larger relative to the wordmark, so a strongly colored symbol may dominate more than it does in the horizontal version. Check each lockup in full color, one color and reversed (light on dark) so that both hold up in every color mode you plan to use.

Scalability

Both layouts scale without loss of sharpness if the artwork is genuinely vector. Scalability here means something else: how well each layout stays recognizable and legible across sizes, which depends on the specific design. No tests were supplied for this guide, so any claim that one layout performs better at small sizes is untested. Treat it as something to verify with your own artwork.

Vector asset editability

A well-built vector master keeps the symbol and the wordmark as separate, grouped elements. With that structure, deriving one layout from the other means rearranging and respacing. Nothing needs to be redrawn.

Do not assume a file is built that way from its name or extension. A file with a vector extension can still contain an embedded raster image. Its text may also be live type rather than outlined shapes, in which case it can render in the wrong typeface on a machine that lacks the font. Open the file in a vector editor and inspect its paths and layers before relying on it.

Side-by-side summary

Criterion | Horizontal lockup | Stacked lockup

Shape | Wide and short | Compact, square-ish or tall

Best-fitting spaces (interpretation) | Headers, signatures, letterheads, banners | Profile frames, tiles, tags, posters, centered layouts

Wordmark size in a fixed-height space | Usually larger | Usually smaller

Wordmark size in a fixed-width space | Often smaller | Often larger

Spacing to specify | Horizontal symbol-to-text gap, clear space | Vertical symbol-to-text gap, alignment, clear space

Small-size performance | Untested here; verify with your artwork | Untested here; verify with your artwork

Which layout to choose

The recommendation depends on where the logo will appear:

• Mostly in wide, short placements such as a site header or document letterhead: make the horizontal lockup your primary version.
• Mostly in square or vertical placements such as social avatars, packaging fronts or signage panels: make the stacked lockup primary.
• Across a wide mix of formats: keep both as approved versions, add a symbol-only mark for the smallest spaces, and document which version goes where.
• The name is long: a horizontal lockup can become very wide, so a stacked version with the name broken across lines may be the more practical default. Break at natural word boundaries, never mid-word.

How to compare the two fairly

Visual judgments are only meaningful when the specimens are comparable. To get a fair comparison:

• Use the same source artwork for both layouts, with the same symbol, typeface and colors.
• Place each version in the real container it is meant for, not on an empty canvas.
• View both at the same physical or on-screen size, on the same display or the same print output.
• Check the smallest size you actually expect to use, along with each color mode you plan to use.
• If you are evaluating a redesign, change one variable at a time so a layout effect is not confused with a typeface or color change.

Gaps in this guide

No specific logo, brand guideline or asset files were supplied for this guide. It also contains no measured legibility or recognition tests. The guidance is therefore general. It cannot confirm which layout works better for a particular brand, give exact minimum sizes, or verify how any given file is constructed.

A logo being publicly available in either layout also does not mean you are permitted to reuse it. Check the owner's usage terms before using a logo that is not yours.

Practical next step

List the places your logo will appear and note each one's shape. Mock up both lockups in those real placements at their real sizes. Choose the primary version from that test, and keep the second layout and a symbol-only mark as documented alternates in your vector asset set.