How to make emotes that stay readable in chat

The canvas you design on is several hundred pixels across, but what actually appears in chat is around 24–28px. That is less than a tenth of the area, so the level of detail that felt “about right” while editing will almost always collapse.

On top of that, plenty of viewers use a light theme even though dark is more common. If you only ever check against one background, the outline will disappear into the other one.

Character count has the largest effect by far. A 28px square holds very little information, and the more characters you add, the smaller each one gets.

• 2–3 characters: comfortable (“GG”, “W”, “88”)
• 4–5 characters: readable with a heavy font and an outline
• 6 or more: essentially unreadable at actual size

For a long phrase, abbreviate it or split it over two lines so that each line stays short.

Thin strokes are the first thing to vanish when the image is scaled down. Pick an extra-bold sans-serif or rounded font. Serif faces have a large contrast between thick and thin strokes, and the thin ones disappear.

Brush and handwriting styles set a nice tone but tend to be thin and intricate. If you use one, cut the character count further or thicken the outline to reinforce the shape.

An outline solves nearly all of the “it blends into the background” problem. What works best is a double outline.

• Inner outline: a color that contrasts with the text, emphasizing the letterforms
• Outer outline: white or black, so the silhouette stands out against any background color

White on the outside works especially well on dark backgrounds, black on light ones. If you need both, something like white text, a saturated inner outline and a white outer outline holds up either way.

Colors like red and green differ in hue but sit at a similar brightness, and they merge together when shrunk. Readability is decided by difference in brightness, not hue.

Pick combinations that stay clearly distinct when converted to greyscale — light text with a dark outline, or the reverse. Separating light from dark beats placing two saturated colors next to each other.

If you bake the character art and the text into a single image, every adjustment — “make just the text bigger”, “animate only the text” — means redoing the whole thing. Keeping them on separate layers lets you swap one out or reorder them later.

• Stacking order: text must sit in front of the artwork. Behind it, it cannot be read
• Motion can be per layer: hold the artwork still and shake only the text. Animating everything tends to obscure what you want people to notice
• Do not add too many: animating each layer increases the difference between frames, which makes the GIF larger

Every adjustment above only means something once you check it at the real display size. A balance you tuned while zoomed in becomes a different thing at 1×.

PochiSta shows a chat-style preview at roughly 24px while you edit, and you can flip between dark and light on the spot. On mobile, that preview sits permanently just below the canvas.

• Is it five characters or fewer?
• Are you using an extra-bold font?
• Does the outer outline separate it from the background?
• Is there enough brightness difference between text and outline?
• Can you tell what it is at actual size (24–28px)?
• Have you checked it on both dark and light backgrounds?

• Twitch emote sizes and how to prepare them
• What to do when a Discord emoji exceeds 256KB