Mobile Product Infographics: Fonts and Contrast for Annotated/Callout Images

Mobile-first: why you need to “think in mobile” when designing callout images

Mobile search results are where decisions are made in seconds. A shopper scans the main image, then moves through the secondary images: one headline, two or three value markers, visual hints through arrows. If the headline collapses in thumbnail view and the labels disappear into the background, the product story falls apart.

A mobile-first approach is a discipline:

• calculate type size as a percentage of the long side of the source image
• plan quiet zones for text in advance
• do not place more than three ideas on one frame
• check the image at 160–200 px, at arm’s length

This approach makes your product gallery strategy predictable: the eye follows the hierarchy, the message is understood, and the click happens.

Terminology: the way people talk in the U.S.

• Main (Hero) image — the primary image with no text or graphics, only the product on white.
• Annotated / Callout image — a secondary image with short labels, arrows, and icons.
• Lifestyle / In-use image — the product shown in a real-life scene to communicate scale and context.
• Detail shot / Close-up — a close-up of texture, seams, ports, fasteners, or materials.
• Comparison image — a fair “us vs. a typical alternative” comparison based on three to four facts.
• A+ Content — the module below the description. It is not part of the gallery, so tables and longer text are appropriate there.

Important: MujoAI does not generate the main image for you. You still need to follow the white-background and clean-image standard yourself. What it does do is speed up the production of high-quality secondary images — annotated, lifestyle, and comparison images — built with mobile-first logic.

The three pillars of readability: fonts, contrast, and density

1. Fonts and font size for ecommerce images

The key metric is x-height, meaning the height of lowercase letters. The more open the letterforms are in letters such as o, e, and a, the easier they are to read in thumbnail view. A safe, stable choice is a sans-serif family in the Inter/Roboto class or a comparable family: neutral shapes, an even rhythm, and predictable kerning.

Working rules:

• headline on a callout image: about 3% of the long side of the source image
• label or marker text: about 2%
• line spacing: 115–130% of font size, with an extra 5–10% for a two-line headline
• tracking: moderate; on a dark background, +2 to +4 units can help the letters open up

2. Contrast and contrast rules product images

Contrast must hold up across different brightness levels and under glare:

• do not use near-white on white or near-black on dark
• on a complex photo background, add a light or dark plate with slight transparency
• do not outline white text with thin strokes on a light background because those outlines blur
• for dark text on dark backgrounds, a soft inner shadow or micro-glow of 2–4% can work well

3. Density and text overlays legibility

The more blocks you add, the worse readability becomes. Stay disciplined:

• one frame, one message
• three benefit markers is the upper limit
• no paragraphs on the image
• icons should be large and obvious

Minimum sizes: quick calculations for mobile

Platforms accept large source files, often 1500–3000+ px, but then compress them for mobile display: roughly 120–320 px in grid view and 320–600 px in full-screen mode. Using percentages of the long side gives you more stable readability:

• headline: about 3%
• labels: about 2%
• outer margins: 4–6%

Recommended font sizes for callout images

Tip: if the background is noisy, increase the font by one step. Checking the image at 160–200 px is mandatory.

Grid, margins, and quiet zones: how to guide the eye

One primary headline in a single line plus two or three one-line value markers creates a rhythm the eye can process without effort. Margins of 4–6% give the layout room to breathe. Arrange elements on a 12-, 8-, or 4-column grid, but avoid tiny fractional spacing steps. In thumbnails, those micro-gaps turn into a pixel staircase.

Quiet zones are areas without texture or glare. Ideally these are matte surfaces, sky, flat walls, or a clean tabletop. If the background is visually complex, use a soft plate under the text rather than placing type directly on the photo. Align that plate to the grid rather than positioning it by eye.

Contrast without visual dirt: practical techniques that work

• White text over light wood tends to wash out. Use a dark plate with 8–14% transparency.
• Black text on black electronics disappears. Add a micro-reflection or a 2–3% shadow.
• Brand colors are often too light for headlines. Test them in thumbnail view. Sometimes you need a darker shade.
• Never place text over glare, grainy fabric, or hair. The eye tries to clean up the noise and tires quickly.

Density and prioritization: what should definitely be removed

• Decorative icons such as checkmarks, sparkles, or ornamental shapes should go unless they add meaning.
• Filler words such as “best” or “superior” should be replaced with numbers and facts.
• If you are saying the same thing twice, once in text and once again in an icon, keep only one.

The principle is simple: something looks good when it is clear. And it is clear when one screen equals one message.

Category-specific nuances: fine-tuning mobile readability

Apparel and footwear

Texture and fit matter most. Use large photo areas, a neutral headline, and markers about fabric, care, and fit. Keep text away from transitions in light.

Electronics

