Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change font from Altinn-DIN to Inter #1148

Closed
16 tasks done
Tracked by #339
, #1660
...
hannefinnoy opened this issue May 10, 2023 · 2 comments · Fixed by #1173
Closed
16 tasks done
Tracked by #339
, #1660
...

Change font from Altinn-DIN to Inter #1148

hannefinnoy opened this issue May 10, 2023 · 2 comments · Fixed by #1173
Assignees
@bjosttveit
Labels
fe-v4 Issues to be solved before v4 goes gold

Comments

@hannefinnoy
Copy link

hannefinnoy commented May 10, 2023 •
edited by bjosttveit
Loading

Description

Felles designsystem uses the font Inter due to better readability than Altinn-DIN (as well as other reasons). Altinn app frontend should also update to Inter.

Additional Information

No response

Tasks

Swap font to Inter
Visual test - does it look okay?
Solve any issues that are not acceptable

Acceptance Criterias

We should try to have as few variations of the font as possible. I will probably miss some variants, but in time we should change to DS typography components. Should help making the design more uniform.

Headers
Our headers look a little weird with different font weights. This is a suggestion that wont change them that much, but will be closer to designsystem sizes.
Skjermbilde 2023-06-21 kl 13 11 42

  • All headers have font-weight: 500
  • H2: font-size: 1.75rem
  • H3: font-size: 1.5rem
  • H4: font-size: 1.25rem
  • Group header (H2, the one that is "referanser" in the testapp) and header for error summary should have same size and weight as standard H2 and summary header (H2)

Paragraph and labels

  • Label, change to font-weight: 500
  • description should have the same weight as bodytext. Change to Font-weight: 400
  • description beneath input/legend should have the color defined in the ds: semantic/text/neutral/subtle``#4B5563

Receipt

  • Change title to font-weight: 500
  • Change "Dine svar" to font-weight: 500

Other

  • Remove monospace variant of inter from textarea. (Let me know if this is a designsystem issue)
  • Attachment component bold texts should be reduced to font-weight: 500
  • summary answers, change to font-weight: 500
  • Likert title, change to font-weight: 500
  • Change name beside the user icon to font-weight: 500
  • Change font color to the same as the design system. Now we have both as we use some components from DS. If this is a larger task we can make a sepparate issue. Change to semantic.text.neutral.default #1E2B3C
    Note: Legend/description for radio and checkboxes will be fixed in the design system

Altinn app frontend uses the Inter font.
@hannefinnoy hannefinnoy added the status/draft Status: When you create an issue before you have enough info to properly describe the issue. label May 10, 2023
@bjosttveit bjosttveit self-assigned this May 16, 2023
@bjosttveit bjosttveit mentioned this issue May 19, 2023
Merged
21 tasks
@RonnyB71 RonnyB71 removed the status/draft Status: When you create an issue before you have enough info to properly describe the issue. label May 22, 2023
@bjosttveit
Copy link
Member

Setting labels to fontweight 500 will not match with https://digdir.github.io/designsystem/?path=/docs/kjernekomponenter-fieldset--docs

@bjosttveit
Copy link
Member

bjosttveit commented Jul 3, 2023 •
edited
Loading

@Febakke @hannefinnoy
I created a new preview release after some updates: https://github.com/Altinn/app-frontend-react/releases/tag/v3.65.1-interpreview2

I think it is starting to get ready.

@olemartinorg olemartinorg mentioned this issue Sep 12, 2023
Closed
@olemartinorg olemartinorg added the fe-v4 Issues to be solved before v4 goes gold label Sep 25, 2023
@RonnyB71 RonnyB71 mentioned this issue Nov 22, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@bjosttveit bjosttveit

Labels
fe-v4 Issues to be solved before v4 goes gold
Projects
Team Apps
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Switch to Inter font Altinn/app-frontend-react
4 participants
@olemartinorg @RonnyB71 @hannefinnoy @bjosttveit