Typography - Flex UI Library

Typography

Text Types

Various types of text available.

Base - Regular/14/16

(These styles are included on the <html> element so they are applied by default to all elements.)

@mixin theme-type-base() {
  font-size: 14px;
  font-weight: $theme-font-weight-regular;
  line-height: 16px;
}

.t-type-base {
  @include theme-type-base();
}

html {
  @include theme-type-base();

  color: $theme-text-color;
  height: 100%;

  // The following are only applicable on Mac OSes.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

Base - Semibold/14/16

@mixin theme-type-base-strong() {
  @include theme-type-base();

  font-weight: $theme-font-weight-semibold;
}

.t-type-base-strong {
  @include theme-type-base-strong();
}

Subtext - Regular/14/16 (margin-top: -12px;)

.t-subtext {
  margin-top: -($theme-spacing-unit / 2);
}

Font-weight Settings

Various types of font-weight settings available.

$theme-font-weight-light:             300;
$theme-font-weight-regular:           400;
$theme-font-weight-semibold:          600;
$theme-font-weight-bold:              700;
$theme-font-weight-boldest:           800;

Titles

Various types of titles available.

Title Largest - Bold/28/36

@mixin theme-type-title-largest() {
  font-size: 28px;
  font-weight: $theme-font-weight-bold;
  line-height: 36px;
  margin-bottom: $theme-spacing-unit;
}

.t-title--largest {
  @include theme-type-title-largest();
}

Title Larger - Bold/24/32

@mixin theme-type-title-larger() {
  font-size: 24px;
  font-weight: $theme-font-weight-bold;
  line-height: 32px;
  margin-bottom: $theme-spacing-unit;
}

.t-title--larger {
  @include theme-type-title-larger();
}

Title Large - Semibold/20/24

@mixin theme-type-title-large() {
  font-size: 20px;
  font-weight: $theme-font-weight-semibold;
  line-height: 24px;
  margin-bottom: $theme-spacing-unit;
}

.t-title--large {
  @include theme-type-title-large();
}

Title - Semibold/18/24

@mixin theme-type-title() {
  font-size: 18px;
  font-weight: $theme-font-weight-semibold;
  line-height: 24px;
  margin-bottom: $theme-spacing-unit-small;
}

.t-title {
  @include theme-type-title();
}

Title Small - Bold/12/16

@mixin theme-type-title-small() {
  font-size: 12px;
  font-weight: $theme-font-weight-bold;
  line-height: 16px;
  // margin-bottom: no bottom margin because this is used inline in most places.
  text-transform: uppercase;
}

.t-title--small {
  @include theme-type-title-small();
}

Title Smaller - Semibold/13/16

@mixin theme-type-title-smaller() {
  font-size: 13px;
  font-weight: $theme-font-weight-semibold;
  line-height: 16px;
  // margin-bottom: no bottom margin because this is used inline in most places.
}

.t-title--smaller {
  @include theme-type-title-smaller();
}