@natlibfi/melinda-ui-commons/src/styles/fonts.css

Common modules for Melinda UI applications

/* ---------------------------------------------------------------------------- */
/* Font styles                                                                  */
/* ---------------------------------------------------------------------------- */

/* DM Serif Text | Designed by Colophon Foundry  | https://fonts.google.com/specimen/DM+Serif+Text */
/* Public Sans | Designed by USWDS, Dan Williams, Pablo Impallari, Rodrigo Fuenzalida | https://fonts.google.com/specimen/Public+Sans */
/* Noto Sans Mono | Noto Fonts Project (directed by Google Fonts)  | https://fonts.google.com/noto/specimen/Noto+Sans+Mono */



/******************************************************************************************************************************************/
/* Font definitions for fallback font files */


/* ---------------------------------------------------------------------*/
/* DM SERIF TEXT */
/*    - Regular 400 */

@font-face {
  font-family: 'DM Serif Text Regular (file)';
  src: url('../fonts/DMSerifText-Regular.ttf') format('truetype');
  font-stretch: normal;
  font-weight: 300 500;
  font-style: normal;
  font-display: swap
}


/* ---------------------------------------------------------------------*/
/* PUBLIC SANS */
/*    - Light 300 */
/*    - Medium 500 */
/*    - SemiBold 600 */

@font-face {
  font-family: 'Public Sans Light (file)';
  src: url('../fonts/PublicSans-Light.ttf') format('truetype');
  font-stretch: normal;
  font-weight: 200 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Public Sans Medium (file)';
  src: url('../fonts/PublicSans-Medium.ttf') format('truetype');
  font-stretch: normal;
  font-weight: 400 600;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Public Sans SemiBold (file)';
  src: url('../fonts/PublicSans-SemiBold.ttf') format('truetype');
  font-stretch: normal;
  font-weight: 500 700;
  font-style: normal;
  font-display: swap
}


/* ---------------------------------------------------------------------*/

/* NOTO SANS MONO */
/*    - Regular 400 */

@font-face {
  font-family: 'Noto Sans Mono Regular (file)';
  src: url('../fonts/NotoSansMono-Regular.ttf') format('truetype');
  font-stretch: normal;
  font-weight: 300 500;
  font-style: normal;
  font-display: swap
}

/* ---------------------------------------------------------------------*/



/******************************************************************************************************************************************/
/* Root variables */

