Forbedre hvordan typografi og størrelser håndteres #662
Description
Overordnet beskrivelse
Vi ønsker å forbedre hvordan typografi defineres og brukes i Designsystemet, både i design (Figma) og i kode.
I dag finnes det flere utfordringer knyttet til hvordan typografi, font-tokens og størrelser er strukturert og brukt. Dette gjelder blant annet forskjeller mellom hvordan typografi fungerer i Figma og i kode, hvordan font-tokens eksponeres, og hvordan font-størrelser og størrelsesmoduser skaleres.
Målet er å gjøre typografimodellen mer konsistent, mer fleksibel og enklere å konfigurere, samtidig som vi unngår brytende endringer.
Dette arbeidet samler flere relaterte diskusjoner og issues om typografi, tokens og skalering i Designsystemet.
Relaterte saker:
Forventet resultat
Vi ønsker en tydeligere og mer fleksibel modell for hvordan typografi og størrelser håndteres i Designsystemet.
Dette innebærer blant annet:
- Mer konsistent håndtering av typografi mellom design og kode
- En klarere struktur for font-tokens
- Bedre støtte for konfigurerbare font-størrelser
- En mer fleksibel modell for størrelsesmoduser
- Mulighet for å tilpasse typografi uten å måtte gjøre brytende endringer
Resultatet bør gjøre det enklere å bruke Designsystemet på tvers av ulike behov, samtidig som konsistens og tilgjengelighet ivaretas.
Hvordan skal det fungere?
Typografi bør være definert på en måte som gjør den enkel å bruke både i designverktøy og i kode.
Noen områder vi bør utforske:
Typografi og font-tokens
- Vurdere bruk av mer generiske token-navn, for eksempel for font-weight
- Avklare om primitive font-tokens bør eksporteres til CSS
- Utforske om font-size, line-height og letter-spacing kan inngå i en samlet font-konfigurasjon
- Redusere forskjeller mellom hvordan typografi fungerer i Figma og i kode
Størrelsesmoduser og skalering
- Gjøre det mulig å legge til eller fjerne størrelsesmoduser
- Gjøre det mulig å konfigurere base-størrelse per modus
- Eksponere justering av step-størrelse i skalaen
- Gi mer fleksibel kobling mellom størrelsestokens og font-size-tokens
- la størrelsestokens og font-size-tokens skalere ulikt mellom moduser
Gjennomføring
Arbeidet kan deles opp i flere steg:
- Samle og analysere eksisterende utfordringer knyttet til typografi og størrelser.
- Definere prinsipper for hvordan typografi og font-tokens bør struktureres.
- Utforske forbedringer i modell for font-size-skala og størrelsesmoduser.
- Identifisere hvilke endringer som kan gjøres uten brytende endringer.
- Dokumentere anbefalt modell og oppdatere implementasjon der det er hensiktsmessig.
Arbeidet bør gjøres i tett samarbeid mellom design og utvikling, og ses i sammenheng med arbeidet med tokens og tematisering i Designsystemet.