Building a Reusable Typography Scale: From Ad-hoc Font Sizes to Systematic Roles

1 Requirements Goal

The goal was to unify font-size roles for titles, results, and source information in a pipeline detail view, eliminating local font sizes that differed by only one or two pixels.

2 Initial Implementation

The first version assigned separate font sizes to each text element: 35px for title, 25px for name, 27px for result, 23px for commit, and 26px for duration. These similar but distinct values created visual inconsistency and maintenance overhead.

Figure 1: Each text segment used a slightly different font size.

3 Problem Analysis

3.1 Main Issues

Many font sizes were used without clear mapping to distinct purposes. When the same type of text moved to another card, developers tended to tweak it by another pixel or two, increasing maintenance cost and making hierarchy unstable.

3.2 Design Principles

Define text roles first, then choose a limited set of font sizes. Smaller steps can keep necessary intermediate values; larger headings need clear separation. Mathematical ratios provide a starting point, but actual UI context requires adjustment. Not every page must use all scale entries; new content should prefer existing roles.

4 Optimization Implementation

4.1 Role Consolidation

The example converges to three roles: Title 34px, Body 26px, Meta 22px. The conclusion shares the Body size but uses bold weight for emphasis. Each role's purpose is documented so future additions (e.g., error summary, stage info) can be assigned to the correct tier.

4.2 CSS Implementation

.pipeline {
  --text-title: 34px;
  --text-body: 26px;
  --text-meta: 22px;
}
.type-title { font-size: var(--text-title); }
.type-name, .type-result { font-size: var(--text-body); }
.type-result { font-weight: 700; }
.type-commit, .type-duration { font-size: var(--text-meta); }

These sizes reflect the design canvas; the final product should adjust role parameters to actual reading conditions.

4.3 Computed Size Verification

Check final rendered font sizes in the browser, especially inside nested cards and modals. When using em, parent changes affect children: a 20px parent with 0.875em yields 17.5px, potentially drifting from the intended tier. For stable tiers, use px or rem and verify root font size and user settings. Decide per property whether relative units are appropriate.

5 Acceptance Verification

Figure 2: Font sizes reused by title, body, and meta roles; conclusion differentiated by weight.

The adjustment removed ambiguous near-duplicate values while preserving relationships between roles.

☐ Same-role text references the same tier.

☐ Clear hierarchy exists between conclusion and meta information.

☐ In nested components, computed font sizes still match the intended roles.

6 Application & Exercise

Audit actual font sizes on the pipeline page, group by purpose, and merge similar values. Then assign a role to a new error summary. Deliver a font-size role table documenting retained tiers, their purposes, and whether new content truly requires a new tier.