Mastering Font Line Height in Sketch: Proven Rules for Perfect Mobile UI

Preface

All typographic rules in this article are based on a 750×1334 px canvas (the 2× version), which is the resolution our team uses for design.

Background and Problem

Typography is a fundamental element of UI design; proper font layout improves readability and interaction efficiency. Ant Design recommends considering font family, primary font, size‑line‑height ratio, weight, and color. For Chinese, the system default fonts are PingFang SC on iOS and Noto Sans on Android, typically 28 px for mobile. Line height (the invisible box around text) is tightly linked to font size.

Designers often encounter inconsistent line‑height settings, leading to mismatched spacing during development hand‑off. This article discusses how to set line height correctly in Sketch.

Basic Rules for Single‑Line Font Line Height

For our TO.C visual system, we defined ten font sizes with corresponding line heights. The recommended primary font size is 28 px with a line height of 40 px. The general formula is:

h = s × 1.4 (where s ≥ 20 px is the font size). If the result has a decimal, round to the nearest even number.

Examples:

24 px → 24 × 1.4 = 33.6 px → round to 34 px

32 px → 32 × 1.4 = 44.8 px → round to 44 px

We recommend using 3–5 font sizes per system to keep the design restrained.

Design Practice

We tested various fixed line‑spacing increments (2 px, 4 px, 6 px, 8 px, 10 px) on common font sizes (24 px, 26 px, 28 px). The best reading comfort was achieved with:

24 px → line height 34 px + 6 px spacing = 40 px

26 px → line height 36 px + 8 px spacing = 44 px

28 px → line height 40 px + 10 px spacing = 50 px

In Sketch, setting multi‑line text to these heights aligns with the single‑line formulas, confirming the rule:

h₂ = s × 1.4 + n (where n ≥ 6 is an even number representing additional line spacing).

Design Verification

We applied the formulas to design drafts for the three font sizes and collaborated with developers to implement a demo on iOS and Android. The implementation confirmed that the calculated line heights satisfy typical mobile multi‑line text requirements.

Conclusion

Accurate line‑height settings require continuous collaboration between designers and developers. We summarized two general rules for single‑line and multi‑line text that can be adapted to other projects.

Appendix

Design elements follow predictable patterns; understanding the theory behind them helps bridge design and implementation.