Typography

Typography is a foundational element of the OS Design System. Consistent use of font families, sizes, and weights ensures readability, visual hierarchy, and accessibility across all enaio® and yuuvis® products.

Font Families

	Font	Fallback stack
enaio®	Poppins	Arial, Helvetica, sans-serif
yuuvis®	Mulish	(to be documented in shell documentation)

Font Weights

Both product lines use two weights:

$font-weight-normal: 400;
$font-weight-bold: 700;

Type Scale

The base font size is 14px = 1rem. All sizes are defined in REM.

The root font size of 14px deviates from the browser default of 16px. This must be accounted for when calculating REM values or integrating external components. Do this by setting the base font size on the html element in your global stylesheet. This makes 1rem = 14px throughout the application.

Alternatively, use a percentage to respect the user’s browser font size setting:

html {
  font-size: 87.5%; /* 14 ÷ 16 = 0.875 */
}

Without this, the browser default of 16px applies and all REM values will render at the wrong size.

Token	px	rem	Line height	HTML tag	Semantic role	enaio®	yuuvis®
`$font-h1`	25px	1.786rem	1.2	H1	Primary headline, one per view	One per loadable view / URL route; modal dialog header title	Primary headline in the app, in modal dialogs, or per panel when no standalone headline exists
`$font-h2`	22px	1.571rem	1.2	H2	Secondary headline	Not currently used	Main section headlines
`$font-h3`	20px	1.429rem	1.2	H3	Tertiary headline	Not currently used	Not currently used
`$font-h4`	18px	1.286rem	1.2	H4	Quaternary headline	Headings for smaller components or sections, e.g., cards, quicksearch panels	Card headlines, e.g., inside modal windows
`$font-body-large`	16px	1.143rem	1.4	button	Emphasized body / interactive labels	Expandable section labels, panel subtitles, button labels, dropdowns	Small titles and intermediate headings for visual variation
`$font-body`	14px	1.000rem	1.4	p, span, label	Default body text	Form labels, details viewer, general UI text	Default body and running text throughout the application
`$font-hint`	12px	0.857rem	1.4	small	Supplementary / hint text	Inline warnings and short informational text, e.g., object language change in user settings	To be defined

Line Height Tokens

$line-height-tight: 1.2; // headings (h1–h4)
$line-height-normal: 1.4; // body, body-large, hint — typography default
$line-height-relaxed: 1.5; // long-form prose, card paragraphs, comments

Accessibility

Typography choices directly affect contrast compliance. See the Accessibility page for full requirements.

Regular body text (14px): minimum contrast ratio 4.5:1
Large text (18px and above, or bold 14px): minimum contrast ratio 3:1
Do not use font sizes below 12px in any production UI element

Font Faces enaio® (Technical Reference)

Four font faces are registered for Poppins in enaio®. Browser support: Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+.

/* poppins-regular */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("../../fonts/poppins-v24-latin-regular.woff2") format("woff2");
}

/* poppins-italic */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  src: url("../../fonts/poppins-v24-latin-italic.woff2") format("woff2");
}

/* poppins-700 */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: url("../../fonts/poppins-v24-latin-700.woff2") format("woff2");
}

/* poppins-700italic */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
  src: url("../../fonts/poppins-v24-latin-700italic.woff2") format("woff2");
}