diff --git a/storybook/storybook-docs/src/font.stories.mdx b/storybook/storybook-docs/src/font.stories.mdx new file mode 100644 index 0000000000..2b600e3348 --- /dev/null +++ b/storybook/storybook-docs/src/font.stories.mdx @@ -0,0 +1,48 @@ +import { Meta, Typeset } from "@storybook/blocks"; + + + +# Lettertype + +We gebruiken het lettertype Amsterdam Sans. + +Dat is een letterfamilie met een helder, open tekstbeeld dat goed bij de Andreaskruisen past. +Het lettertype is zowel offline als online goed leesbaar. +Daarom zetten we het voor alle communicatiemiddelen in. + +In deze zin zie je hoe alle letters en cijfers eruit zien: + + + +## Installeren + +Werk je met npm, neem dan ons package `@amsterdam/design-system-assets` op in je dependencies. +Vervolgens importeer je `@amsterdam/design-system-assets/font/index.css` aan het begin van je stylesheet. + +Je kunt het lettertype ook zelf hosten en opnemen in je applicatie. +Vraag het dan aan via het formulier hieronder. + +Als het helemaal niet mogelijk is Amsterdam Sans te gebruiken pas je het lettertype Arial toe, of het generieke sans-serif lettertype van het apparaat. +In alle gevallen voer je die alternatieven op voor als het downloaden van het font voor de gebruiker niet lukt, of terwijl dat bezig is: + +```css +.class { + font-family: "Amsterdam Sans", Arial, sans-serif; +} +``` + +## Aanvragen + +Het lettertype is uitdrukkelijk niet vrij beschikbaar. +Amsterdam Sans is uitsluitend te gebruiken door medewerkers van de gemeente Amsterdam en amsterdam&partners, en door leveranciers werkend voor deze organisaties. + +Vraag de lettertypebestanden aan via het formulier [Amsterdam Sans aanvragen](https://formulier.amsterdam.nl/thema/huisstijl/amsterdam-sans-aanvragen). + +## Meer informatie + +Verdere informatie over het lettertype vind je op de pagina [Typografie op Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/typografie/). diff --git a/storybook/storybook-docs/src/typography.stories.mdx b/storybook/storybook-docs/src/typography.stories.mdx index 6eff8de246..4fdd9d88c3 100644 --- a/storybook/storybook-docs/src/typography.stories.mdx +++ b/storybook/storybook-docs/src/typography.stories.mdx @@ -4,23 +4,6 @@ import { Meta, Typeset } from "@storybook/blocks"; # Typografie -## Lettertype - -We gebruiken het lettertype Amsterdam Sans. - -Dat is een letterfamilie met een helder, open tekstbeeld dat goed bij de Andreaskruisen past. -Het lettertype is zowel offline als online goed leesbaar. -Daarom zetten we het voor alle communicatiemiddelen in. - -In deze zin zie je hoe alle letters en cijfers eruit zien: - - - ## Tekstgrootte ### Zeven tekstniveau’s @@ -235,31 +218,3 @@ Een manier om dat te doen is met de volgende _css snippet_, waarin `hyphens` en ``` Voor verdere informatie: [Wrapping and breaking text op MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text) - -## Het lettertype installeren - -Werk je met npm, neem dan ons package `@amsterdam/design-system-assets` op in je dependencies. -Vervolgens importeer je `@amsterdam/design-system-assets/font/index.css` aan het begin van je stylesheet. - -Je kunt het lettertype ook zelf hosten en opnemen in je applicatie. -Vraag het dan aan via het formulier hieronder. - -Als het helemaal niet mogelijk is Amsterdam Sans te gebruiken pas je het lettertype Arial toe, of het generieke sans-serif lettertype van het apparaat. -In alle gevallen voer je die alternatieven op voor als het downloaden van het font voor de gebruiker niet lukt, of terwijl dat bezig is: - -```css -.class { - font-family: "Amsterdam Sans", Arial, sans-serif; -} -``` - -### Licentie en aanvraag - -Het lettertype is uitdrukkelijk niet vrij beschikbaar. -Amsterdam Sans is uitsluitend te gebruiken door medewerkers van de gemeente Amsterdam en amsterdam&partners, en door leveranciers werkend voor deze organisaties. - -Vraag de lettertypebestanden aan via het formulier [Amsterdam Sans aanvragen](https://formulier.amsterdam.nl/thema/huisstijl/amsterdam-sans-aanvragen). - -## Meer informatie - -- Alle informatie over het lettertype vind je op de pagina [Typografie op Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/typografie/).