####Problem
Headings and body text in MPIC are not aligned with Codex's [[ https://doc.wikimedia.org/codex/main/style-guide/typography.html | Typographic styles ]] and [[ https://doc.wikimedia.org/codex/main/style-guide/constructing-forms.html | form standards ]].
####Solution
To make the tool look consistent with other wiki environments, we should apply the right properties to its different typographic styles.
Specifications are provided both as discrete values and Codex tokens. Using the latter is advice to ensure adaptable consistency:
**Update h1 titles' style**:
Font-size: 1.75rem (`@font-size-xxx-large`)
Line-height: 1.25 (`@line-height-xxx-small`)
Font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif (`@font-family-serif`)
Font-weight: 400 (`@font-weight-normal`)
Color: #f8f9fa [dark mode], #000 [light mode] (`@color-emphasized`)
{F57623669}
**Form section titles should display a h2 style**
Font-size: 1.5rem (`@font-size-xx-large`)
Line-height: 1.25 (`@line-height-xxx-small`)
Font-family:'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif (`@font-family-serif`)
Font-weight: 400 (`@font-weight-normal`)
Color: #f8f9fa [dark mode], #000 [light mode] (`@color-emphasized`)
{F57623649}
(It might also be worth evaluating whether form sections should actually be h2 headings, which would help improve the page's semantic structure and accessibility)
**Body text**
The base font-size of all body text (all non-title elements such as descriptions, labels, table contents, etc.) should be 0.875rem (`@font-size-small`) instead of the discrete 15px.
Labels included in the forms (fields, text inputs outside or inside modules, radio buttons, checkboxes) display incorrect colors on dark mode (#ebebeba3, #a2a9b1). In all cases, they should be #eaecf0 (`@color-base`).
####Acceptance criteria
[] MPIC's font styles are consistent with Wikimedia standards