Skip to content
UniKit

Article poster layout

Lay out a WeChat article cover: pick the title font size automatically for the 2.35:1 header ratio, wrap the lines, and return text rectangles with safe areas and an optional subtitle, for mixed Chinese and English.

Runs in your browserEvery computation happens in your browser — your data never leaves this device.

Title

Layout plan

Font size, line breaks and text rectangles.

Enter a title to lay out the poster

Canvas width: 0 · Canvas height: 0 · Title font size: 0 · Title lines: 0 · Canvas ratio: 0

What this tool does

  • Plan a WeChat header before designing: enter the title and get the font size, line breaks and rectangles to place in Canvas or a design tool.
  • Long titles shrink automatically instead of you guessing font sizes — the tool picks the largest size that fits the line limit.
  • Mixed Chinese and English: ASCII words are kept intact where possible so nothing breaks awkwardly.
  • Multi-size testing: change the canvas to 1200×500 or 1080×460 and compare how the same title lays out.

Example

Input

A newsletter headline

Output

画布:900 × 383 像素(比例 2.35:1,微信头图推荐 2.35:1)
安全区:左右边距 31 px,底部信息条 46 px
标题字号:72 px(上限 72,下限 24,自动取不超过 3 行的最大值)
标题折行(1 行,行高 94 px):
  1. A newsletter headline
标题矩形:x=31 y=31 w=838 h=94
文字是否溢出:否,标题完整放下
说明:文本宽度按「全角 1 em、半角 0.5 em」粗估,中英文混排时用于判断折行位置;像素合成由页面 Canvas 完成。

Text width is estimated at 1 em per full-width and 0.5 em per half-width character; the font size steps down until the lines fit.

Frequently asked questions

Why 900 × 383 by default?

WeChat's recommended header ratio is 2.35:1, and 900 ÷ 383 ≈ 2.350 is a common header size that satisfies the platform ratio while staying easy to re-crop. Any size from 200 to 4000 px is allowed and the actual ratio is echoed in the result.

How is the font size chosen?

It starts at the maximum (72 px by default) and drops by 2 px until the wrapped line count is within the limit and the total title height fits the available space, taking the largest size that satisfies both. If even the minimum (24 px) overflows, the result says the title should be shortened.

What width does the wrapping use?

Full-width characters (CJK and full-width punctuation) count as 1 em and half-width characters (ASCII letters, digits and punctuation) as 0.5 em. That is the usual approximation for estimating characters per line; the actual glyph widths depend on the font, which the result also notes.

Will English words be split?

Rarely. When the current character is an ASCII alphanumeric, the wrapper backs up to the nearest space and moves the whole word down; it only breaks hard when there is no space, such as a very long word or a URL.

How are the safe areas computed?

Side padding is 8% of the shorter canvas edge (31 px for 900 × 383) and the bottom 12% of the height is reserved for a byline or platform badge, so text never gets covered. Both ratios are relative, so they scale to other sizes.

Does it actually render an image?

This module only computes typography (font size, line breaks, rectangles). Pixel compositing happens in a Canvas on the page and nothing is uploaded; the numbers can also be fed straight into Figma, Photoshop or a script.

Keywords:推文海报公众号封面头图排版poster layout标题折行自动字号2.35:1

Related tools