1. Using fonts
Fonts come in two kinds: serif and sans-serif.
Serif: square letterforms with sharp edges and highly regular strokes, giving a comfortable, striking reading feel, with decorative strokes at the ends or beginnings of lines. Chinese examples: SongTi; English examples: Caslon.
Sans-serif: plain and simple, no decoration, visually equal, even black and white. iOS examples: PingFang in Chinese, San Francisco and Helvetica in English. Android examples: Source Han Sans in Chinese, Roboto in English.
The text on phones, web pages and in daily life is 98 percent sans-serif.
2. Using font sizes (explained at 2x scale)
Navigation bar main title: 40 to 36 px. Body (the main displayed content): 34 px. Secondary text (notes and content): 28 px (32 px). Auxiliary hint text (usually dates and times): 24 px. Icon text: 20 px. Large button text: 36 px.
3. Using text colours
Primary text: #333333. Secondary text: #666666. Secondary copy (notes and content): #999999. Auxiliary hint text (usually dates and times): #999999. Reversed (white) text: #FFFFFF.
The above is for reference only; actual visual results govern.
Want to talk through what you just read?
We work end to end, from product design to launch. Tell us about your scenario and we can start there.
Shenzhen XZS Technology Co., Ltd. · Tel 0755-82494862 · 13760424861