Flex UI Library (1.6.10)
User Interface Resources
Theme Components Miscellaneous
Exploratory Components
Miscellaneous
Feature Examples
Address Search Contact Management Mobile Price Range 1 Price Range 2 Responsive Hot Sheet Responsive Layout
Product Marketing
Licensed Photos - [new window] Screenshot Library
Tools & Reference
Debug Tips
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();
}