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

Developer

Typography

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.

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

Headings

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

Display

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