X Header Design Tips: Safe Zones, Cropping and Text

A good X header keeps its words in the middle, stays clear of the lower left corner, and still makes sense when a phone shrinks it to a strip about the width of your thumb. Most problems people have with headers come from one of those three things.

These notes come from making the designs on this site and testing them on real profiles. The pixel numbers are for the recommended 1500 x 500 canvas.

Know what covers the header

Two things take space away from your header.

The profile photo. It's a circle that overlaps the bottom left of the header. On desktop it's about a fifth of the header's width across and roughly half of it hangs over the header. On the 1500 x 500 canvas, assume a circle around 330 to 340 pixels wide, starting about 40 pixels from the left edge, with its top at around y = 330. Anything you put there will be hidden.

Phone cropping. The X app shows the header at the top of a tall, narrow screen, and the exact framing changes with the device and app version. The top and bottom edges can get trimmed, and the status bar and buttons sit on top of the header. Budget about 60 pixels at the top and bottom that might not show.

Put together, a safe box for text and logos is roughly x = 240 to 1260 and y = 75 to 425. Our header maker draws this box when you tick Show safe zones. The pink bands mark the edges that phones may cut and the dashed box marks the area to aim for.

None of this means the edges have to be empty. Patterns, skies and textures can run right to the edge, because losing a strip of sky doesn't matter. Only words and faces need protecting.

Design for the phone first

Most people will see your header on a phone, where it's displayed at the width of the screen. On a typical phone, 1500 pixels become something like 390 to 430 points across. That's about a quarter of the size you're designing at.

Do this test before you finish: zoom out until your design is about 10 centimeters (4 inches) wide on your monitor, or send it to your phone and look at it at arm's length. Can you read every word? If not, cut words or make them bigger.

Rough minimums that hold up:

• A headline at 60 to 70 pixels tall or more on the 1500 x 500 canvas.
• A second line at 30 pixels or more.
• No more than about eight to ten words in total.

If you have more to say, it belongs in your bio or a pinned post.

Contrast beats color choice

Text that's easy to read on your monitor can disappear on a phone outdoors. Pick text colors with strong contrast against the background behind them, not just against the average color of the header.

Busy backgrounds are where this goes wrong. A photo of a crowd or a detailed pattern can have light and dark spots right behind your words. Three fixes work:

1. Put a solid or semi-transparent band behind the text. The header maker's Color band behind text option does this.
2. Add a soft shadow under light text. It's subtle, but it lifts the letters off busy areas.
3. Move the text to the calmest part of the image, and use the zoom and vertical position sliders when you're working with a photo.

Dark headers are worth a thought too. Many people use X in dark mode, where a very bright white header can feel like a flashlight at the top of the page. Mid-tone or dark designs like Winter Dark Blue or Midnight Grid sit comfortably in both modes.

Make the header and photo work together

Your profile photo sits on top of the header, so treat them as one design. A few ways to tie them together:

• Cut the profile photo from the same artwork. Every design in our gallery comes with a matching 400 x 400 avatar for this reason.
• Use one of the header's colors as the background of your avatar.
• If your avatar is a busy photo of you, choose a quieter header. Two busy images stacked on each other look cluttered.

Because the photo is round on most accounts, keep faces and logos inside the middle of the square. The corners get cut off.

Text placement that survives

Centered text is the safest choice. It stays clear of the profile photo and survives trimming at the sides.

Left-aligned text can look more designed, but start it far enough in. If you want the first word near the left edge, put the text in the upper half so it's above the photo circle. Right-aligned text near the bottom right corner can collide with the Edit profile or Follow button on desktop, which sits just below the header on the right. It doesn't cover the header, but text crammed into that corner looks crowded against it.

Skip anything that only makes sense at full size: thin script fonts, tiny URLs, small print. Web addresses in particular are hard to read and can't be clicked from a header. Put the link in your bio instead.

File format and quality

Export your finished header as PNG when it has text, flat color or sharp edges. PNG doesn't add blocky compression artifacts around letters. For photo-heavy headers a high-quality JPG is smaller and looks the same.

Keep the file at exactly 1500 x 500, or a larger image with the same 3:1 shape. Uploading a small image makes X scale it up, and that's when headers look soft.

X compresses images after upload, so a little quality loss is normal. Starting with a clean, full-size PNG keeps that loss to a minimum.

A quick checklist

Before you upload, check that:

• The file is 1500 x 500 (or larger at 3:1).
• No words or faces sit in the bottom left quarter.
• Nothing important is in the top or bottom 60 pixels.
• Text is readable when the image is about 10 cm wide.
• The text color stands out against the part of the image right behind it.
• Your profile photo and header share at least one color.

Then follow our steps for uploading it on desktop or in the app. If you need images to build on, our guide to free images you're allowed to use covers where to find them and what the licenses mean.

Questions