search

swisspost / design-system

The Swiss Post Design System pattern library for a consistent and accessible user experience across the web platform.
https://design-system.post.ch
Apache License 2.0
106 stars 13 forks source link

H5 on xs Viewport differs from Figma #2609

Closed paavo closed 3 months ago

paavo commented 3 months ago

H5 on xs Viewport (<400px) is defined as 16px in Figma.

But it will be set to 14px here: https://github.com/swisspost/design-system/blob/4b3e7f924fbc8488fca970626a8b55bf84306c12/packages/styles/src/variables/_heading.scss#L33

Figma (320px Viewport) image

What is correct? @gfellerph

gfellerph commented 3 months ago

Hey @paavo, thanks for opening an issue. I think it's a mistake - fix incoming.

paavo commented 3 months ago

Hey @paavo, thanks for opening an issue. I think it's a mistake - fix incoming.

Thanks @gfellerph.

What about H6 Font-Size? (not documented in figma) https://github.com/swisspost/design-system/blob/cd85514b49b8c4f5e440b1a4548c75b2bcb23140/packages/styles/src/variables/_heading.scss#L39

gfellerph commented 3 months ago

That's 14px as well

paavo commented 3 months ago

That's 14px as well

H6 on XS should be 16px or 14px? @gfellerph

gfellerph commented 3 months ago

@paavo h6 on XS is 14px since it's already 14px between 420 and 640. https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=6424%3A29869&mode=design&t=ih4D19TeGzLf5tiz-1

paavo commented 3 months ago

@paavo h6 on XS is 14px since it's already 14px between 420 and 640.

Got that. So bodytext will be bigger than headline on Mobile?

XS H6 14px Bodytext 16px

rouvenpost commented 3 months ago

Hello Paavo, H6: Title 14 px Bold Subtitle 14px Light Body 12px Regular