Typography

Scales #

All typography in Superkube is built on scales with values of font size and line height. Based on these scales, the framework automatically generates typography and modifiers for all core modules. These are the default typography groups:

// =Scales
$scales: (
    type: (
        prose-body: (...),
        heading: (...),
        text: (...)
    )
);

Let's look at these groups in detail.

prose-body

prose-body scale forms the font size and line height for the prose-body module.

prose-body: (
    h1: 64px 1.1,
    h2: 32px 1.2,
    h3: 20px 1.3,
    h4: 16px 1.4,
    h5: 16px 1.4,
    h6: 16px 1.4,
    lead: 24px 1.4,
    p: 16px 1.5
)

Text

Based on the text scale modifiers of the Text module are generated with the text- prefix.

text: (
    mega: 24px 1.5,
    huge: 20px 1.5,
    large: 18px 1.5,
    default: 16px 1.5,
    medium: 14px 1.5,
    small: 13px 1.5,
    micro: 12px 1.5
)

This means that if you specify <p class="text-large">...</p> in the HTML, the paragraph will be 18px and with a line-height of 1.5.

Heading

Based on the heading scale modifiers of the Heading module are generated with the heading- prefix.

heading: (
    super: 80x 1.1,
    giga: 64px 1.1,
    mega: 48px 1.1,
    huge: 40px 1.2,
    large: 32px 1.2,
    medium: 24px 1.3,
    small: 20px 1.3,
    micro: 16px 1.4,
    tagline: 11px 1.4
)

This means that if you specify <h1 class="heading-giga">...</h1> in the HTML, the heading will be 64px and with a line-height of 1.1.

Responsive #

The typographic scale has several groups for different typography depending on the screen size.

• type-sm — for small (mobile) screens less than 768px.
• type-md — for medium screens or for tablets less than 1024px.
• type-lg — for large screens more than 1442px.

// =Scales
$scales: (
    type-sm: (...),
    type-md: (...),
    type-lg: (...)
);

By extending $type and specifying values in these groups, you can set the behavior of text sizes on different devices and screens.

// =Scales
$scales: map-extend($scales, (
    type-sm: (
        text: (
            mega: 28px 1.5
        ),
        heading: (
            giga: 52px 1.1,
            mega: 42px 1.1
        )
    ),
    type-lg: (
        heading: (
            giga: 120px 1
        )
    )
));

Note: See the section below on how to extend the typography scale.

Extend #

To extend the default values of type scales, you need to create your scales.scss and then extend $scales map in it.

// your project
superkube/
vars/
    scales.scss
vars.scss
main.scss

Next, import scales.scss in your custom framework settings in the vars.scss file.

// vars.scss
@import "vars/scales";

Now you can extend the typo scale in the scales.scss file with map-extend function.

// =Scales
$scales: map-extend($scales, (
    type: (
        text: (
            xlarge: 19px 1.5
        ),
        heading: (
            exa: 120px 1
        )
    )
));

As a result, Superkube will automatically create new modifiers for Text and Heading modules with specified font sizes.

<p class="text-xlarge">...</p>
<h1 class="heading-exa">...</h1>

Change #

Changing the default values works on the same principle. You extend $type by specifying a new value and it changes when Superkube is built.

// =Scales
$scales: map-extend($scales, (
    type: (
        prose-body: (
            h1: 72px 1.1
        ),
        heading: (
            large: 40px 1.1
        )
    )
));