docs: updated typography (#1863)

Co-authored-by: Barsnes <[email protected]>
Co-authored-by: Michael Marszalek <[email protected]>

apps/storefront/components/MdxContent/MdxContent.module.css

@@ -78,7 +78,7 @@
 }
 
 /* Styling for links */
-.content > p > a,
+.content > p a,
 .content > ul > li a,
 .content > ol > li a {
   color: var(--fds-semantic-text-action-default);

apps/storefront/pages/bloggen/2024/fluid-typography.mdx

@@ -0,0 +1,72 @@
+import { BlogArticleLayout } from '@layouts';
+import { Image } from '@components';
+import { Contributors } from '@blog';
+
+export default ({ children }) => (
+  <BlogArticleLayout
+    content={children}
+    heading='Dynamiske tekst-størrelser og hvorfor vi gikk bort fra det'
+    ingress='Det er mulig å bruke dynamiske tekst-størrelser uten breakpoints, men det medfører noen ulemper.  '
+    date='26. april 2024'
+    author='Designsystemet'
+    imageSrc='/img/bloggen/fluid-front.png'
+    imageAlt='Illustrasjonen viser at en 16px tekststørrelser på små skjermer øker gradvis opp til 18px på store skjermer.'
+    imageCaption='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.
+
+<Image
+  src='/img/bloggen/fluid-ex.png'
+  alt='Illustrasjonen viser at en 16px tekststørrelser på små skjermer øker gradvis opp til 18px på store skjermer.'
+  caption='Tekststørrelsen tilpasser seg automatisk bredden på skjermen.'
+  boxShadow={false}
+/>
+
+## 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.
+
+<br />
+
+Basert på [ulempene dette medførte](https://github.com/digdir/designsystemet/issues/1444), valgte vi å gå for en [statisk typografi-skala](/grunnleggende/designelementer/typografi#tekststørrelse) som standard for designsystemet.
+
+## Har du behov for dynamisk typografi?
+
+Har du behov for å benytte dynamisk typografi, opprett gjerne en [feature request](https://github.com/digdir/designsystemet/issues/new?assignees=&labels=%F0%9F%92%A1feature+request%2Cneeds+prioritization%E2%9D%97%EF%B8%8F&projects=&template=2feature_request.yml), 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](https://fluid-tokenization.vercel.app/)
+
+| Step   | viewport 320px        | viewport 1360px       |
+| ------ | --------------------- | --------------------- |
+| f-3    | 12.00px / 0.75rem     | 12.00px / 0.75rem     |
+| f-2    | 13.00px / 0.81rem     | 13.00px / 0.81rem     |
+| f-1    | 15.00px / 0.94rem     | 16.00px / 1.00rem     |
+| **f0** | **16.00px / 1.00rem** | **18.00px / 1.13rem** |
+| f1     | 18.00px / 1.13rem     | 21.00px / 1.31rem     |
+| f2     | 19.00px / 1.19rem     | 24.00px / 1.50rem     |
+| f3     | 21.00px / 1.31rem     | 28.00px / 1.75rem     |
+| f4     | 23.00px / 1.44rem     | 32.00px / 2.00rem     |
+| f5     | 26.00px / 1.63rem     | 38.00px / 2.38rem     |
+| f6     | 29.00px / 1.81rem     | 44.00px / 2.75rem     |
+
+<Contributors
+  authors={[
+    'Marianne Røsvik',
+    'Øyvind Thune',
+    'Michael Marszalek',
+    'Tobias Barsnes',
+    'Lasse Febakke Straum',
+  ]}
+/>

apps/storefront/pages/bloggen/index.mdx

@@ -20,14 +20,24 @@ export default ({ children }) => (
   description='Beskrivelse'
 />
 
+<BlogCard
+  title='Dynamiske font-størrelser og hvorfor vi gikk bort fra det'
+  desc='Det er mulig å bruke dynamiske font-størrelser uten breakpoints, men det medfører noen ulemper. '
+  date='26.april 2024'
+  href='/bloggen/2024/fluid-typography'
+  image='/img/bloggen/fluid-front.png'
+  author='Designsystemet'
+  featured={true}
+/>
+
 <BlogCard
   title='Hvordan Altinn Studio bruker Designsystemet'
   desc='Altinn Studio benytter seg av Designsystemet ved hjelp av fasademønsteret. Lær mer om hvordan!'
   date='27. mars 2024'
   href='/bloggen/2024/altinn-studio'
   image='/img/bloggen/altinnstudio-16-9.png'
   author='Altinn / David Øvrelid'
-  featured={true}
+  featured={false}
 />
 
 <BlogCard

apps/storefront/pages/grunnleggende/designelementer/typografi.mdx

@@ -1,8 +1,7 @@
-import { Figma } from 'mdx-embed';
 import { TokenIcon } from '@navikt/aksel-icons';
 
 import { MenuPageLayout } from '@layouts';
-import { Meta, TokenList, CodeSnippet } from '@components';
+import { Meta, CodeSnippet } from '@components';
 
 <Meta
   title='Typografi'
@@ -14,7 +13,7 @@ export default ({ children }) => (
     content={children}
     data={{
       title: 'Typografi',
-      date: '30. mai 2023',
+      date: '28. april 2024',
       icon: <TokenIcon />,
       color: 'blue',
     }}
@@ -62,40 +61,32 @@ font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */`}
 Tekststørrelse-variablene blir angitt i **rem**. Denne verdien er relativ til `html`-elementet sin `font-size`,
 og tar utgangspunkt i den vanligste standarden der `1rem = 16px`. Når vi angir tekststørrelse i rem, vil størrelsen være relatert til nettleserens standardstørrelse, og dermed også ta hensyn til om brukeren har valgt å oppskalere tekststørrelsen under innstillingene for tilgjengelighet i sin nettleser.
 
-### Fluid typography
+Vi har totalt 10 størrelser i designsystemet. 12, 14, 16, 18, 21, 24, 30, 36, 48 og 60px. Default tekststørrelse for `paragraph` er `medium` som tilsvarer 18px.
 
-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 breakpoint.
+| Steg   | Størrelse          | Paragraph\* | Ingress | Heading |
+| ------ | ------------------ | ----------- | ------- | ------- |
+| f-2    | 12px / 0.75rem     |             |         |         |
+| f-1    | 14px / 0.875rem    | xsmall      |         |         |
+| **f0** | **16px / 1.00rem** | small       |         |         |
+| f1     | 18px / 1.125rem    | medium      | xsmall  | xxsmall |
+| f2     | 21px / 1.313rem    | large       | small   | xsmall  |
+| f3     | 24px / 1.50rem     |             | medium  | small   |
+| f4     | 30px / 1.875rem    |             | large   | medium  |
+| f5     | 36px / 2.25rem     |             |         | large   |
+| f6     | 48px / 3.00rem     |             |         | xlarge  |
+| f7     | 60px / 3.75rem     |             |         | xxlarge |
 
-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. I Figma skjer denne størrelsesendringen når du har [aktivert ønsket viewport for din skisse](http://localhost:3000/grunnleggende/for-designere/kom-i-gang).
+\*`Paragraph`-størrelsene brukes også på `Label` og `ErrorMessage`.
 
-Størrelsene er generert ved hjelp av [Fluid Typescale Generator](https://fluid-tokenization.vercel.app/)
+### Hva med dynamiske tekststørrelser?
 
-| Step   | viewport 320px        | viewport 1360px       |
-| ------ | --------------------- | --------------------- |
-| f-3    | 12.00px / 0.75rem     | 12.00px / 0.75rem     |
-| f-2    | 13.00px / 0.81rem     | 13.00px / 0.81rem     |
-| f-1    | 15.00px / 0.94rem     | 16.00px / 1.00rem     |
-| **f0** | **16.00px / 1.00rem** | **18.00px / 1.13rem** |
-| f1     | 18.00px / 1.13rem     | 21.00px / 1.31rem     |
-| f2     | 19.00px / 1.19rem     | 24.00px / 1.50rem     |
-| f3     | 21.00px / 1.31rem     | 28.00px / 1.75rem     |
-| f4     | 23.00px / 1.44rem     | 32.00px / 2.00rem     |
-| f5     | 26.00px / 1.63rem     | 38.00px / 2.38rem     |
-| f6     | 29.00px / 1.81rem     | 44.00px / 2.75rem     |
+Dynamisk font-størrelse uten breakpoints var standard i Designsystemet det meste av Beta-perioden. Dynamiske font-størrelser, eller "_Fluid typography"_, medfører noen ulemper som gjorde at vi valgte å gå for en statisk font-skala i stedet.
 
-<Figma
-  title='Typography sizes in Figma'
-  url='file/vpM9dqqQPHqU6ogfKp5tlr/Designsystemet---Core-UI-Kit?type=design&node-id=28251%3A27106&mode=design&t=PjDKHWiYf5F8WaSi-1'
-/>
-
-## Tokens for typografi
-
-<TokenList type='typography' />
+    **Les mer om [Fluid typography, og hvorfor vi gikk bort fra det](/bloggen/2024/fluid-typography)**.
 
-## Takk til
+## Linjelengde
 
-Takk til [Victor Nystad](https://gist.github.com/vnys/ac50e8189dcae883a7fb09083fed83fa) som har vist oss hvordan vi kan oppnå en harmonisk typografisk skala basert på en pentatonisk skala og en formel, som også er beskrevet av [Spencer Mortensen](https://spencermortensen.com/articles/typographic-scale/).
+For best mulig lesbarhet for alle brukere, bør det ikke være mer enn 65-70 tegn per linje inkludert mellomrom. Da blir teksten mer innbydende og mindre overveldende, og er særlig viktig for blant annet brukere med lesevansker eller konsentrasjonsvansker. _Kilde: [uutilsynet.no](https://www.uutilsynet.no/veiledning/tekst-og-struktur/226)_
 
-Takk til gjengen bak [Fluid Typescale Generator & Design Token Integration](https://fluid-tokenization.vercel.app/table)
-som har laget et ekstremt praktisk verktøy for å opprette flytende typografiske skalaer
-og integrere dem i Figma gjennom [Tokens Studio](https://tokens.studio/).
+<br />
+<br />

apps/storefront/pages/index.mdx

@@ -57,6 +57,15 @@ export default ({ children }) => <FrontpageLayout content={children} />;
     gridTemplateColumns: 'repeat(3, minmax(min(100%, 320px), 1fr))',
   }}
 >
+  <BlogCard
+    title='Dynamiske font-størrelser og hvorfor vi gikk bort fra det'
+    desc='Det er mulig å bruke dynamiske font-størrelser uten breakpoints, men det medfører noen ulemper.'
+    href='/bloggen/2024/fluid-typography'
+    image='/img/bloggen/fluid-front.png'
+    featured={false}
+    tagText='Bloggen'
+    tagColor='first'
+  />
   <BlogCard
     title='Hvordan Altinn Studio bruker Designsystemet'
     desc='Altinn Studio benytter seg av Designsystemet ved hjelp av fasademønsteret. Lær mer om hvordan!'
@@ -74,15 +83,6 @@ export default ({ children }) => <FrontpageLayout content={children} />;
     tagText='Bloggen'
     tagColor='first'
   />
-  <BlogCard
-    title='Komposisjon med asChild i React koden'
-    desc='Nokre gonger må du kanskje byte ut ein komponent med ein anna, for eksempel Button skulle vore ein Link. Det er her asChild kjem inn i biletet.'
-    href='/grunnleggende/for-utviklere/komposisjon'
-    image='/img/placeholders/yellow_big_logo.svg'
-    featured={false}
-    tagText='For utviklere'
-    tagColor='second'
-  />
 </Section>
 
 <ImageBanner