Typography

Typographic scale, sizes, and weights to help create hierarchy and organize content.

The main typeface used in Sipster Design System is Inter.

Sipster utilizes the typographic scale: Major Second (1.125), with a base font-size of 1rem (16px). To retain balance with Sipster's base layout unit of 4, this scale is standardized to the closest multiple of 0.25rem (4px) while aiming to retain a line-height as close as possible to 1.5.

Inter is a variable font, which means it contains various axes that can be controlled on a very granular level. To simplify implementation while still providing the ability to create flexible hierarchy, three font-weights are provided by default.

Weight	Value
base (regular)	400
semi	600
bold	750

---

Applying Type

Typesets ('Text styles' in Figma) are the preferred way of applying text-based styles in Sipster. They are preformatted combinations of properties using the $sip_type_sizes() and $sip_type_weights() maps found within the _typography.scss partial.

Available Typesets

Name	Preformatted Properties
mouse	font-size: 0.75rem; line-height: 1.25rem;
sm-caps	font-size: 0.75rem; font-weight: semi; letter-spacing: 0.04em; line-height: 1rem; text-transform: uppercase;
body	font-size: 0.875rem; line-height: 1.25rem;
body-lg	font-size: 1rem; line-height: 1.5rem;
heading-2	font-size: 1.25rem; line-height: 1.75rem;
heading-1	font-size: 1.5rem; line-height: 2.25rem;
title-2	font-size: 2rem; line-height: 3rem;
title-1	font-size: 2.75rem; line-height: 3.75rem;

Design: Figma Library

The SDS Core Figma library contains the available Typesets, referred to as Text styles in Figma.

These Text styles provide the approved Typeset and font-weight options, and are available for use throughout projects.

Currently, these Text styles represent combinations of scale and weight styles. Formatting styles like italics or bold require the detachment of the root Text style first before they are available. *A future version may provide dedicated Text styles for format options.

Development: SCSS Typeset Mixin

To simplify implementation and styling of typography for developers, Sipster provides a custom mixin: @include sds-typeset().

This mixin returns the preformatted properties for a specified typeset (from the table above) with an optionally defined font-weight (defaults to regular/400).

@include sip-typeset($name, $weight)

Typography is standardized (via the sds-reset.scss file) so that developers can write semantic code and not worry about inherited browser/useragent styles. An <h1> element with the typeset 'body-lg' should look and feel the same as a <span> element with the same typeset applied.

Because this is a custom mixin, it needs to be implemented at the same level as other properties for a CSS selector using @include.

Example:

.myCustomClass_Title {
  @include sds-typeset(heading-1, semi);
}

.myCustomClass_Subtitle {
  @include sds-typeset(sm-caps);
}

.myCustomClass_Message {
  @include sds-typeset(body);
}

Compiled CSS:

.myCustomClass_Title {
  font-size: 1.5rem;
  line-height: 2.25rem;
  font-weight: 600;
}

.myCustomClass_Subtitle {
  font-size: 0.75rem;
  font-weight: semi;
  letter-spacing: 0.04em;
  line-height: 1rem;
  text-transform: uppercase;
}

.myCustomClass_Message {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

This page and its contents focus on typography implementation and styling at the root SCSS level. The SDS Components package includes an additional method for easily adding typography to React projects via the <Text> component.