## Problem
There is a multitude of different //small// font sizes in the Vector 2022 skin ( a few large ones are inconsistent as well). From a design perspective, this undesirable because it affects the visual hierarchy of the page and adds to ambiguity in the design language.
From a technical perspective, this is undesirable because font-size units are used in other properties such as padding, heights etc, leading to inconsistencies across not just font-size, but spacing in general. This also makes it hard to calculate relative values like em's because of how font-sizes are inherited across elements.
### Catalogue of font sizes in Vector 2022
Computed font sizes based on the browser default 16px font size. //Starting from the smallest.//
| 11.76px |
| -- | --
| {F35473499} | {F35473504}
|12px| |
|--|--|
| {F35340911} | {F35340926}
| sidebar | footer
| 12.888px | |
|--|--
| {F35342947} | {F35342952}
| sitesub | mw-notify
|13px| |
|--|--|
| {F35340953} | {F35340967}
| Page toolbar | Page toolbar dropdowns
|14px| | | | | |
|--|--|--|--|--|--|
| {F35340985} | {F35340994} | {F35341023} | {F35341034} | {F35341050} | {F35341196}
| Search | Header dropdowns | language button | Table of contents | Sticky header dropdown | content `<H4>`
|16px|
|--|
| {F35341041}
| sticky header language button
#### Larger font sizes
|16.8px|21px| 24px|28.88px|
|--|--|--|--|
| {F35341208} | {F35341235}| {F35341259}| {F35341261}
| content `<H3>` | content `<H2>`| Sticky header page title| content `<H1>`
## Goal
- Define consistent font sizes for UI elements (preferably just two: small and normal)
- Define a consistent typographic scale for wiki content
- Convert font sizes and applicable sizes to rem's instead of em's (T261334).
## Proposal
TBD