Fonts

How to use and configure fonts with Base theme 2.

Font families

This theme is structured by the Serif family on topics, kickers and article text. The article body text and topics are always by the Serif family in order to have a user friendly environment.

The teaser text, publishing day, byline, footer and buttons is from the Sans family.

Font sizes

The font size is different on the different teasers and the size also change on differens browser widths, when flexing. The teaser headlines are never smaller than 18px and the teaser texts never smaller than 13px.

The header and menu font sizes also differs but are never smaller than 16px. The sub menu is never smaller than 14px.

The maximum text lines length for article body text are optimised for accessibility and readability, so the article view is user friendly and give the best reading experience. The fonts of the body text are never smaller than 16px and the fact box texts are never smaller than 14px.

All font styles, colors and font sizes are selected to make the best reading mode and user friendly as possible.

Fonts overview

Configure fonts

You add and modify fonts by using these sass variables. More in detail fonts can be overridden with other sass variables.

	Sass variable
Primary font is used for reading; headlines, body text, categories and main content things like that.	$primary-font-family
Secondary font is for header, navigation and some metadata on article page, like date.	$secondary-font-family

Example

style.scss

$primary-font-family: 'PT Serif', serif !default;
$secondary-font-family: 'Open Sans', sans-serif !default;

