• Spark Fonts
  • Uppercase
• Typography Usage
• Modular Scale
  • Resizing with CSS Classes

Spark Fonts

Typography is a defining feature of the Spark language. The selection of our standard font families, the incorporation of a modular scale, and the use of a baseline grid are intended to introduce a modern and harmonious look to Sabre applications.

• Aa

  Roboto Condensed Bold

  Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1234567890

• Aa

  Roboto Bold

  Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1234567890

• Aa

  Roboto Regular

  Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1234567890

The default font, Roboto Regular, was selected for screen readability. Use Roboto Condensed for larger headings and use Roboto Regular on smaller headings and body text. Our base font size is 16px. Noto fonts may be used for international and special character needs.

Uppercase

Some elements within Spark, like H5s or navigation and button labels, use uppercase text for increased visual prominence. Use 1 to 3 words at most in these cases, as uppercase text is difficult to read at length.

Typography Usage

All Headings: $katana-black Body Copy: $gray-80 Text Link: $blue-60

Modular Scale

Text requires varying sizes to establish a visual hierarchy of information displayed on the page. We have adopted the concept of modular scale - using a ratio to create a scale upon which the size of text, line height and padding are determined - to lend a balanced rhythm to the display of content on the screen.

The modular scale of Spark is based on 16px body text and a major third (1.25) scale. Text sizes across all UI elements defined in our language reflect this modular scale.

Resizing with CSS Classes

Heading sizes may be modified by referencing the above scale names to be applied as CSS classes. For instance, if a Level 2 heading (H2) needs to be visually displayed at a size smaller, you can apply the .spark-gamma class to drop it down a size.

<!-- Default H2 -->
<h2>Heading</h2>

<!-- Modified H2 -->
<h2 class="spark-gamma">Heading</h2>

Additional CSS Helper classes are available to solve small, common problems and enforce consistency within Typography.