Styleguide

Base Font styles

There are several base type styles that are used on the site. These form the foundation of the default type classes and are not meant to be used by themselves unless a custom style is needed. These are independent of sizing and just make typeface, line-height, and tracking settings consistent across the site.

  • Body: This is the default global font applied to the site using Acumin Pro.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit

    font-family: acumin-pro, sans-serif;
    line-height: 1.42;

  • Display/Display Blog: For headings there is a 'display' font style Acumin Pro Wide. The blog version has a slightly reduced line-height.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit

    .font-display, .font-display-blog

    font-family: 'acumin-pro-wide', sans-serif;
    letter-spacing: -.05em;
    line-height: 1.5; // Blog 1.3

  • Section: Section headings have a larger beefier type, with all caps and reduced line-height

    Lorem ipsum dolor sit amet, consectetur adipiscing elit

    .font-section

    font-family: 'acumin-pro-wide', sans-serif;
    text-transform: uppercase;
    letter-spacing: -.025em;
    line-height: 1;

  • Meta: Meta styles styled for smaller headings, are uppercase and increased tracking.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit

    .font-section

    font-family: 'acumin-pro-wide', sans-serif;
    text-transform: uppercase;
    letter-spacing: .1em;

Default Type Styles

These are the final type styles that are applied through the site. They have consistent font styling and responsive sizing.

Body Text

The default text for the site with responsive sizing.

Responsive: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Mobile: Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-base

Desktop: Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-lg

Regular Heading

There is a default heading and a large heading. The sizes are responsive and adjust from mobile to desktop.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.c-heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.c-heading-lg

Blog and long format heading

Headings for the blog and other long form content uses a slightly larger and thinner font

Lorem ipsum dolor sit amet, consectetur

.c-heading-blog

Lorem ipsum dolor sit amet, consectetur

.c-heading-blog-lg

Section heading

For section headings there is a larger bold style that is designed to be used with the outlined option for contrast

Lorem ipsum Outlined

.c-heading-section, .text-outline

Meta Text

For for secondary text there is a compact meta style.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.c-meta

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.c-meta-lg

CTA Text

For CTA links there is a set styling based on meta text with underline and hover styles applied.

Lorem ipsum dolor sit amet

.c-cta

Lorem ipsum dolor sit amet

.c-cta-lg

Font Sizing

There is a defined type size scale to give consistent sized fonts throughout the site. These can be used to modify the default type styles to accomodate custom designs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-4xs

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-3xs

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-2xs

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-xs

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-base

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-lg

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-2xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-3xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-4xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-5xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-6xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-7xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-8xl