UI Design Tip #7: Using Font Size, Weight & Color for Clear Visual Hierarchy

Requirement Goal

Development requirement: Add a release card for Order Service v1.8.0 that simultaneously displays the pre‑release environment, source pipeline, and deployment impact description.

This lesson teaches how to combine font size, weight, and color to highlight key information while keeping explanatory text readable.

Initial Implementation

The first version used only font size to differentiate: version title at 46 px, impact description at 15 px. Target environment and source pipeline were also shown.

Figure 1: Large font‑size gap between version title and impact description.

Problem Analysis

3.1 Main Issues

The version title is very prominent but consumes excessive space; the impact description is noticeably small. Users notice the version first but may need to zoom to read the operational impact.

Importance cannot be inferred from font size alone. Deployment impact, though placed after the version, may determine whether the user proceeds.

3.2 Design Principles

Font size is only one way to establish hierarchy. Heavier font weight can emphasize primary content; softer text color can signal secondary status, reducing reliance on extreme font sizes.

Ensure all text is readable first, then establish primary/secondary relationships. If a warning involves serious consequences, its emphasis should be judged by risk level, not uniformly relegated to a muted style.

Optimized Implementation

4.1 Text Role Assignment

Assign roles to service name, version, environment, and description. Title uses an appropriate size with increased weight; description returns to a readable size, with color indicating sequence.

In this example, version size changed from 46 px to 32 px, description from 15 px to 22 px. Values are for the current canvas; real interfaces must be validated under final display conditions.

4.2 Style Implementation (CSS)

.version {
  font-size: 32px;
  font-weight: 700;
}
.impact {
  font-size: 22px;
  line-height: 1.6;
  color: #687783;
}

Actual font‑weight rendering depends on the typeface. When Chinese characters, numbers, and version numbers are mixed, observe stroke weight, line height, and wrapping rather than comparing stylesheet values alone.

4.3 Risk Checks

Keep card width fixed; test with longer version numbers, multi‑line descriptions, and critical warnings to verify the title does not crowd the description.

Routine source information can be moderately de‑emphasized, but key risks must remain visually distinct. After any background change, re‑check auxiliary text color combinations.

Acceptance Criteria

Figure 2: Moderate font sizes combined with weight and color to distinguish hierarchy.

After adjustment, the version title shrinks and the impact description grows. Focus is on the relationship between emphasis and explanation; final readability must still be verified at actual size.

☐ Service, version, and target environment are clearly distinguishable.

☐ Description text reads normally at the final display width.

☐ Important risks are not weakened by a uniform secondary style.

Application & Exercise

Keep card width and content unchanged; produce two hierarchy versions: one relying mainly on font size, another combining size, weight, and color.

Deliver two sketches explaining how emphasis is formed and identifying which descriptions must not be weakened merely because they appear later in reading order.