Typography

Available font styles and typography mixin.

The default typography used in Sipster-Core is ‘Source Sans,' which can be found in Google Fonts. We have already taken care of linking the font in Rese Properties, so it will not be necessary to manually link it.

Also, to facilitate typography implementation, Sipster-Core offers a mixin that includes the most commonly used font-sizes and line-heights, as well as an optional param to modify the font-weight.

@include sds-typeset("font-type-value", "font-weight");

This mixin works based on the following table:

font-type value	Description
mouse	font-size: 0.75rem; line-height: 1.25rem;
sm-caps	font-size: 0.75rem; font-weigth: 700; 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: 2rem;
title-2	font-size: 2rem; line-height: 2.75rem;
title-1	font-size: 2.75rem; line-height: 3.75rem;

Finally, for the "weight" optional param in the mixin, three are three possible values to introduce:

font-weight value	weight value
base	400
semi	600
bold	700

Examples

.title {
  @include sds-typeset(title-1);
}

.subtitle {
  @include sds-typeset(title-2, bold);
}