# Banner design: web, social and print banners that read [Canonical HTML page](https://gradiently.design/guide/banner-design) Banners are long, thin and often half covered by a profile photo or cropped on phones. Design for that shape and a few words can carry a whole brand. Every size you are likely to need is below. ## The short version - Banners are wide formats, from about 2:1 for blog and email banners to 6:1 for a LinkedIn company cover. - In a wide banner the eye reads left to right, so the words should sit in one compact block rather than spread across the full width. - Most social banners are partly covered by a profile photo or cropped on phones, so important content belongs near the centre. - A YouTube channel banner is 2560 × 1440 pixels, but only the central strip of about 1546 × 423 pixels shows on every device. - Print banners such as roll ups are read from several metres, so they need far fewer words and much larger type than web banners. Good **banner design** works with the shape instead of against it. A banner is wide and short, so give it one compact block of words, a short headline and perhaps one supporting line, placed where nothing will cover it, and let the background carry colour across the rest of the width. Check each platform's size and safe area first: a LinkedIn profile banner is 1584 × 396 pixels and loses its lower left corner to your photo, while a YouTube banner is 2560 × 1440 and shows only a central strip on phones. ## Banner sizes for web and social | Banner | Size (px) | Shape | What covers it | | --- | --- | --- | --- | | LinkedIn profile banner | 1584 × 396 | 4:1 | Profile photo, lower left | | LinkedIn company cover | 2256 × 382 | About 6:1 | Logo, lower left | | X header | 1500 × 500 | 3:1 | Profile photo, lower left | | Facebook cover | 1640 × 624 | About 2.6:1 | Profile photo, cropped on phones | | YouTube channel art | 2560 × 1440 | 16:9 | Only the centre shows on every device | | Bluesky banner | 3000 × 1000 | 3:1 | Avatar, lower left | | Website hero | 1920 × 1080 | 16:9 | Navigation along the top | | Blog banner and email header | 1200 × 600 | 2:1 | Nothing, but often seen small | | Etsy shop banner | 3360 × 840 | 4:1 | Cropped on phones | Sizes from Gradiently's size list, which follows each platform's recommended upload size. Platform guides go deeper: [LinkedIn banner size](https://gradiently.design/guide/linkedin-banner-size) and [YouTube banner size](https://gradiently.design/guide/youtube-banner-size). - Blog banner 2:1: 1200 × 600 - X header 3:1: 1500 × 500 - LinkedIn banner 4:1: 1584 × 396 - LinkedIn company 6:1: 2256 × 382 Four banners drawn to scale. As the shape gets thinner, the room for words shrinks much faster than the width grows. ## How to lay out words in a wide banner People read a banner the way they read a line of text: left to right, quickly. Spreading words across the full width makes the eye travel too far. Group them into one block, roughly a third of the width, and set the headline large enough to read when the whole banner shrinks to the width of a phone screen. A wide LinkedIn banner with a short headline on the right side and a gradient filling the rest A LinkedIn profile banner with the words kept clear of the profile photo at lower left. An X header banner announcing new podcast episodes every Thursday on a gradient background An X header: one line, one fact, and nothing important in the avatar's corner. Hierarchy has to be simple at this height. Two levels is usually the limit: a headline and a small line above or below it. If you need a third, it probably belongs on the profile itself. [Visual hierarchy](https://gradiently.design/guide/visual-hierarchy) explains how size and spacing do this work without extra decoration. ## Safe areas and cropping Every platform crops or covers its banner differently on desktop and phone. The safe approach is the same everywhere: let the background run edge to edge, and keep words and logos within the middle of the frame, away from the corner where the avatar sits. 1. **Find the covered corner** On LinkedIn, X and Bluesky the profile photo sits over the lower left. Keep that area as background only. 2. **Allow for phone crops** Facebook and Etsy trim the sides on phones. Keep words inside the central two thirds of the width. 3. **Use YouTube's central strip** Of the 2560 × 1440 frame, only the middle area of about 1546 × 423 pixels shows on all devices. Put the name and any words there. 4. **Check at real size** Upload, then view on a phone and a laptop. A preview in a design tool can't show you the platform's interface, and platforms change their layouts, so check their own help pages before a big launch. ## Print banners: roll ups and event signs A roll up banner, commonly 850 × 2000 mm, is the opposite problem: tall and seen from metres away while people walk past. It needs a logo and a headline in the top third at eye level, very little in the bottom third, which hides behind tables and legs, and type large enough to read from across a room. Ask your printer what resolution they want; large banners are normally printed from files well under 300 dpi because nobody sees them up close. ### Avoid - A paragraph explaining what you do - Words spread across the full width - Small text in the corner hidden by the avatar - A busy photo behind the headline - Key details at the bottom of a roll up ### Do - Four to eight words that say who you are - One compact block of type - Background only where the interface sits - A calm area of colour behind the words - Logo and headline at eye level For stands and stages, see [event backdrop design](https://gradiently.design/guide/event-backdrop-design), and for large paper formats, [poster sizes](https://gradiently.design/guide/poster-size-guide). ## One look across every banner Most people need five or six banners at once: LinkedIn, X, YouTube, an email header, a website hero. They look like one brand when the background, type and colour stay constant and only the layout changes. A gradient is ideal for this because it has no subject to crop, as long as it is rendered for each shape rather than stretched. A wide banner gradient, dark on the left: `linear-gradient(100deg, #0e1a2b 0%, #183b56 40%, #2a7f8f 75%, #9fd8cb 100%)` A horizontal blend that stays dark on the left, where an avatar or logo sits, and lifts towards the right. Copy it as a starting point for a profile banner. In Gradiently, a Mark renders fresh at every banner size, moves its calmest region behind your words and lets auto ink choose light or dark type per line. With Pro, one design resizes to every size in one step, so the LinkedIn, X and YouTube banners arrive together. The idea of one recognisable background is covered in [a signature look](https://gradiently.design/guide/brand-signature-look). ## FAQ ### What size should a banner be? It depends on where it goes: 1584 × 396 for a LinkedIn profile, 1500 × 500 for X, 2560 × 1440 for YouTube and 1200 × 600 for a blog or email banner. ### Where should text go on a social media banner? In one compact block near the centre or right, away from the lower left corner where the profile photo usually sits. ### What is the safe area for a YouTube banner? About 1546 × 423 pixels in the middle of the 2560 × 1440 image. Only that area shows on every device. ### How many words should a banner have? Four to eight for the headline, plus one small supporting line at most. Banners are seen briefly and often at a small size. ### What resolution does a print banner need? Ask your printer. Large banners viewed from a distance are usually printed from files well below 300 dpi at full size.