Typography

Barebones includes a small set of typography defaults and utility classes.

The theme provides a base font stack, an alternate font stack, text size utilities, and simple defaults for common text elements. Project-specific heading scales and editorial styles can be added as needed.

Font stacks

Font stacks are configured in assets/styles/config/_variables.scss.

$base-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$alt-font-family: 'Georgia', 'Times New Roman', Times, serif;

The base font is applied to the body.

body {
    font-family: $base-font-family;
}

Font utilities

Barebones provides two font-family utility classes.

font-base: applies the base font family
font-alt: applies the alternate font family

Example:

<p class="font-alt">
    Alternate font text
</p>

Base size and line height

The base font size and line height are configured with Sass variables.

$base-font-size: 16;
$base-line-height: 1.5;

The body uses these values for the default text size and rhythm.

body {
    line-height: $base-line-height;
    @include font-size($base-font-size);
}

Text size utilities

Text size utilities are generated from the $font-sizes map.

$font-sizes: (
    '2xl': (
        'font-size': $base-font-size + 16,
        'line-height': 1.15,
    ),
    'xl': (
        'font-size': $base-font-size + 8,
        'line-height': 1.2,
    ),
    'lg': (
        'font-size': $base-font-size + 6,
        'line-height': 1.25,
    ),
    'md': (
        'font-size': $base-font-size + 2,
        'line-height': 1.4,
    ),
    'sm': (
        'font-size': $base-font-size,
        'line-height': $base-line-height,
    ),
    'xs': (
        'font-size': $base-font-size - 2,
        'line-height': $base-line-height,
    ),
);

These values create the following classes:

text-2xl
text-xl
text-lg
text-md
text-sm
text-xs

Example:

<p class="text-lg">
    Larger introductory text.
</p>

These utilities can also be made available through the TinyMCE editor in WordPress, allowing content editors to apply the same classes to text. The utilities outlined above are automatically added to TinyMCE through the barebones_tiny_mce_before_init() function within `includes/setup.php'.

Headings and emphasis

Barebones keeps heading styles minimal.

h1,
h2,
h3,
h4,
h5,
h6,
strong {
    font-weight: bold;
}

Emphasised text uses italic styling.

em {
    font-style: italic;
}

Text spacing

Common text elements receive a bottom margin based on the base spacing unit.

h1,
h2,
h3,
h4,
h5,
h6,
p,
hr,
ul,
ol,
dl {
    margin-bottom: $base-spacing-unit;
}

The final child has its bottom margin removed. This helps stacked content behave predictably inside sections, blocks, and templates.

&:last-child {
    margin-bottom: 0;
}

Links

Links use the base colour and underline on hover.

a {
    color: map.get($colors, 'base');
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}