TypographyFoundation

Defined here are the type scale, font weights, and styles used in the Transcriptic webapp. All typographic styles are defined in _typography.scss and should be used from there. Font sizes, weights and colors should never be defined directly in component styling.

Styles

Typeface

The Transcriptic webapp uses Source Sans Pro for all text. This is set on the body tag and thus should not be redefined within components. Source Sans Pro is Adobe's first open source typeface family, designed by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces.

ABCDEFGHIJKLMONPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
​‌‘​‌?​‌ ’​‌“​‌!​ ‌”​‌(​‌% ​‌)​‌[​‌ #​‌]​‌{​ ‌@​‌}​‌/ ​‌&​‌<​‌ -​‌+​‌÷​ ‌×​‌=​‌> ​‌®​‌©​‌ $​‌€​‌£​ ‌¥​‌¢​‌: ​‌;​‌,​‌ .​‌*

Weights

Source Sans Pro has a wide array of weights. Their names and associated CSS mappings are detailed here.

FontSass VariableCSS Weight

Source Sans Pro Light

$font-weight-light300

Source Sans Pro Regular

$font-weight-regular400

Source Sans Pro Semibold

$font-weight-semibold600

Source Sans Pro Bold

$font-weight-bold700

Source Sans Pro Black

$font-weight-black900

Scale

Pre-defined font styles will not successfully serve every use case across every Transciptic UI. The following typescale is set to guide custom styling when absolutely necessary. The core Transcriptic font styles, detailed below, are derived from this scale.

MultiplierSass Mixinrem Font Sizepx Font SizeLine HeightSample
-3@include tx-typescale(-3)0.625 rem10 px1.6RNA is the Kanye West of Biology
-2@include tx-typescale(-2)0.75 rem12 px1.55RNA is the Kanye West of Biology
-1@include tx-typescale(-1)0.625 rem10 px1.6RNA is the Kanye West of Biology
0@include tx-typescale(0)1 rem16 px1.5RNA is the Kanye West of Biology
1@include tx-typescale(1)1.125 rem18 px1.44RNA is the Kanye West of Biology
2@include tx-typescale(2)1.25 rem20 px1.4RNA is the Kanye West of Biology
3@include tx-typescale(3)1.4375 rem23 px1.34RNA is the Kanye West of Biology
4@include tx-typescale(4)1.625 rem26 px1.3RNA is the Kanye West of Biology
5@include tx-typescale(5)1.8125 rem29 px1.27RNA is the Kanye West of Biology
6@include tx-typescale(6)2 rem32 px1.25RNA is the Kanye West of Biology
7@include tx-typescale(7)2.25 rem36 px1.22RNA is the Kanye West of Biology

Variants

Using the type scale defined above as a groundwork, the following standard styles have been defined for browser supported tags and key text styling CSS classes. These core styles should be used in every case possible. Font sizes should need to be defined within CSS only rarely.

Tiers

The font styles have been categorized into four tiers: Primary, Secondary, Disabled, and Accent. Text elements and classes default to one of these four tiers. The majority default to Primary, however some default to Secondary. If a tier other than the default is desired, a modifier class can be used.

Styles

Independent of tiers, there are eight styles of text available, Display, Headline, Title, Subheading, Label, Body Text, Description, and Caption. Each style is selected with either an HTML tag, or a text styling class.

Weights

Within each style, and independent of tier and style, there are two variants: Default and Heavy. The variant is accessed with a modifier class.

Contrast

Across all possible text combinations, an Inverted style can be applied. This renders the text in a light color, for use on a darker background.

Usage

HTML Tags

The core HTML text tags of <h1>...<h4>,<p>,<a>,<label> and<li> have default styles applied to them. These styles should be overwritten only when necessary.

Always Use HTML Tags

Text should always be wrapped in an HTML Text Tag. If there are no tags that provide the style desired, use the tag that is semantically closest and use a <span> tag with classes to style it as desired.

Default Styles of HTML Tags


                          <h1>Headline</h1>
                          <h2>Title</h2>
                          <h3>Subheading</h3>
                          <h4>Label</h4>
                          <p>Body Text</p>
                          <p>Body text with nested <strong>emphasis</strong>.</p>
                          <a href="">Link</a>
                        

Headline

Title

Subheading

Label

Body Text

Body text with nested emphasis.

Link

Applying Style Variants to HTML Tags

HTML text tags may not have the desired style out of the box. A collection of CSS classes can be used to apply styling variants to the default style. These classes apply variants based on their context. That is, the same variant CSS class will apply slightly different styles depending on the HTML tag within which they are used.

.tx-type--primary

Some text classes, such as .desc, <h4> and <label> default to the Secondary tier. To style these text elements with Primary styling, use this text modifier class.

.tx-type--secondary

Applies the Secondary tier styling. Secondary styling should be used for any text that has demoted importance. This is useful for labels, which may need to display less visual prominence than the content for which they are applied.

.tx-type--disabled

Applies the Disabled tier styling. Disabled styling should be used to indicate that text which is normally interactive is no longer.

.tx-type--accent

Applies the Accent tier styling. Accent styling should be used to indicate that a piece of text is interactive or otherwise separate from surrounding text.

.tx-type--heavy

Applies the Heavy variant of the style. Useful for headers that are surrounded by other text and need to be more easily distinguished.

When only some words need a heavy visual weight, use the <strong> tag instead. This is easier to read and will apply the appropriate text weight for the parent text tag.

.tx-type--invert

When light text is needed on a dark background, this class will invert the color scheme. This class can be applied directly to the text element, or any parent element. All child elements of an element styled with .tx-type--invert will inherit the inverted color scheme.

Style and Variant Table

Primary

Display

Display 2


                  <h1 className="display">Display</h1>
                  <h1 className="display tx-type--heavy">Display 2</h1>
                

Headline

Headline 2


                  <h1>Headline</h1>
                  <h1 className="tx-type--heavy">Headline 2</h1>
                

Title

Title 2


                <h2>Title</h2>
                <h2 className="tx-type--heavy">Title 2</h2>
              

Subheading

Subheading 2


                <h3>Subheading</h3>
                <h3 className="tx-type--heavy">Subheading 2</h3>
              

Label

Label 2


                <h4 className="tx-type--primary">Label</h4>
                <h4 className="tx-type--primary tx-type--heavy">Label 2</h4>
              

Body Text

Body Text 2


                <p>Body Text</p>
                <p className="tx-type--heavy">Body Text 2</p>
              

Description

Description 2


                <p className="desc tx-type--primary">Description</p>
                <p className="desc tx-type--primary tx-type--heavy">Description 2</p>
              

Caption

Caption 2


                <p className="caption">Caption</p>
                <p className="caption tx-type--heavy">Caption 2</p>
              

Secondary

Display

Display 2


                <h1 className="display tx-type--secondary">Display</h1>
                <h1 className="display tx-type--secondary tx-type--heavy">Display 2</h1>
              

Headline

Headline 2


                <h1 className="tx-type--secondary">Headline</h1>
                <h1 className="tx-type--secondary tx-type--heavy">Headline 2</h1>
              

Title

Title 2


                <h2 className="tx-type--secondary">Title</h2>
                <h2 className="tx-type--secondary tx-type--heavy">Title 2</h2>
              

Subheading

Subheading 2


                <h3 className="tx-type--secondary">Subheading</h3>
                <h3 className="tx-type--secondary tx-type--heavy">Subheading 2</h3>
              

Label

Label 2


                <h4>Label</h4>
                <h4 className="tx-type--heavy">Label 2</h4>
              

Body Text

Body Text 2


                <p className="tx-type--secondary">Body Text</p>
                <p className="tx-type--secondary tx-type--heavy">Body Text 2</p>
              

Description

Description 2


                <p className="desc">Description</p>
                <p className="desc tx-type--heavy">Description 2</p>
              

Caption

Caption 2


                <p className="caption tx-type--secondary">Caption</p>
                <p className="caption tx-type--secondary tx-type--heavy">Caption 2</p>
              

Disabled

Display

Display 2


                <h1 className="display tx-type--disabled">Display</h1>
                <h1 className="display tx-type--disabled tx-type--heavy">Display 2</h1>
              

Headline

Headline 2


                <h1 className="tx-type--disabled">Headline</h1>
                <h1 className="tx-type--disabled tx-type--heavy">Headline 2</h1>
              

Title

Title 2


                <h2 className="tx-type--disabled">Title</h2>
                <h2 className="tx-type--disabled tx-type--heavy">Title 2</h2>
              

Subheading

Subheading 2


                <h3 className="tx-type--disabled">Subheading</h3>
                <h3 className="tx-type--disabled tx-type--heavy">Subheading 2</h3>
              

Label

Label 2


                <h4 className="tx-type--disabled">Label</h4>
                <h4 className="tx-type--disabled tx-type--heavy">Label 2</h4>
              

Body Text

Body Text 2


                <p className="tx-type--disabled">Body Text</p>
                <p className="tx-type--disabled tx-type--heavy">Body Text 2</p>
              

Description

Description 2


                <p className="desc tx-type--disabled">Description</p>
                <p className="desc tx-type--disabled tx-type--heavy">Description 2</p>
              

Caption

Caption 2


                <p className="caption tx-type--disabled">Caption</p>
                <p className="caption tx-type--disabled tx-type--heavy">Caption 2</p>
              

Accent

Display

Display 2


            <h1 className="display tx-type--accent">Display</h1>
            <h1 className="display tx-type--accent tx-type--heavy">Display 2</h1>
          

Headline

Headline 2


            <h1 className="tx-type--accent">Headline</h1>
            <h1 className="tx-type--accent tx-type--heavy">Headline 2</h1>
          

Title

Title 2


            <h2 className="tx-type--accent">Title</h2>
            <h2 className="tx-type--accent tx-type--heavy">Title 2</h2>
          

Subheading

Subheading 2


            <h3 className="tx-type--accent">Subheading</h3>
            <h3 className="tx-type--accent tx-type--heavy">Subheading 2</h3>
          

Label

Label 2


            <h4 className="tx-type--accent">Label</h4>
            <h4 className="tx-type--accent tx-type--heavy">Label 2</h4>
          

Body Text

Body Text 2


            <p className="tx-type--accent">Body Text</p>
            <p className="tx-type--accent tx-type--heavy">Body Text 2</p>
          

Description

Description 2


            <p className="desc tx-type--accent">Description</p>
            <p className="desc tx-type--accent tx-type--heavy">Description 2</p>
          

Caption

Caption 2


            <p className="caption tx-type--accent">Caption</p>
            <p className="caption tx-type--accent tx-type--heavy">Caption 2</p>