Typography

All about typography in Superkube.

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: (
        base: (...),
        text: (...),
        heading: (...),
        input: (...),
        button: (...),
        form: (...)
    )
);

Let's look at some groups in detail.

Base

Base scale forms the font size and line height for framework elements, i.e. for tags without classes.

base: (
    h1: 56px 1.15,
    h2: 28px 1.35,
    h3: 20px 1.4,
    h4: 16px 1.5,
    quote: 18px 1.5,
    quotecite: 14px 1.5,
    table: 15px 1.5,
    pre: 14px 1.5,
    figcaption: 12px 1.5
)

This means that if you specify <h1>...</h1> in the HTML, the heading will be 48px and with a line-height of 1.2.

Text

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

text: (
    giga: 32px 1.5,
    mega: 24px 1.5,
    huge: 20px 1.5,
    large: 18px 1.5,
    default: 16px 1.5,
    medium: 14px 1.5,
    small: 13px 1.5,
    tiny: 12px 1.5,
    micro: 11px 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: (
    giga: 80px 1.1,
    mega: 64px 1.1,
    huge: 48px 1.2,
    large: 36px 1.2,
    medium: 24px 1.3,
    small: 20px 1.4,
    micro: 16px 1.5,
    eyebrow: 11px 1.5
)

This means that if you specify <h1 class="heading-giga">...</h1> in the HTML, the heading will be 80px 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: (
            giga: 28px 1.5
        ),
        heading: (
            giga: 60px 1.1,
            mega: 56px 1.1
        )
    ),
    type-lg: (
        heading: (
            giga: 120px 1
        )
    )
));

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

Type Space #

In addition to the text size scale, Superkube has a scale of spacing between headings and paragraphs, and between other content elements. Based on this scale Superkube automatically generates type spacing.

// =Scales
$scales: (
    type-space: (
        h1-to-tag: 5rem,
        h2-to-tag: 3rem,
        h3-to-tag: 3rem,
        h4-to-tag: 2rem,
        h5-to-tag: 2rem,
        h6-to-tag: 2rem,
        tag-to-tag: 5rem,
        tag-to-h2: 8rem,
        tag-to-h3: 8rem,
        tag-to-h4: 8rem,
        tag-to-h5: 8rem,
        tag-to-h6: 8rem,
        figure-to-tag: 8rem,
        form-item-to-item: 5rem
    )
);

Here's how it works:

• h2-to-tag — this means that there will be a default 3rem (or 12px) margin from the h2 tag to the next paragraph or other tag.
• tag-to-h3 — this means that there will be a default 8rem (or 32px) margin from the paragraph tag or other tag to the preceding h3.

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: (
            large-z: 18px 1.5
        ),
        heading: (
            exa: 100px 1
        )
    )
));

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

<p class="text-large-z">...</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: (
        base: (
            h1: 64px 1.1
        ),
        heading: (
            large: 40px 1.1
        )
    ),
    type-space: (
        h1-to-tag: 5rem
    )
));

Getting #

Getting and generating modifiers and values from typo scales is already built into Superkube. But if you need to use typo scales to build your modules or styles, you can get the value from $type using Functions:

• type-size
• type-line
• type-line-alt
• type-space

.item {
    font-size: type-size(text, medium);
    line-height: type-line(text, medium);
    margin-bottom: var(--type-space-tag-to-tag);
}