Skip Navigation

Typography

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.

The default font, Roboto Regular, was selected for screen readability. Use Roboto Light 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.

Roboto Light

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

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

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: #4A5767 / Body copy: #333333 / Text link: #006BA8

XS
S-L
XL

Display Title

Display Title

XS
Light 39px
Line-height: 48px
S-LG
Light 49px
Line-height: 60px
XL
Light 54px
Line-height: 60px

H1

Page Title

XS
Light 31px
Line-height: 36px
S-LG
Light 39px
Line-height: 48px
XL
Light 43px
Line-height: 48px

H2

Section Heading

XS
Light 25px
Line-height: 36px
S-LG
Light 31px
Line-height: 36px
XL
Light 35px
Line-height: 36px

H3

Subheading

XS
Regular 20px
Line-height: 24px
S-LG
Light 25px
Line-height: 36px
XL
Light 28px
Line-height: 36px

H4

Subtitle

XS
Light 20px
Line-height: 24px
S-LG
Regular 20px
Line-height: 24px
XL
Regular 22px
Line-height: 24px

H5

Small Subtitle
XS
Light 16px
Line-height: 24px
(Uppercase)
S-LG
Light 16px
Line-height: 24px
(Uppercase)
XL
Light 18px
Line-height: 24px
(Uppercase)

H6

Smallest Title
XS
Regular 16px
Line-height: 24px
S-LG
Regular 16px
Line-height: 24px
XL
Regular 18px
Line-height: 24px

LARGE BODY

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

XS
Light 20px
Line-height: 24px
S-LG
Light 20px
Line-height: 24px
XL
Light 22px
Line-height: 24px

DEFAULT BODY

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

XS
Regular 16px
Line-height: 24px
S-LG
Regular 16px
Line-height: 24px
XL
Regular 18px
Line-height: 24px

SMALL COPY

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

XS
Regular 13px
Line-height: 24px
S-LG
Regular 13px
Line-height: 24px
XL
Regular 14px
Line-height: 24px

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.

XS
S-L
XL

Mega

XS
39px
(3.25rem)
Line-height: 4rem
S-LG
49px
(4.083rem)
Line-height: 5rem
XL
54px
(4.5rem)
Line-height: 5rem

Alpha

XS
31px
(2.583rem)
Line-height: 3rem
S-LG
39px
(3.25rem)
Line-height: 4rem
XL
43px
(3.583rem))
Line-height: 4rem

Beta

XS
25px
(2.083rem)
Line-height: 3rem
S-LG
31px
(2.583rem)
Line-height: 3rem
XL
35px
(2.916rem)
Line-height: 3rem

Gamma

XS
20px
(1.666rem)
Line-height: 2rem
S-LG
25px
(2.083rem)
Line-height: 3rem
XL
28px
(2.333rem)
Line-height: 3rem

Delta

XS
20px
(1.666rem)
Line-height: 2rem
S-LG
20px
(1.666rem)
Line-height: 2rem
XL
22px
(1.833rem)
Line-height: 2rem

Epsilon

XS
16px
(1.333rem)
Line-height: 2rem
S-LG
16px
(1.333rem)
Line-height: 2rem
XL
18px
(1.5rem)
Line-height: 2rem

Zeta

XS
16px
(1.333rem)
Line-height: 2rem
S-LG
16px
(1.333rem)
Line-height: 2rem
XL
18px
(1.5rem)
Line-height: 2rem

Eta

XS
13px
(1.083rem)
Line-height: 2rem
S-LG
13px
(1.083rem)
Line-height: 2rem
XL
14px
(1.166rem)
Line-height: 2rem

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.