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 https://gitlab.com/pedroms/public-project/issues/2
Current | Proposed |
---|---|
User interface
Current | Proposed |
---|---|
Links / references
Edited by username-removed-626804