Boost Mobile Reading Comfort: UI Typography Tricks for Faster, More Attractive Content

According to the 2020 National Reading Survey by the China News Publishing Research Institute, 79.3% of Chinese netizens have experienced digital reading, with 76.1% using mobile phones, making mobile reading the dominant mode.

For Baidu Mobile, which serves hundreds of millions of daily readers, the reading experience is crucial.

Research Approach

Transitioning from paper to screen reading requires rethinking font, spacing, and punctuation handling. By studying traditional Chinese typesetting, we adapted these principles to UI design to improve the Baidu Mobile article layout.

Screen vs. Paper Reading

Reading habits change with the medium; on screens users tend to skim, confirm keywords, and read non‑linearly rather than read every word.

Design Differences

UI design differs from print in two main ways: (1) screens enable interactive features that enhance immersion; (2) UI layouts are less controllable due to fragmented screen sizes and flexible content, making precise replication of print designs difficult.

Design must avoid directly copying print rules and consider the fluid nature of screens.

Design Goals

The redesign targets the Baidu Mobile article landing page, aiming to improve content readability, reading efficiency, and visual attractiveness.

The CEA reading‑experience model evaluates comfort, efficiency, and attraction.

Comfort: low visual load, moderate information density.

Efficiency: highlighted key information, strong intuitiveness.

Attraction: aesthetically pleasing design.

Our goals are to enhance content readability, boost reading efficiency, and improve page aesthetics.

Optimizing Readability

Choosing Screen‑Friendly Fonts

Screen fonts differ from print fonts due to resolution limits. We prioritize fonts with enlarged central structures and simple strokes to improve legibility.

We also ensure the chosen fonts are the default on users’ devices.

Choosing More Complete Font Weights

Mobile reading often involves scanning and keyword confirmation. While bold and secondary headings help highlight information, some Android devices exhibit glyph‑clipping when heavier weights are used.

Font weight defines the thickness of glyphs within a font family. When a requested weight is unavailable, CSS falls back to the nearest weight, which can cause visual issues.

On low‑resolution Android devices, the limited weight options caused unexpected boldness and glyph‑clipping.

We reordered the font‑family list to prioritize fonts with richer weight sets on Android, ensuring proper bold rendering.

Improving Reading Efficiency

Optimizing Letter and Line Spacing

Spacing critically affects reading speed. We experimented with font size and line‑height multipliers, conducting eye‑tracking tests and user interviews. The acceptable line‑height range was found to be 1.50–1.70.

We set letter spacing to zero and increased line spacing to 1.70× the base line number.

Adapting Paragraph Spacing to Font Size

For long articles (≈600–700 words, about two screens on an iPhone 11), we adjusted paragraph spacing proportionally to font size, preventing cramped or overly sparse layouts.

Enhancing Visual Attractiveness

Traditional Chinese typesetting emphasizes consistent character spacing, line spacing, and punctuation. Modern UI often neglects these rules, leading to uneven visual density.

Optimizing Titles

We standardized punctuation in titles to half‑width characters and reduced unnecessary punctuation width, preserving rhythm while highlighting content.

Preventing Punctuation at Line Start/End

Chinese rules forbid punctuation at line boundaries. Implementing the “push‑out” method in UI is costly, so we adopted a simplified “push‑out‑only” approach, moving a character to the next line when a punctuation would appear at the start.

Compressing Consecutive Punctuation

When two or more punctuation marks appear consecutively, we reduce their combined width (e.g., from 2 char widths to 1.5 or even 1 char width) to avoid visual gaps.

In code, we set consecutive punctuation to half‑width and shrink their occupied space.

Complete Design Solution

The redesign consists of three parts:

Comparing screen and print fonts, optimizing font families and weight order to improve readability.

Adjusting letter, line, and paragraph spacing based on eye‑tracking and usability tests to boost reading efficiency.

Applying Chinese typographic standards (punctuation rules, micro‑spacing) to enhance visual appeal and attraction.

Project Summary

The redesign enhanced the Baidu Mobile article page by refining fonts, spacing, and punctuation at both macro and micro levels, bringing screen reading closer to the quality of paper reading. As a widely used Chinese news product, we have a responsibility to revive excellent typographic traditions and improve the overall reading experience.

Future work will continue to study typographic standards and further refine the UI for even better screen‑reading experiences.