Typographic scale live

All of our spacing is derived from multiples of 8px. This is our baseline grid. This baseline allows us to space our text, images or any other page elements using these values.

Example

Example

Heading mega

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Intro paragraph

Paragraph

HTML

                            
<h1>Heading mega</h1>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

<p class="coop-intro-text">Intro paragraph</p>

<p>Paragraph</p>

                            

CSS

                            @import "@coopdigital/foundations-vars";
@import "_fonts.css";

h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
p,
address,
.coop-h1,
.coop-h2,
.coop-h3,
.coop-h4,
.coop-h5,
.coop-h6 {
  font-family: var(--font-family);
  font-weight: normal;
  margin-top: 0;
}

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

p {
  font-size: var(--type-base--body);
  margin-bottom: var(--spacing-base--1-4);

  &:last-child {
    margin-bottom: var(--spacing-medium--1-2);
  }

  @media (--mq-medium) {
    font-size: var(--type-medium--body);
    margin-bottom: var(--spacing-medium--1-4);
  }
}

ul,
ol {
  font-size: var(--type-base--body);
  margin-bottom: var(--spacing-base--1-4);

  @media (--mq-medium) {
    font-size: var(--type-medium--body);
    margin-bottom: var(--spacing-medium--1-4);
  }
}

.coop-h-mega {
  font-weight: bold;
  font-size: var(--type-base--h-mega);
  line-height: 1.385;
  margin-bottom: var(--spacing-base--1-2);
  padding-top: var(--spacing-base--1-2);

  @media (--mq-medium) {
    font-size: var(--type-medium--h-mega);
    margin-bottom: var(--spacing-medium--1-2);
    padding-top: var(--spacing-medium--1-2);
  }
}

h1,
.coop-h1 {
  font-size: var(--type-base--h1);
  line-height: 1.4;
  margin-bottom: var(--spacing-base--1-2);

  @media (--mq-medium) {
    font-size: var(--type-medium--h1);
    margin-bottom: var(--spacing-medium--1-2);
  }
}

h2,
.coop-h2 {
  font-size: var(--type-base--h2);
  line-height: 1.55;
  margin-bottom: var(--spacing-base--1-2);

  @media (--mq-medium) {
    font-size: var(--type-medium--h2);
    margin-bottom: var(--spacing-medium--1-2);
  }
}

h3,
.coop-h3 {
  font-size: var(--type-base--h3);
  line-height: 1.455;
  padding-top: var(--spacing-base--1-8);
  margin-bottom: var(--spacing-base--1-8);

  @media (--mq-medium) {
    font-size: var(--type-medium--h3);
    padding-top: var(--spacing-medium--1-8);
    margin-bottom: var(--spacing-medium--1-8);
  }
}

h4,
.coop-h4 {
  font-size: var(--type-base--h4);
  line-height: 1.455;
  padding-top: var(--spacing-base--1-8);
  margin-bottom: var(--spacing-base--1-8);

  @media (--mq-medium) {
    font-size: var(--type-medium--h4);
    padding-top: var(--spacing-medium--1-8);
    margin-bottom: var(--spacing-medium--1-8);
  }
}

h5,
.coop-h5 {
  font-size: var(--type-base--h5);
  line-height: 1.455;
  padding-top: var(--spacing-base--1-8);
  margin-bottom: var(--spacing-base--1-8);

  @media (--mq-medium) {
    font-size: var(--type-medium--h5);
    padding-top: var(--spacing-medium--1-8);
    margin-bottom: var(--spacing-medium--1-8);
  }
}

h6,
.coop-h6 {
  font-size: var(--type-base--h6);
  line-height: 1.5;
  padding-top: var(--spacing-base--1-4);
  margin-bottom: var(--spacing-base--1-8);

  @media (--mq-medium) {
    font-size: var(--type-medium--h6);
    padding-top: var(--spacing-medium--1-4);
    margin-bottom: var(--spacing-medium--1-8);
  }
}

small,
.coop-smallprint {
  line-height: 1.25;
  font-size: var(--type-base--small);
  padding-top: var(--spacing-base--1-4);
  margin-bottom: var(--spacing-base--1-8);

  @media (--mq-medium) {
    font-size: var(--type-medium--small);
    padding-top: var(--spacing-medium--1-4);
    margin-bottom: var(--spacing-medium--1-8);
  }
}

