Where to put text so it doesn’t overlap in the new X (Twitter) preview (2023)

By admin
If you want to be kept up to date with new articles,

CSS
ORG

resources and tools, join our newsletter.

X (Twitter) recently updated their link previews to hide both the title and description, and overlaying the domain on top of the image.

While this isn’t great when it comes to accessibility, discoverability and the dissemination of fake news, as many have pointed out, it also means that text in your share image can be obscured.

For example, here’s what the

BBC
ORG

‘s sharing images currently look like:

In their case, they’ve been putting their logo in the bottom left of the image, which is right where

Twitter
PERSON

is now overlaying the domain. To prevent that from happening, we need to find the safe zone for text.

The new URL overlay

X’s new URL overlay is positioned in the bottom left of the image, 12px from either side and is itself 20px high. The width is dependent on the length of the URL, but with a font-size of

13
CARDINAL

pixels it’s never going to be extremely wide. For example, the

BBC
ORG

URL in the image above is 64px wide.

Unfortunately, that overlay is shown at the same size on top of differently sized images, so just looking at the default width and height of the image served by X (680px by

383px
LOC

) and keeping the bottom

32px
GPE

free isn’t going to cut it. For example while this image looks fine in the

Twitter
ORG

web ui:

The text is overlapped by the URL when the post is shown in

Tweetdeck
PERSON

even though the overlay is slightly less high at a total of 27px because of less spacing and a smaller font-size:


Tweetdeck
PERSON

seems to be the worst case, so we can use the dimension there to calculate the safe zone.

The safe zone

To find the safe zone we need to know the percentage that the url overlay takes up of the height of the image in

Tweetdeck
GPE

, and then extrapolate that to the full size of an image.

In

Tweetdeck
GPE

the image is

147px
PRODUCT

high and the URL overlay takes up 27px of that, which is

18.36%
PERCENT

of the height. That’s the height without any sort of space above the url overlay, so if you want to be safe you can increase that percentage

a little to 20%
PERCENT

, which is

29
CARDINAL

pixels on

Tweetdeck
PERSON

and ends up being 77px on the full size image, assuming you use

680x383px
CARDINAL

images.

If you use a different size, for example 1280px by

720px
ORG

which we use on our site, or

1360px
DATE

wide and

766px
PRODUCT

height which is exactly @2x you can calculate the safe zone by multiplying the height of the image by

0.2
CARDINAL

:

dimensions height safe zone

680x383px
CARDINAL

383px 77px 1280x720px

720px 144px
PERSON

1360x766px

766px 153px
PERSON

Template overlays

If you want to update your own social media images you can use the template overlays below to find the safe space for your images.

The overlays are transparent pngs with a

20%
PERCENT

red fill, so you can put them on top of your images in your image editor of choice and then move your text around until it’s not overlapped by the red.


680x383px
CARDINAL

Template for

680
CARDINAL

by

383px
CARDINAL

images:

1280x720px

Template for

1280
CARDINAL

by

720px
ORG

images:

1366x766px

template for

1366
CARDINAL

by

766px
PRODUCT

images:

Pixel perfect preview

If you want to see exactly how your social previews will look with the new design, keep an eye out for the next release of

Polypane
GPE

.

Polypane
GPE

has pixel-perfect previews for

nine
CARDINAL

different social media platforms, X included.

We immediately went to work to implement the new design as soon as X made the change:

The upcoming version of

Polypane
GPE

includes a pixel perfect preview of the new X cards, so you can see not just how much space you should keep free vertically, but also see exactly how much space your URL will take up horizontally.

Sign up for the newsletter to be notified when the next version is released, or head over to our page on social media previews to learn more about our pixel perfect social media previews.