Amber

Typography

Font stack

Amber uses a font stack that adapts to the operating system it runs on, like Windows, iOS, or Android. For example:

  • Apple devices will display San Francisco
  • Android devices will display Roboto
  • Devices running Windows will display Segoe UI
  • Machines running Linux will display the default sans-serif font

Sans-serif

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

Monospace

font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

Type scale

Font sizes are smaller on mobile and scale up at the medium breakpoint to be larger on desktop.

Display 1

What does it take to look beyond?

Selector Mobile Font Size Mobile Line height Desktop Font Size Desktop Line height
<h1 class="display-1"></h1> 48px 56px 80px 88px

Display 2

What does it take to look beyond?

Selector Mobile Font Size Mobile Line height Desktop Font Size Desktop Line height
<h1 class="display-2"></h1> 40px 48px 64px 72px

Display 3

What does it take to look beyond?

Selector Mobile Font Size Mobile Line height Desktop Font Size Desktop Line height
<h1 class="display-3"></h1> 32px 40px 48px 56px

Heading 1

What does it take to look beyond?

Selector Mobile Font Size Mobile Line height Desktop Font Size Desktop Line height
<h1></h1> 28px 36px 40px 48px

Heading 2

What does it take to look beyond?

Selector Mobile Font Size Mobile Line height Desktop Font Size Desktop Line height
<h2></h2> 24px 32px 32px 40px

Heading 3

What does it take to look beyond?

Selector Mobile Font Size Mobile Line height Desktop Font Size Desktop Line height
<h3></h3> 20px 28px 24px 32px

Heading 4

What does it take to look beyond?

Selector Mobile Font Size Mobile Line height Desktop Font Size Desktop Line height
<h4></h4> 18px 28px 20px 28px

Heading 5

What does it take to look beyond?
Selector Mobile Font Size Mobile Line height Desktop Font Size Desktop Line height
<h5></h5> 16px 24px 16px 24px

Heading 6

What does it take to look beyond?
Selector Mobile Font Size Mobile Line height Desktop Font Size Desktop Line height
<h6></h6> 14px 20px 14px 20px

Paragraph

What does it take to look beyond?

Selector Mobile Font Size Mobile Line height Desktop Font Size Desktop Line height
<p></p> 16px 24px 16px 24px

Kitchen sink

Lorem ipsum code dolor sit amet, consectetur adipiscing link elit. Fusce bibendum italic eu nisl eu dignissim. Cras malesuada bold nunc in vestibulum ullamcorper.

Code

.bitrock {
  color: #bada55;
}

Horizontal rule

Unordered list

  • Unordered list item 1
  • Unordered list item 2

Ordered list

  1. Ordered list item 1
  2. Ordered list item 2

Blockquote

Yeah!! Bitrock is amazing.

Last Updated: 11/4/2019, 5:14:00 PM

← Layout →