Hopp til hovedinnholdGå til dokumentasjon for v0.63

Dynamiske tekst-størrelser og hvorfor vi gikk bort fra det

Det er mulig å bruke dynamiske tekst-størrelser uten breakpoints, men det medfører noen ulemper.

26. april 2024Designsystemet

Illustrasjonen viser at en 16px tekststørrelser på små skjermer øker gradvis opp til 18px på store skjermer.
Illustrasjonen viser at en 16px tekststørrelser på små skjermer øker gradvis opp til 18px på store skjermer.

Ved hjelp av “Fluid typography” kan vi skalere tekststørrelsen gradvis mellom en min og maks-bredde, i stedet for at det blir en brå oppskalering på et spesifikt brekkpunkt. Den lineære funksjonen tilnærmer seg ønsket størrelse jevnt over skjermens bredde.

Tekststørrelsene øker gradvis fra viewport-bredde 320px helt til det treffer maksbredden på viewporten som er satt til 1360px. En tekst på 16px vil f.eks øke til 18px på den største viewporten.

Illustrasjonen viser at en 16px tekststørrelser på små skjermer øker gradvis opp til 18px på store skjermer.
Tekststørrelsen tilpasser seg automatisk bredden på skjermen.

Fordeler

  • Du slipper å tenke på breakpoints, størrelsen på skriften blir automatisk tilpasset skjermen.
  • Når størrelsene ikke justeres på konkrete breakpoints unngår vi at det blir stykkevis og brå oppskaleringer.

Ulemper

  • Halve piksler. Figma runder nedover. Noen nettlesere runder oppover, andre nedover. Det gjør at ting ikke ser likt ut i Figma og i nettleseren.
  • Du kan føle du har mindre kontroll.
  • I Figma kan denne størrelsesendringen kun skje ved bruk av pluginen "Token Studio", når du har aktivert ønsket viewport for din frame.
  • Det er ikke gitt at et produkt vil bygge sitt produkt ved hjelp av dynamisk typografi. Dersom noen legger til moduler fra designsystemet i eget grensesnitt vil det ikke samsvare med skaleringen deres.

Basert på ulempene dette medførte, valgte vi å gå for en statisk typografi-skala som standard for designsystemet.

Har du behov for dynamisk typografi?

Har du behov for å benytte dynamisk typografi, opprett gjerne en feature request, så kan vi vurdere muligheten for å aktivere "Fluid" som et eget sett.

Størrelsene som ble brukt i den dynamiske skalaen ble generert ved hjelp av Fluid Typescale Generator

Stepviewport 320pxviewport 1360px
f-312.00px / 0.75rem12.00px / 0.75rem
f-213.00px / 0.81rem13.00px / 0.81rem
f-115.00px / 0.94rem16.00px / 1.00rem
f016.00px / 1.00rem18.00px / 1.13rem
f118.00px / 1.13rem21.00px / 1.31rem
f219.00px / 1.19rem24.00px / 1.50rem
f321.00px / 1.31rem28.00px / 1.75rem
f423.00px / 1.44rem32.00px / 2.00rem
f526.00px / 1.63rem38.00px / 2.38rem
f629.00px / 1.81rem44.00px / 2.75rem

For å kunne se riktige tekststørrelser i Figma var vi avhengige av å ha installert pluginen Tokens Studio for Figma og bruke denne til å aktivere riktig viewport. Videoen under viser hvordan pluginen ble brukt for å få riktige tekststørrelser for ulike viewports.

Designsystemet logo

Bidragsytere

Marianne RøsvikØyvind ThuneMichael MarszalekTobias BarsnesLasse Febakke Straum

Ønsker du å skrive for bloggen?

Ta kontakt med oss på #designsystemet i Slack kanalen vår.