Typography

These guidelines summarize how we use typography at Soundstripe.

Font Familiy

Soundstripe's product typeface is Avenir Next. The typeface is used at various weights, primarily Regular (400), Medium (500), and Semibold (600). To ensure optimum legibility, it’s best to lighter or heavier weights.

Our font stack is determined at the root level of the product.

font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
  "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

Headings

It's important to remember that heading size and heading level do not need to correlate. To improve accessibility, Heading levels should be used to reflect the page structure and hierarchy. Size can be added as a prop.

Size

Example

Font Size/Line Height

Heading size one

Mobile: 32px/40px

Desktop: 40px/48px

Heading size two

Mobile: 28px/36px

Desktop: 32px/40px

Heading size three

24px/32px

Heading size four

20px/28px

Heading size five

16px/24px

Body Content

Example

Size/Line Height

Usage

Default body text

16px/24px

The default for all product body copy.

Large body text

20px/28px

Text callouts, subheadlines.

Small body text

14px/20px

Small text is used for text that belongs lower in the hierarchy. Meta tags, labels, captions.

Extra small body text

12px/16px

Tiny text is used for edge cases where we need text to be really small. It should generally be avoided.

Type Scale

Size

Example

Font Size/Line Height

xl3

Text size xl3

font-size: 2.5remline-height: 3rem

xl2

Text size xl2

font-size: 2remline-height: 2.75rem

Text size xl

font-size: 1.5remline-height: 2rem

Text size lg

font-size: 1.25remline-height: 1.75rem

Text size md

font-size: 1remline-height: 1.5rem

Text size sm

font-size: 0.875remline-height: 1.25rem

Text size xs

font-size: 0.75remline-height: 1rem

Font Weights

Example

Style Prop

Theme Token

Regular font weight

fontWeight="regular"

theme.fontWeights.regular

Medium font weight

fontWeight="medium"

theme.fontWeights.medium

Semibold font weight

fontWeight="semiBold"

theme.fontWeights.semiBold