Typography

evalink cause is shipped with default definitions for typography. They harmonize the font family and font sizes for the different elements in a easy way.

Import the "Typography" into your SCSS files

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

@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/CSSits possible to refer to this font weights via the following statements:

/*
 * 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.

node_modules/@evalink/cause/reset_typography.scss

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

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.

node_modules/@evalink/cause/reset_typography.scss

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

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. The headlines are defined with the following text sizes:

@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

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

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

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

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

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