Marketing typography

Beta
Not reviewed for accessibility

Source

On this page

The typography for our marketing pages differs from Primer CSS's core. It is responsive, on a slightly different scale, and headlines are set in the defined marketing font.

Heading utilities

Use .h0-mktg – .h6-mktg to change an element's font, size, and weight on marketing pages.

<p class="h0-mktg">This is heading 0</p>
<p class="h1-mktg">This is heading 1</p>
<p class="h2-mktg">This is heading 2</p>
<p class="h3-mktg">This is heading 3</p>
<p class="h4-mktg">This is heading 4</p>
<p class="h5-mktg">This is heading 5</p>
<p class="h6-mktg">This is heading 6</p>

<p class="h0-mktg">This is heading 0</p>
<p class="h1-mktg">This is heading 1</p>
<p class="h2-mktg">This is heading 2</p>
<p class="h3-mktg">This is heading 3</p>
<p class="h4-mktg">This is heading 4</p>
<p class="h5-mktg">This is heading 5</p>
<p class="h6-mktg">This is heading 6</p>

Body content utilities

Use .f0-mktg – .f6-mktg to change an element's body font, size, and weight on marketing pages.

<p class="f0-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>

<p class="f1-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>

<p class="f2-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>

<p class="f3-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>

<p class="f4-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>

<p class="f5-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>

<p class="f6-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>

<p class="f0-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>

<p class="f1-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>

<p class="f2-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>

<p class="f3-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>

<p class="f4-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>

<p class="f5-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>

<p class="f6-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>

Typographic utilities

These utilities are meant to be used in addition to Primer CSS's core utilities.

<p class="pullquote">I'm a pullquote. Someone said these words in real life, and now they're on the internet</p>

<p class="pullquote">I'm a pullquote. Someone said these words in real life, and now they're on the internet</p>

Edit this page on GitHub

7 contributors

Last edited by reeceatkinson on August 30, 2022