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.
| Font | Sass Variable | CSS Weight |
Source Sans Pro Light | $font-weight-light | 300 |
Source Sans Pro Regular | $font-weight-regular | 400 |
Source Sans Pro Semibold | $font-weight-semibold | 600 |
Source Sans Pro Bold | $font-weight-bold | 700 |
Source Sans Pro Black | $font-weight-black | 900 |
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.
| Multiplier | Sass Mixin | rem Font Size | px Font Size | Line Height | Sample |
| -3 | @include tx-typescale(-3) | 0.625 rem | 10 px | 1.6 | RNA is the Kanye West of Biology |
| -2 | @include tx-typescale(-2) | 0.75 rem | 12 px | 1.55 | RNA is the Kanye West of Biology |
| -1 | @include tx-typescale(-1) | 0.625 rem | 10 px | 1.6 | RNA is the Kanye West of Biology |
| 0 | @include tx-typescale(0) | 1 rem | 16 px | 1.5 | RNA is the Kanye West of Biology |
| 1 | @include tx-typescale(1) | 1.125 rem | 18 px | 1.44 | RNA is the Kanye West of Biology |
| 2 | @include tx-typescale(2) | 1.25 rem | 20 px | 1.4 | RNA is the Kanye West of Biology |
| 3 | @include tx-typescale(3) | 1.4375 rem | 23 px | 1.34 | RNA is the Kanye West of Biology |
| 4 | @include tx-typescale(4) | 1.625 rem | 26 px | 1.3 | RNA is the Kanye West of Biology |
| 5 | @include tx-typescale(5) | 1.8125 rem | 29 px | 1.27 | RNA is the Kanye West of Biology |
| 6 | @include tx-typescale(6) | 2 rem | 32 px | 1.25 | RNA is the Kanye West of Biology |
| 7 | @include tx-typescale(7) | 2.25 rem | 36 px | 1.22 | RNA 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>
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--primarySome 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--secondaryApplies 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--disabledApplies the Disabled tier styling. Disabled styling should be used to indicate that text which is normally interactive is no longer.
.tx-type--accentApplies 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--heavyApplies 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--invertWhen 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>