cds-snc / cds-snc/platform-forms-client

Difference in size/hierarchy is not perceivable between H1 and H2

Open
#4,065 1 comment 0 reactions 1 assignee Claimed by @timarney View on GitHub
:vertical_traffic_light: Moderate app enhancement
Dominant language
TypeScript
Stars
46
Forks
16
Avg merge
1d 8h
Merged PRs (30d)
85

Description

## Description

H1 shows up smaller than H2 in form builder. Consider making these hierarchical/proportional as they will be in form.

In test, the difference in heading size does not help to visually indicate the level of hierarchy.
This, would also be the case for live form outputs.

## Steps to reproduce
1. Go to GC Forms staging
2. Create a form with a title, page title, H2 page text, and H3 page text.
3. Add a description and privacy statement with (H2, H3)
4. Go to test / preview the form
5. Go to Forms set-up panel > Translations
6. See difference between type size (especially between H1 and H2).

## Details
- **Browser**: Chrome
- **Operating system**: Mac
- **Environment**: Production
- **Language**: English/French
- **Viewport**: Desktop

## Expected behaviour
- Using formatting consistently
- Clear difference between different levels
- Usually font size helps distinguish between different header levels
https://design-system.alpha.canada.ca/en/components/heading/code/

## Screenshots or videos

Screenshot 2024-07-24 at 3.50.09 PM.png

Screenshot 2024-08-08 at 1.29.42 PM.png

Image

Image

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.