# Typography

## Typography

```css
@include telia-typography($type, $weight);
```

Returns css specifying font family and font weight.

### Parameters and allowed values

| $type      |
| --------- |
| teliasans |

| $weight | Available for                       |
| ------ | ----------------------------------- |
| normal | teliasans |
| medium | teliasans            |
| bold   | teliasans            |

## Fluid typography

```css
@include telia-fluid-type($font-size-min, $font-size-max, $vw-min, $vw-max);
```

Responsive font sizing. The size of the font will scale with the viewport based on the information that you provide it. All values must use the 10px based rem units.

### Parameters

| $font-size-min     | $font-size-max    | $vw-min                                | $vw-max                                |
| ----------------- | ----------------- | -------------------------------------- | --------------------------------------- |
| Minimum font size | Maximum font size | Minimum viewport width 600px (default). This is where the font size starts scaling. | Maximum viewport width 1440px (default). This is where the font size stops scaling. |

### Basic usage SCSS

```css
h1 {
  @include telia-fluid-type(2rem, 3rem);
}
```

### Basic usage CSS output

```css
h1 {
  font-size: 2rem;
}

@media screen and (min-width: 60rem) {
  h1 {
    font-size: calc(2rem + 1 * (100vw - 60rem) / 84);
  }
}

@media screen and (min-width: 144rem) {
  h1 {
    font-size: 3rem;
  }
}
```

## Static typography

```css
@include telia-static-type($font-size);
```

Generate font size that is not fluid.

### Parameters


| $font-size                             |
| ----------------------------------|
| {length} the desired font size    |

