Typography
Typography is a defining feature of the Spark language. The selection of our standard font families, the incorporation of modular scale, and the use of a baseline grid are intended to introduce a modern and harmonious look to Sabre applications.
Font Families
Roboto Slab
Roboto Slab provides a fresh edge that complements and contrasts well with its Roboto Regular counterpart. Use Roboto Slab on headers and other large or prominent elements that require visual distinction.
Roboto Regular
The default body font, Roboto Regular, was selected for screen readability. Use Roboto Regular on all non-heading elements. Our base font size is 16px.
Noto fonts may be used for international and special character needs.
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.
mega
61 px
5.083 rem
67 px
5.583 rem
Lorem ipsum
alpha
49 px
4.083 rem
54 px
4.5 rem
Lorem ipsum
beta
39 px
3.25 rem
43 px
3.583 rem
Lorem ipsum
gamma
31 px
2.58 rem
35 px
2.916 rem
Lorem ipsum
delta
25 px
2.083 rem
28 px
2.333 rem
Lorem ipsum
epsilon
20 px
1.667 rem
22 px
1.833 rem
Lorem ipsum
zeta
16 px
1.333 rem
18 px
1.5 rem
Lorem ipsum
eta
13 px
1.083 rem
14 px
1.333 rem
Lorem ipsum
Text size is affected by the size of the viewport. See below for specific sizes and see the Responsive Grid to better understand the different breakpoints referenced below.
Typography Examples Usage
Display Title
Display Title
- 67px / 72px (XLarge)
- 61px / 72px (Large-Small)
- 49px / 60px (XSmall)
This text is meant to describe a large feature banner. It occurs primarily on Large Banners and Splash Screens.
H1
Page Title
- 54px / 60px (XLarge)
- 49px / 60px (Large-Small)
- 39px / 48px (XSmall)
This text is meant to describe the contents of an entire page. It is useful for content heavy pages or pages which have secondary navigational structures, to help identify what page you are on from the secondary navigation. This should never be used in the middle of a page.
H2
Section Heading
- 43px / 48px (XLarge)
- 39px / 48px (Large-Small)
- 31px / 36px (XSmall)
This text style is meant to provide a title to elements inside pages, such as tables, graphs, and content sections.
H3
Subheading
- 35px / 36px (XLarge)
- 31px / 36px (Large-Small)
- 25px / 36px (XSmall)
Primary subheader style can be used in result listings and can adopt clickable link style. Additionally, the Subheader provides another level of type hierarchy for distinguishing content sections.
H4
Subtitle
- 28px / 36px (XLarge)
- 25px / 36px (Large-Small)
- 20px / 24px (XSmall)
Subtitles occur with tables and data heavy environments where a label is needed. The text style can act as a title for a paragraph where there are multiple paragraphs that need their own titles.
H5
Small Subtitle
- 22px / 24px (XLarge)
- 20px / 24px (Large-Small)
- 16px / 24px (XSmall)
Small Subtitles occur in the context of data heavy environments that require small titling. For example, column headers in the condensed tables or opt group labels within menus.
H6
Smallest Title
- 22px / 24px (XLarge)
- 20px / 24px (Large-Small)
- 16px / 24px (XSmall)
Smallest Titles can be used in elements with low priority. For example, the links inside a footer.
BUTTON LABEL
- 18px / Does not wrap (XLarge)
- 16px / Does not wrap (Large-XSmall)
Button Labels occur in text and regular buttons. They are bold for readability and are meant to invoke actionability.
LARGE BODY
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, expedita ab suscipit, eum sed explicabo.
- 22px / 24px (XLargel)
- 20px / 24px (Large-XSmall)
Large body can be used for intro sections to bring greater typographic hierarchy to the beginning of a paragraph or section of content.
DEFAULT BODY
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, expedita ab suscipit, eum sed explicabo.
- 18px / 24px (XLarge)
- 16px / 24px (Large-XSmall)
This is the default body copy text style and should be used for all non-title or labeling text. It was selected because it performs well in paragraphs (block copy situations).
SMALL COPY
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, expedita ab suscipit, eum sed explicabo.
- 14px / 24px (XLarge)
- 13px / 24px (Large-XSmall)
The Body Copy flexes with the modular scale and can be used when space is limited or to add an additional level of hierarchy.
NUMERALS
12345678
- Based on parent text style
This is the baseline numeral style. The 16pt default size is what will typically occur within tables and charts. In case space is an issue, the numerals can step down once in the modular scale. Numbers are not to appear below this 13pt size.
The Sabre Spark EDL offers a set of CSS classes to solve small, common problems and enforce consistency within Typography.