Typography: Line-height and text container padding updates

[rtibbles]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Overview

Update line-height defaults across all paragraph and header text for content that can wrap to multiple lines. Recalculate default padding for text containers and buttons styled as links to ensure true total heights match Figma specs.

Complexity: Medium
Target branch: develop

Context

Typography is currently configured in lib/keen/styles/variables.scss with font sizes defined in rem() units. Line-height is not explicitly standardized — it varies per component, often set inline. The font stack uses Noto Sans loaded via FontFaceObserver.

KButton components styled as links (appearance: 'basic-link') have their own line-height (36px) that will need adjustment when line-height defaults change.

The Change

Update line-height values for paragraph and header text elements to match the Figma spec. This affects any text that can flow to multiple lines.

Recalculate padding for:

• Text containers (<p>, <a>, <h1>–<h6>, etc.) — outside padding needs to account for the new line-height
• KButton components styled as links — padding adjustments so the true total height matches the spec

The new line-height values and padding calculations should be derived from the Figma specs.

Out of Scope

• Single-line text elements where line-height changes are not applicable
• Icon buttons (KIconButton)
• Cross-product typography changes (Kolibri, Studio, KDP)

Acceptance Criteria

• Line-height updated for all paragraph text elements per Figma spec
• Line-height updated for all header text elements (h1–h6) per Figma spec
• Padding recalculated for text containers to account for new line-height
• Padding recalculated for KButton components styled as links
• True total heights of affected elements match Figma specs
• KDS documentation updated to reflect new typography defaults
• Visual regression tests updated/passing

References

• Kolibri Design System Figma
• Typography variables: lib/keen/styles/variables.scss
• KButton component: lib/buttons-and-links/KButton.vue

AI usage

This issue was drafted using Claude Code based on collaborative discussion of scope and requirements. All content was reviewed and approved before posting.