Design system part 2: Typography
Continuing the series on design systems, today I will share about Typography.
When choosing fonts for web/app design, we need to consider factors such as readability, cross-platform compatibility, and brand style. Below are some commonly used Sans-serif and Serif fonts for web/app design.
Sans-serif (modern, easy to read on screen):
Roboto (Google) → the most popular on Android, modern, easy to read.
Open Sans → friendly, neutral, often used for UI.
Lato → sleek, soft, suitable for modern apps or websites.
Inter → optimized for UI/UX, especially balanced numbers and letters.
Helvetica Neue → classic, simple, used by many major brands.
SF Pro (San Francisco) → default font on iOS/macOS, professional and clear.
Serif (formal, classic, often used for long text)
Merriweather → easy to read on screen, suitable for blogs, online newspapers.
Georgia → a friendly serif font for the web, a replacement for Times New Roman.
You can also combine two fonts for your design project by mixing two Sans-serif fonts or Serif + Sans-serif. After selecting the appropriate font, we next need to choose the font weight (thickness of the font). I usually choose 2 font weights when designing web/apps, common combinations are: Bold - Regular; Semi Bold - Regular or Medium - Regular. Some designers use up to 4 font weights in their designs, but I find this unnecessary as using too many font weights only complicates the design.
Next, we need to choose the font size; you can refer to the Typescales plugin to generate different sizes. This plugin has many Type Scales such as:
Minor Second (1.067): Very small, font levels close together → suitable for a refined text system with minimal variation.
Major Second (1.125): Slightly larger, commonly used in UI for gentle hierarchy, easy to control.
Minor Third (1.2): Balanced ratio, popular for web/apps as it creates hierarchy without excessive difference.
Major Third (1.25): Stronger, suitable for headings – clear content, creates good emphasis.
Golden Ratio: ½ Increments (1.309): Based on the golden ratio but “divided” → still harmonious, but easier to apply than the original Golden Ratio.
Perfect Fourth (1.333): Quite a large ratio, creates a clear distinction between heading and body text.
Augmented Fourth (1.414): Very strong, often used for typography leaning more towards art/design than practical UI.
Golden Ratio (1.618): Famous golden ratio, creates a type system with high contrast, very beautiful for artistic designs, but sometimes too “dramatic” for compact UIs.
If creating an app or website with a lot of text → use Minor Third (1.2) or Major Third (1.25) for clarity and readability. If designing a landing page with an aesthetic focus → use Perfect Fourth, Golden Ratio for strong visual effects. If a very tidy UI is needed (dashboard, app tool) → use Minor Second or Major Second.
After selecting the font and typescale, we need to set up the line height for each font size. Line height is the space between the bottom of the text line above and the bottom of the text line below, as shown in the image. When setting line height, keep in mind that as the font size increases, the line height should decrease. The practical rule for setting line height is as follows:
Heading (H1 – H6)
Line height: 100% - 130%
Reason: headings are usually short, need to be compact to create a solid block.
Body text (paragraph, main content)
Line height: 140% - 160%
Reason: long text needs space for the eyes to move easily, not to feel “suffocated.”
UI elements (button, label, menu, form…)
Line height: 120% - 140%
Reason: ensures text is balanced within the box, not too cramped, not too loose.
Next, we need to set up letter spacing for the font. Letter spacing here is the space between the characters of the text; as the font size increases, its letter spacing should decrease to avoid the text appearing disjointed. This is different from kerning: kerning adjusts the space between a pair of letters, while letter-spacing applies uniformly to the entire text. The rule for setting letter-spacing is as follows:
Heading (H1 – H6)
Letter spacing: -5% → -1%
Reason: headings are usually large, reducing letter spacing to make the text compact and solid.
Body text (paragraph, main content)
Line height: -2% → 0%
Reason: body text usually does not require letter spacing adjustments or only needs minor adjustments.
Finally, we have completed the typography setup for the design project with the establishment of font weight, font size, line height, and letter spacing. This typography setup is based on my design experience; you can consider it a method for reference.
