Design Guides

How to Lay Out Chinese and English Copy in Cross-Border E-Commerce Images

From the perspective of commissioning graphic design, this article explains how to layer, align, and control font size and white space for Chinese and English copy in cross-border e-commerce images, with key points for material preparation and delivery checks.

Illustrative scene

First, Decide Which Is the Primary Copy and Which Is Secondary

When Chinese and English appear together in a single e-commerce image, the most common problem isn't whether the font looks good—it's failing to establish hierarchy first. A common approach: keep only one language for the main headline to carry the primary message, and use the other language as a reference or supplement with a noticeably smaller size and lighter weight. If both languages are set at the same size and weight, the layout becomes two parallel blocks of information, and viewers won't know which to read first.

Suppose a product main image needs to show both Chinese and English selling points. You can decide upfront: Chinese carries the main selling point, with English placed below or to the side as a reference—or the reverse, with English as primary and Chinese as secondary. This decision should be confirmed before design begins, not adjusted after layout is done, otherwise it's easy to end up redoing the entire layout.

When Mixing Chinese and English, Font Size and Line Spacing Can't Use the Same Values

Chinese and English differ in character height, letter spacing, and perceived line height. At the same font size, English often appears smaller and denser than Chinese. So when mixing the two, if you want them to have similar visual weight, English usually needs to be slightly larger than Chinese—or at least not simply inherit the Chinese font size.

The same applies to line spacing. Tight line spacing in English can feel cramped, while loose line spacing in Chinese can feel scattered. A practical approach: use relatively tight line spacing for Chinese paragraphs and slightly looser spacing for English paragraphs. If both languages alternate within the same block, set a baseline using one language first, then fine-tune the other so both appear at the same level—rather than one section looking noticeably more crowded.

Specific values depend on the typeface, font size, and layout width. There's no need to chase a fixed set of parameters. The key is to make both languages visually sit at the same level.

Alignment Should Be Consistent—Don't Use Different Rules for Chinese and English

A common source of confusion in mixed Chinese-English layouts is left-aligning Chinese while centering English, or centering Chinese while left-aligning English. When the two languages use different alignments, the layout looks loose and boundaries become hard to control.

A more reliable approach: use the same alignment for both Chinese and English within the same block. Left alignment suits copy with more information that requires a reading order; center alignment suits short phrases, main headlines, or emphasis at the center of the layout. If English is much longer than Chinese, left alignment usually makes it easier to control overall boundaries. If both languages are short, center alignment works too, but ensure the white space on both sides is symmetrical.

Also, avoid breaking English words arbitrarily. Splitting a word across two lines hurts readability and makes the whole paragraph look uneven. When laying out, prioritize adjusting the text box width or font size rather than forcing word breaks.

White Space and Margins Should Be Based on the Longest Line

When mixing Chinese and English, the character counts differ, and the same sentence can vary greatly in length after translation. If you set the layout based on Chinese length first, the English version may overflow—and vice versa.

The solution: confirm the final Chinese and English copy first, then set the text box width and margins based on whichever is longer. Leave a safe distance between the image edge, product edge, and text to avoid text touching the edge or overlapping the product. E-commerce images are ultimately cropped or scaled, so margins that are too tight can cause problems after cropping.

If the copy lengths differ significantly, consider breaking the English into shorter lines or moving one language to a secondary position—rather than forcing both into the same text box.

What Materials to Prepare Before Commissioning

To get the layout right the first time, the client should ideally provide the following when submitting a request:

  • Final Chinese and English copy, indicating which is primary and which is secondary;
  • Product images or confirmed visual assets, along with the intended usage scope;
  • Brand fonts or existing font guidelines; if none, describe the desired feel;
  • Final usage and size requirements for the images, such as which platform they're for and whether multiple sizes are needed;
  • Whether editable files are needed, and who will make future edits.

If the Chinese and English copy isn't finalized, the probability of repeated text changes during layout is high. Finalizing copy first and then laying out is usually more time-efficient than editing while laying out.

What to Check Upon Delivery

After receiving the design draft, check the following:

  • Is the hierarchy between Chinese and English clear? Is the first thing you see the intended primary copy?
  • Are the font sizes, line spacing, and alignment of both languages coordinated? Is one side noticeably more cramped or more scattered?
  • Are there any broken English words or inappropriate line breaks in Chinese?
  • Does any text touch the edge, overlap the product, or risk being cut off after cropping?
  • Are you receiving final images, editable files, or both? If editable files, are the fonts and layers convenient for future edits?
  • If the images are for printing or packaging labels, confirm output requirements with the printer, including dimensions, bleed, color mode, and file format.

If you plan to edit the copy yourself later, confirm in advance whether the fonts in the editable files are available, to avoid layout changes from font substitution when opening. For related design services, see Graphic Design Services.

Frequently Asked Questions

Must Chinese and English always appear together? Not necessarily. If image space is limited, or the target audience mainly uses one language, you can keep only one and place the other on the detail page or in supporting text. Whether to include both depends on the actual use case.

Does English always need to be larger than Chinese? Not absolutely. Whether to adjust font size depends on the typeface and visual effect. The key is to make both languages appear at the same level, not to mechanically set one larger than the other.

Can I use machine translation results directly for layout? You can use translation results as placeholders first, but it's best to confirm the final copy before formal layout. Translation length and phrasing affect the layout, and if placeholder copy differs greatly from the final copy, the layout may need to be redone.

03 /

From insight to practice

Content planning
01

Content planning

Responsive pages
02

Responsive pages

Ongoing operations
03

Ongoing operations