This article explains the common line‑height inconsistencies between UI design and front‑end implementation, introduces the open‑source Fin Line‑Height Fix plugin for Figma and Sketch, and provides step‑by‑step usage instructions plus code examples for iOS, Android, and React Native.
The article introduces the Fin Line Height Fix Tool, an open‑source solution from NetEase’s Dolphin team that resolves visual fidelity problems caused by inconsistent font heights between design tools and implementation, offering Figma and Sketch plugins plus iOS, Android, and React Native code to ensure pixel‑level line‑height consistency and streamline designer‑developer collaboration.
The article explains why common CSS vertical‑centering tricks can leave pixel offsets when fonts differ, details how font metrics such as ascent, descent, and x‑height determine the true baseline, and provides a calculable vertical‑align offset method—while noting its metric‑gathering overhead and anticipating native Houdini support.
This article explains how to set accurate font line heights in Sketch for mobile UI design, presenting single‑line and multi‑line formulas, practical examples, testing results, and verification steps to ensure consistent visual alignment across iOS, Android, and front‑end implementations.
Discover how a simple Sketch plugin automatically adjusts line height to match iOS defaults, eliminating pixel‑perfect discrepancies and saving designers from tedious manual tweaks.
The article explores how front‑end typography standards—covering base font size, font‑scale formulas, and line‑height rules—can be derived from visual ergonomics, mathematical ratios, and practical engineering constraints, ultimately recommending 16 px as the optimal base size and a line‑height of font‑size + 8.
This article summarizes frequent CSS rendering inconsistencies across Android and iOS webviews, covering line‑height quirks, multiline ellipsis, badge implementation, image‑text layouts, adaptive width handling, inline‑block behavior, and simulated scrolling, while offering concrete code snippets and visual examples.
