# Typography

## Import the "Typography" into your SCSS files

The `typography` can be imported into the global `SCSS` file with the following import statement. 

```css
@import 'node_modules/@evalink/cause/typography';
```

## Font Family

The default font family used in the evalink ecosystem is `Roboto` . This is also true for evalink cause. As soon the `typography` is imported in to the global `SCSS` file of the project `Roboto` is the default font-family used for almost all elements.

The font families are imported from the font files served by `assets.evalink.io/fonts/roboto/*.woff2` .

## Font Weights

The `typography` imports the following 4 different font weights, thus makes them available for usage trough out the whole project:

* Light from <https://assets.evalink.io/fonts/roboto/roboto-light.woff2>
* Regular from <https://assets.evalink.io/fonts/roboto/roboto-regular.woff2>
* Medium from <https://assets.evalink.io/fonts/roboto/roboto-medium.woff2>
* Bold from <https://assets.evalink.io/fonts/roboto/roboto-bold.woff2>

In `SCSS/CSS`its possible to refer to this font weights via the following statements:

```css
/*
 * Light 
 */
.example-text--light {
    font-weight: 300;
}
/*
 * Regular 
 */
.example-text--regular {
    font-weight: 400;
}
/*
 * Medium 
 */
.example-text--medium {
    font-weight: 500;
}
/*
 * Bold 
 */
.example-text--bold {
    font-weight: 600;
}
```

## Font Sizes

### Document Root (html)

To give a website user the possibility to adjust the font size for his needs, evalink cause sets the default font size for the root (html) element to `1em` . Since in most browsers default font size is 16px, the `1em` rule is just a way to set a flexible base value for `rem` . If a user changes the font size in his browser, evalink cause will adapt to this changes automaticaly.&#x20;

{% code title="node\_modules/@evalink/cause/reset\_typography.scss" %}

```css
html {
  font-size: 1em;
  ...
}
```

{% endcode %}

### Body and General Font Size

The font size for the body element is set to `1.25rem`. This results, without any adjustment from an user or a `SCSS/CSS` statement , in most browsers to 20px. These 20px font-size are inherited to all elements in the body.

{% code title="node\_modules/@evalink/cause/reset\_typography.scss" %}

```css
body {
  font-size: 1.25rem;
  ...
}
```

{% endcode %}

### Defined Elements

evalink cause defines also font sizes for some of text elements. The following elements are defined in the `typography` definitions.

#### Headlines

For the headline scale evalink cause uses a slightly modified version of the [major third scaling](https://www.modularscale.com/?1\&em&1.25). The headlines are defined with the following text sizes:

![](/files/-McnIAMsQAg7ptJ2ytx4)

**@Responive:** The `h1` is reduced to a font size of 40px on a screen with a smaller screen resolution than 640px.

**Line height:** 3rem;\
**Margin top:** 2rem\
**Margin bottom:** 1rem

![](/files/-McnIDjXusoZ9YL0e2UB)

**Line height:** 3rem;\
**Margin top:** 2rem\
**Margin bottom:** 1rem

![](/files/-McnIGBgY4a3Zf8MT_3f)

**Line height:** 2.5rem;\
**Margin top:** 2rem\
**Margin bottom:** 1rem

![](/files/-McnIOogMOIoWnwtGZc7)

**Line height:** 2rem;\
**Margin top:** 2rem\
**Margin bottom:** 1rem

![](/files/-McnILbdZHeICQUA7Mmv)

**Line height:** 1.5rem;\
**Margin top:** 2rem\
**Margin bottom:** 1rem

![](/files/-McnIQOfiyX8nAKROqUB)

**Line height:** 1.5rem;\
**Margin top:** 2rem\
**Margin bottom:** 1rem


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cause.evalink.io/design-specifications/typography.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.