<p>This website requires JavaScript to deliver the best possible experience.</p>



An introduction to typography used in Blexar design language

Font family

For fonts, we are using the “native font stack” for optimum text rendering on every device and OS.

  /* Safari for OS X and iOS (San Francisco) */
  /* Chrome < 56 for OS X (San Francisco) */
  /* Windows */
  "Segoe UI",
  /* Android */
  /* Basic web fallback */
  "Helvetica Neue", Arial, sans-serif,
  /* Emoji fonts */
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";


All heading elements are reset to have their margin-top removed, have margin-bottom: 0.5em and font-weight: 600.

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

  • h-x


if you want a very big title you can choose from four levels for displaying titles.

  • display-x

Font sizes variables

Adjust the width and offset of columns on different devices.

Variable deafult description
$font-tiny 12px
$font-small 14px
$font-normal 16px
$font-large 20px
$font-massive 24px
$display-2 88px
$display-1 96px
$display-3 72px
$display-4 56px
$header-1 40px
$header-2 32px
$header-3 28px
$header-4 24px
$header-5 20px
$header-6 16px