Dark scenes and reflective materials require special contrast checking, especially in dark mode. Show figures such as Wh, dB, or GHz prominently, but do not make them shout.

Home and kitchen

Light backgrounds tend to swallow thin letterforms. Use heavier font weights and increase font size by 10–15%.

Sports and outdoor

Motion creates visual noise. Use less decoration, more breathing room, and let the numbers act as the hero of the frame, while still staying within the headline scale.

Product gallery strategy as a sequence: how to connect the frames into a story

• Hook — one strong benefit or use scenario
• Proof — material, technology, or a real test
• Comparison — three to four objective criteria such as weight, noise, capacity, or lifespan
• Objection handling — “washes in 60 seconds,” “2-year warranty”
• Variants and bundle contents — only what helps the shopper choose, no cluttered collages

This order is repeatable, scalable, and keeps the eye moving on mobile.

“Before / After” without illusion: how to do it honestly

If you show a before/after comparison, do it like this:

• on a secondary callout image, not on the main image
• at the same scale and in the same lighting
• with minimal labels, two to three words, no slogans
• with facts, meaning numbers or measurable data, not “better” or “worse”

A 10-minute audit: thumbnail checklist

• Reduce each frame to 160–200 px. Is the message visible within one second?
• Headline at least 3%, labels at least 2%, margins 4–6%.
• No more than three markers and no paragraphs.
• Contrast pairs checked in dark mode.
• Text is not placed over glare or texture.
• File naming is consistent: SKU_TOPIC_V01.jpg and A/B tests are saved as separate files.

Common mistakes and quick fixes

• Font too small. Raise it to the 3% / 2% rule and check again at 160 px.
• Noisy background. Add a plate or move the text into a quiet zone.
• Too many icons. Keep only two or three obvious ones. Move the rest into text or a separate frame.
• Weak contrast. Change the contrast pair and add a 2–4% inner shadow if needed.
• Two messages in one frame. Split them into two screens.
• Messy margins. Keep a 4–6% frame and align everything to the grid.

A/B approach: how to test cleanly

• Change only one variable at a time: headline size, contrast pair, or number of markers.
• Do not change price, coupon, and listing title at the same time.
• Keep the test window short, but stable enough in terms of traffic.
• Watch not only gallery CTR, but also depth, meaning whether users continue scrolling to frames 4–5.

Production workflow: keeping the process under control

• Mini style guide by category. Fonts, sizes, contrast pairs, grid, and examples of what works and what does not.
• Plate library. Three to four proven options in brand colors.
• Callout image templates. A few reusable patterns for “two benefits” and “one number plus labels.”
• Readability control strip. A set of test thumbnails the team uses to check readability.
• Versioning. SKU_TOPIC_V01/V02, A/B tests as _A/B, not files named final_final_NEW(2).
• Roll out winners. Apply successful solutions to neighboring SKUs.

Where MujoAI helps: speed and consistency

Every principle in this article can be executed manually. But once you are working across dozens of SKUs, speed and consistency become critical. MujoAI:

• builds secondary callout images with mobile-first logic baked in, including type size, grid, and contrast
• maintains a consistent visual language across categories and across the brand
• speeds up comparison and before/after production without overload
• prepares clean export packages for marketplaces and CMS workflows

A small package is a practical starting point: build 2–3 listings, review CTR and scroll depth, then scale the successful patterns. See the details on the homepage and on the pricing page.

FAQ — brief and human

Which font should I choose?

A sans-serif with a high x-height and open forms. The name of the family matters less than readability at 160–200 px.

How much text is acceptable on one frame?

One single-line headline plus two or three one-line markers. Everything else belongs in the description or on the next frame.

Can I use my brand color?

Yes, if the color pair still gives strong contrast in thumbnail view and at lower screen brightness.

Is there a universal font size?

No. Use percentages: headline about 3%, labels about 2% of the long side of the source image.

Where should the text be placed?

In quiet zones. If the background is complex, place it on a lightly transparent plate.

How do I know whether the contrast pair holds up?

Lower the brightness and look at it in daylight. If the message reads instantly, it works.

How large should hero numbers be?

Slightly larger than the headline, but still within the grid and without shouting.

How often should callout images be updated?

When you have a real growth hypothesis: a new hook, a simpler structure, a different contrast pair. Test on 2–3 SKUs.

What matters more, the photo or the text?

The photo captures attention. The text locks in meaning. On mobile, they only work properly together.

Final takeaway: discipline instead of “taste”

To read in thumbnail view means to grasp structure and meaning within a second. Good annotated/callout images are not simply more attractive. They are clearer: one screen, one message, type sized by percentage, contrast without visual dirt, and a grid without random spacing decisions. Apply these rules to two or three SKUs and you will see clicks return and conversion stabilize.