:root {

  /* ----------------------------------------------------------------------------------------------------------------------*/
  /* Font family variable definitions: */
  /*    - default: web font (defined in app's html file head element, requested from Google Fonts API) */
  /*    - first fallback: self-hosted font (loaded from .ttf file) */
  /*    - second fallback: local system font (any suitable monospace, serif or sans-serif font available in user's system) */

  --font-family-brand: 'DM Serif Text', 'DM Serif Text Regular (file)', serif;
  --font-family-mono: 'Noto Sans Mono', 'Noto Sans Mono Regular (file)', monospace;
  --font-family-button: 'Public Sans', 'Public Sans SemiBold (file)', sans-serif;
  --font-family-content: 'Public Sans', 'Public Sans Light (file)', sans-serif;
  --font-family-headline: 'Public Sans', 'Public Sans SemiBold (file)', sans-serif;
  --font-family-input: 'Public Sans', 'Public Sans Medium (file)', sans-serif;
  --font-family-label: 'Public Sans', 'Public Sans Medium (file)', sans-serif;
  --font-family-link: 'Public Sans', 'Public Sans SemiBold (file)', sans-serif;
  --font-family-list: 'Public Sans', 'Public Sans Medium (file)', sans-serif;
  --font-family-placeholder: 'Public Sans', 'Public Sans Light (file)', sans-serif;
  --font-family-title: 'Public Sans', 'Public Sans Medium (file)', sans-serif;




  /* ----------------------------------------------------------------------------------------------------------------------*/
  /* Font size variable definitions: */

  --font-size-brand: 2.8125rem;

  --font-size-icon-extra-large: 2.5rem;
  --font-size-icon-large: 2rem;
  --font-size-icon-medium: 1.5rem;
  --font-size-icon-small: 1.25rem;
  --font-size-icon-extra-small: 1.0rem;

  --font-size-button-large: 1.125rem;
  --font-size-button-medium: 1.0rem;
  --font-size-small: 0.875rem;

  --font-size-content-large: 1.375rem;
  --font-size-content-medium: 1.0rem;
  --font-size-content-small: 0.875rem;

  --font-size-headline-extra-large: 2.125rem;
  --font-size-headline-large: 1.75rem;
  --font-size-headline-medium: 1.4375rem;
  --font-size-headline-small: 1.25rem;
  --font-size-headline-extra-small: 1.125rem;

  --font-size-input-large: 1.3rem;
  --font-size-input-medium: 1.125rem;
  --font-size-input-small: 1.0rem;

  --font-size-label-large: 1.125rem;
  --font-size-label-medium: 1rem;
  --font-size-label-small: 0.875rem;
  --font-size-label-extra-small: 0.75rem;

  --font-size-link-extra-large: 1.3rem;
  --font-size-link-large: 1.125rem;
  --font-size-link-medium: 1.0rem;
  --font-size-link-small: 0.875rem;

  --font-size-list-large: 1.125rem;
  --font-size-list-medium: 1.0rem;
  --font-size-list-small: 0.875rem;

  --font-size-placeholder-large: 1.3rem;
  --font-size-placeholder-medium: 1.125rem;
  --font-size-placeholder-small: 1.0rem;

  --font-size-title-large: 1.375rem;
  --font-size-title-medium: 1rem;
  --font-size-title-small: 0.875rem;


  /* ----------------------------------------------------------------------------------------------------------------------*/
  /* Font weight variable definitions: */

  --font-weight-brand: 400;
  --font-weight-icon: 400;
  --font-weight-button: 600;
  --font-weight-content: 300;
  --font-weight-headline: 600;
  --font-weight-input: 500;
  --font-weight-label: 500;
  --font-weight-link: 600;
  --font-weight-list: 600;
  --font-weight-placeholder: 300;
  --font-weight-title: 500;


  /* ----------------------------------------------------------------------------------------------------------------------*/
  /* Font line height variable definitions: */

  --font-line-height-brand: 3.125rem;

  --font-line-height-button-large: 1.6125rem;
  --font-line-height-button-medium: 1.5rem;
  --font-line-height-small: 1.25rem;

  --font-line-height-content-extra-large: 2.0rem;
  --font-line-height-content-large: 1.75rem;
  --font-line-height-content-medium: 1.5rem;
  --font-line-height-content-small: 1.25rem;

  --font-line-height-headline-large: 2.375rem;
  --font-line-height-headline-medium: 1.95rem;
  --font-line-height-headline-small: 1.625rem;

  --font-line-height-input-large: 1.5rem;
  --font-line-height-input-medium: 1.375rem;
  --font-line-height-input-small: 1.125rem;

  --font-line-height-label-large: 1.5rem;
  --font-line-height-label-medium: 1.375rem;
  --font-line-height-label-small: 1.125rem;

  --font-line-height-link-large: 1.6125rem;
  --font-line-height-link-medium: 1.5rem;
  --font-line-height-link-small: 1.25rem;

  --font-line-height-list-large: 1.25rem;
  --font-line-height-list-medium: 1.0rem;
  --font-line-height-list-small: 0.75rem;

  --font-line-height-placeholder-large: 1.5rem;
  --font-line-height-placeholder-medium: 1.375rem;
  --font-line-height-placeholder-small: 1.125rem;

  --font-line-height-title-large: 1.75rem;
  --font-line-height-title-medium: 1.5rem;
  --font-line-height-title-small: 1.25rem;


}

/* ----------------------------------------------------------------------------------------------------------------------*/
/* Notes: */

/*
1sp   0.0625rem
10sp	0.625rem
11sp  0.6875rem
12sp	0.75rem
14sp  0.875rem
16sp  1rem
20sp  1,25rem
24sp	1.5rem
28sp  1.75rem
30px  1.875rem
32px  2rem
40sp  2,5rem
60sp	3.75rem
*/

/*
brand
icon
button
content
headline
input
label
link
list
placeholder
title
*/