UI Design Font Sizes Only Set at 12, 14, 16 Pixels, Yet the Interface Still Looks Messy—Where Is the Problem?

Many UI designs look fine in terms of font size tiers—body text at 12px, secondary text at 14px, headings at 16px—but still look messy on real screens. The problem is usually not the number of tiers, but that these font sizes are not combined with line height, font weight, letter spacing, and color into a unified text hierarchy. To judge whether a text system is qualified, check whether the five dimensions of font size, font weight, line height, letter spacing, and color contrast work together, rather than merely comparing font size differences.

Why the Interface Still Looks Messy After Fixing Font Sizes

Font size is only a visible constraint on the surface. For the same text size, adjusting the Chinese line height factor from 1.3 to 1.8 can significantly change visual density; changing the heading font weight from 400 to 600 increases the visual weight by one level even without changing the font size. Therefore, fixing only a few numbers defines “size” but not “shape” or “breathing room.”

• Line height: Determines whether text blocks feel compact or loose, with a clear difference between long-form and short-form text;
• Font weight: The visual difference between 400 and 600 is sometimes more noticeable than a 2px font size difference;
• Letter spacing: Adding appropriate letter spacing to Chinese headings can make them look refined, while too-wide spacing in body text makes it harder to read;
• Color: Use gray-scale differences to distinguish primary from secondary information, avoiding eye-straining pure black across the screen.

If these items are not unified, even if font size tiers are correct, the “weight” of paragraphs will feel inconsistent, and the interface will naturally look messy.

Use the “Five-Dimension Text Checker” to Determine If Your Font Size System Qualifies

According to common project delivery practices in 2026, the person responsible for turning designs into styles usually first asks for a global text style sheet. Instead of making scattered annotations, verify using the following five steps:

1. Count tiers: The number of text levels that appear simultaneously in a product interface typically ranges from 3 to 5 (e.g., large heading/heading/body/secondary/caption). If it exceeds 5, consider merging;
2. Test line height: The line height multiplier for Chinese body text commonly ranges from 1.4 to 1.8. Use higher values for long-form text and lower values for short-form text;
3. Compare font weight: Headings should be at least one weight heavier than body text (e.g., 500/600 vs. 400). Secondary information can be lighter, but it is not recommended to go below 400 (light weights can look blurry on some devices);
4. Check letter spacing: Uppercase or numeric lists may benefit from increased letter spacing, but Chinese body text should not have added spacing or only minimal adjustment to avoid hindering readability;
5. Inspect contrast: Ensure sufficient luminance contrast between text and background, especially the common issue of light gray text that “looks elegant but is actually hard to read.”

These five steps do not check individual font sizes but the “context” in which they exist. If a tier reappears throughout the interface without unified line height, weight, and color, it will be hard to make it look “clean” no matter how many times you adjust it.

Common font size ranges for mobile and desktop are provided below (logical pixels), serving only as a starting point:

• Mobile Chinese body text commonly ranges from 14 to 16px, headings from 18 to 24px, and captions from 12 to 13px; the larger the screen, the higher the starting point;
• Desktop body text commonly ranges from 15 to 17px, headings from 20 to 28px, and captions from 13 to 14px;
• At the same font size, rendering may differ between Windows and macOS, and between iOS and Android; rely on actual screenshots for validation.

These are “experience ranges,” not standard answers. What truly needs to be unified is the relationship between hierarchy levels, not absolute values.

How to Arrange Heading, Body, and Secondary Text So It Isn’t “Flat”

An interface looks “flat” usually because all text shares similar weight, size, and color with no discernible gap. For example, body text at 14px and secondary text at 13px with only a slight gray-scale difference makes users perceive it as occasional color variation in a paragraph, not two distinct hierarchy levels.

• Between heading and body: A 2–4px font size difference, or a one-level weight difference, or both is recommended;
• Between body and secondary info: Secondary text can use smaller size plus lower contrast (e.g., gray #999 instead of #333), but not so small that it becomes illegible;
• Data-like numbers: Use tabular figures or increased letter spacing to keep digits aligned;
• Long-form reading: Increase font size slightly compared to short text, and increase line height accordingly to avoid a cramped feeling.

A good guideline: You should be able to distinguish headings, body text, and secondary text with a single glance. If you need a ruler to tell them apart, your hierarchy is too subtle.

From Design to Real Device: What to Check First When Delivering Font Sizes

In project delivery at Xiyue Company, a common situation is that 12px caption text in design files looks perfectly clear in Sketch/Figma, but appears blurry on some domestic Android browsers, and the line height gets compressed. If the client’s budget and timeline are tight, there is no time to redo the entire design system, so we first modify the three most frequently used pages in the design files and globally adjust the minimum font size from 12px to 13px and the line height multiplier from 1.5 to 1.6. This costs an extra round of layout adjustments on the first screen because the text height increases; if we had done real-device screenshot checks before the first delivery, this rework could have been avoided.

Based on common practices in 2026, at least the following items should be verified during delivery:

• Font loading: Whether the Source Han Sans/PingFang used in designs renders with the same glyphs on target devices;
• Font size conversion: Note the difference between logical and physical pixels; don’t hardcode font sizes as physical pixels on high-DPR screens;
• Line height inheritance: Whether paragraph-level line height is inherited by components; line height for text inside buttons often needs to be tightened separately;
• Minimum font size: For Chinese interfaces, caption text below 12px is not recommended (experience range) and should be verified on real devices;
• Screenshot comparison: Capture screenshots of the same set of text on mainstream iOS/Android/desktop browsers, compare side by side, and then finalize.

This step reduces most of the back-and-forth caused by “the design looks fine, but the real device is full of problems.”

Applicable Scenarios and Boundaries

This font size checking method is suitable for content-based, tool-based, and backend products, where reading efficiency is paramount and clear hierarchy is needed. It also helps small teams quickly align standards without a dedicated design specification.

Cases where it is not suitable: brand showcase pages, marketing campaign pages, and highly stylized visual key visuals, where breaking text hierarchy deliberately can create mood; data visualization dashboards also require design tailored to information density and should not directly apply body text line height. If your product does not involve extensive text reading, spending much time on refining the font size system may not be cost-effective; first unify three to four global text styles, then gradually refine.

Quotable boundary statement: Only when an interface is primarily for “reading” is a strict font size system necessary; for interfaces primarily for “viewing,” visual tension takes precedence over uniformity.

FAQ

If the font size is too small and hard to read, should I just enlarge the entire design?

Not necessarily. First try adjusting line height and font weight, e.g., increasing body line height from 1.4 to 1.6 and font weight from 400 to 500. This often improves readability more than increasing all font sizes by 2px.

Should mobile body text be 14px or 16px?

There is no fixed answer. The typical range is 14–16px (logical pixels). Choose 16px for long-form text or elderly users, and 14px for short text or dense lists; decide together with line height.

Why does the same font size look different on iOS and Android?

Different systems have different font metrics and default rendering methods; also, some Chinese fonts on Android have wider actual character widths. Base your decisions on real-device screenshots, not just design software previews.

Should I adjust font sizes for each page individually?

No. First create a global text style sheet (about five to eight entries), and set special settings only for large headings, data tables, etc. This makes overall consistency easier to maintain.

Next time you encounter a “messy-looking” interface, don’t rush to change font sizes first: shrink the screenshot to 50% and check whether the hierarchy is still clear; then verify item by item using the five-dimension checker before considering font size changes. For projects that need quick implementation, first ask the developer for a “text style sheet” to confirm line height and font weight, then start page-by-page optimization. This method is not applicable to purely visual marketing pages; avoid over-standardization that locks down creativity.