hr,
.coop-hr {
  display: block;
  margin: 2rem 0 3rem;
  border-style: solid;
  border-color: var(--color-grey-mid);
  border-width: 0 0 1px;
  height: 0;
  color: var(--color-grey-mid);

  &.dashed {
    border-style: dashed;
  }
}

.coop-regular {
  font-weight: normal;
  font-style: normal;
}

.coop-italic,
.coop-em {
  font-weight: normal;
  font-style: italic;
}

.coop-bold,
.coop-strong {
  font-weight: bold;
  font-style: normal;
}

.coop-medium {
  font-weight: 500;
  font-style: normal;
}

.coop-bold-italic {
  font-family: bold;
  font-style: italic;
}

blockquote,
.coop-blockquote {
  margin-bottom: var(--spacing-base--1-2);
  margin-left: var(--spacing-base--1-4);
  padding-left: var(--spacing-base--1-4);

  &:before,
  &:after {
    content: '';
    display: block;
    width: 45px;
    height: 6px;
    margin-top: var(--spacing-base--1-4);
    margin-right: 0;
    margin-bottom: var(--spacing-base--1-4);
    margin-left: var(--spacing-base--1-4);
    background: var(--color-grey-light);
  }

  @media (--mq-medium) {
    margin-left: var(--spacing-base--1-2);
  }

  p {
    margin-bottom: var(--spacing-base--1-4);
    font-style: normal;
    font-weight: normal;
    text-indent: -0.25rem;

    &.alpha,
    &.beta {
      font-style: normal;
      font-weight: normal;
    }
  }

  cite {
    font-size: var(--type-base--body);
    font-style: normal;
    margin-top: var(--spacing-base--1-4);
  }
}

cite,
.coop-blockquote__cite {
  display: block;
  font-size: 0.75rem;
}


del,
.coop-line-through {
  text-decoration: line-through;
}

address {
  font-weight: normal;
  font-style: normal;
}

.coop-intro-text {
  font-size: var(--type-base--lead);
  line-height: 1.6;
  margin-bottom: var(--spacing-base--1-8);
}

p + ul {
  margin-top: calc(-1 * var(--spacing-base--1-8));

  @media (--mq-medium) {
     margin-top: calc(-1 * var(--spacing-medium--1-8));
  }
}

dl,
.coop-definition-list {
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: var(--spacing-base--1-2);

  dt {
    font-family: var(--font-family);
    font-weight: bold;
    margin-bottom: 0;
  }

  dd {
    font-family: var(--font-family);
    margin: 0 0 var(--spacing-base--1-4);
  }
}

.coop-undecorated-list,
.coop-list-bare {
  list-style-type: none;
  padding: 0;
}

.coop-list-inline {
  list-style-type: none;
  padding: 0;

  li {
    display: inline-block;
  }
}

/* ===================================
 * Links - Co-op Front-end Foundations
 * =================================== */

a {
  color: var(--color-link);
  border-bottom: 0.05em solid var(--color-link);
  text-decoration: none;

  &:hover {
    color: var(--color-link--hover);
    border: 0;
  }

  &:active,
  &:focus {
    transition: none;
    outline: 2px dotted var(--color-link--focus);
    outline-offset: 3px;
  }
}

.link-white {
  color: var(--color-white);
  border-bottom: 0.05em solid var(--color-white);
  text-decoration: none;

  &:hover {
    color: var(--color-white);
    border: 0;
  }

  &:active,
  &:focus {
    transition: none;
    outline: 2px dotted var(--color-white);
    outline-offset: 3px;
  }
}

.link-black {
  color: var(--color-black);
    border-bottom: 0.05em solid var(--color-black);
    text-decoration: none;

    &:hover {
      color: var(--color-black);
      border: 0;
    }

    &:active,
    &:focus {
      transition: none;
      outline: 2px dotted var(--color-black);
      outline-offset: 3px;
    }
}

                            

Design and content

Size, line height and spacing above 768px
Size Line height Spacing
Mega 60px 83px Top 32px
Bottom 32px
H1 46px 64px Bottom 32px
H2 26px 40px Bottom 8px
H3 22px 32px Top 8px
Bottom 8px
H4 22px 32px Top 8px Btm 8px
H5 22px 32px Top 8px
Bottom 8px
H6 16px 24px Top 0px
Bottom 4px
P lead 26px 42px Bottom 8px
Paragraph 20px 32px Bottom 32px

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change