**@bonniernews/dn-design-system-web/foundations/typography/README.md**

----

# Typography

## Typography token

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|token | Sass variable | yes | | | Ex.  $ds-typography-expressiveheading03, all typography variables starts with prefix $ds-typography- |
|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
|fontWeight | Sass variable | no | | null | Ex: $ds-fontweight-medium, all font-weight variables starts with prefix $ds-fontweight- |
|letterSpacing | Sass variable | no | | null | Ex: $ds-letterspacing-xs, all letter-spacing variables starts with prefix $ds-letterspacing- |
|lineHeight | Sass variable | no | | null | Ex: $ds-lineheight-tight, all line-height variables starts with prefix $ds-lineheight- |
|fontStyle | string | no | italic, normal | null | |

These are copy paste friendly examples to quickliy get started using a component.

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/foundations/helpers/forward.helpers" as *;

@include ds-typography($ds-typography-expressiveheading03);
````

**With overriding addons**
```scss
@include ds-typography(
  $ds-typography-expressiveheading03,
  $fontWeight: $ds-fontweight-medium,
  $letterSpacing: $ds-letterspacing-none,
  $lineHeight: $ds-lineheight-tight,
  $fontStyle: italic
);
```

**Without media queries**
All devices get the same sizes based on $screen parameter (defaults to mobile)
```scss
@include ds-typography-without-mq(
  $ds-typography-expressiveheading03,
  $screen: desktop,
  $fontWeight: $ds-fontweight-medium,
  $letterSpacing: $ds-letterspacing-xs,
  $lineHeight: $ds-lineheight-tight,
  $fontStyle: italic
);
```

**With forcePX parameter**
```scss
@include ds-typography($ds-typography-expressiveheading03, true);
```

## ⚠️ Manual typography (only for use in special circumstances)

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|family | String | yes | Sans, Serif | | DN Font family |
|size | Number | yes | | | Font size in px without unit |
|lineHeight | Number | no | | 1.2 | Line height as multiplier without unit |
|weight | String, Number | no | bold, 400, etc | 400 | Font weight accepts both name or number |
|fontStyle | String | no | | | Font style, ex Italic |
|letterSpacing | Number | no | | font default | Letter spacing |
|scaling | String, Bool | no | "small", "large", "extraLarge" or false | "small" | Applies typography scaling for screen size. If set to false font will not scale. |

These are copy paste friendly examples to quickliy get started using a component.

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/foundations/helpers/forward.helpers" as *;

@include ds-typography-manual('Sans', 36, 1.3, bold);
```