Establishing a type ramp and vertical rhythm
Description
Doing quick search for font-size on the stylesheets results in 30 unique values (in pixels, rems, or percentages).
Reducing the number of different type sizes:
- Creates a more consistent experience
- Reduces the complexity for designers and developers, resulting in fewer errors and less technical/design debt
Establishing a proper type ramp improves contrast and readability, resulting in a much satisfying experience.
Proposal
Changes:
- Increase contrast between heading sizes, and between H1s and issue/merge request titles
- Increase base markdown font-size from 14px to 16px (read Your Body Text Is Too Small)
- Introduce an 8px grid, for all measures (sizes, spaces and strokes), and a 4px type baseline (read The 8-Point Grid, Intro to the 8-Point Grid System, and 8 point Soft Grids)
- Tweak line-heights, spacing and overall vertical rhythm according to the grid system
Measures
Content/markdown areas (including comments)
For the proposal to work properly, spacing around the text areas should also be revised. Screenshots were taken with pedroms/public-project#2 (closed)
| Current | Proposed |
|---|---|
 |
 |
User interface
| Current | Proposed |
|---|---|
 |
 |
Spec Files
- UI Typography: https://gitlab-org.gitlab.io/gitlab-design/hosted/gitlab-elements-spec-previews/#artboard22
- Markdown: https://gitlab-org.gitlab.io/gitlab-design/hosted/gitlab-elements-spec-previews/#artboard7
- Compact Markdown: https://gitlab-org.gitlab.io/gitlab-design/hosted/gitlab-elements-spec-previews/#artboard8
Links / references
Edited by Taurie Davis