On this page

Typography
Primary Product
Alternate Product
Type Ramp
Heading Styles
Paragraph
Alignment
Lead In
Quote
Header & Paragraph
Semantics

Typography

Acquia's style sheet uses Proxima Nova as its primary font family. You will need to manually include Proxima Nova using Typekit by adding one of the following embed code snippets near the top of the <head> element of your site. It is recommended that you use the advanced embed code, since it is non-blocking and will load the font asynchronously using JavaScript. See Typekit's documention on embed codes for more information.

On this page

Typography
Primary Product
Alternate Product
Type Ramp
Heading Styles
Paragraph
Alignment
Lead In
Quote
Header & Paragraph
Semantics


        <link rel="stylesheet" href="https://use.typekit.net/pey8xam.css">


        <style>

          @import url("https://use.typekit.net/pey8xam.css");

        </style>


        <script>
          (function (d) {
            var config = {
              kitId: 'pey8xam',
              scriptTimeout: 3000,
              async: true
            },
              h = d.documentElement, t = setTimeout(function () { h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive"; }, config.scriptTimeout), tk = d.createElement("script"), f = false, s = d.getElementsByTagName("script")[0], a; h.className += " wf-loading"; tk.src = 'https://use.typekit.net/' + config.kitId + '.js'; tk.async = true; tk.onload = tk.onreadystatechange = function () { a = this.readyState; if (f || a && a != "complete" && a != "loaded") return; f = true; clearTimeout(t); try { Typekit.load(config) } catch (e) { } }; s.parentNode.insertBefore(tk, s)
          })(document);
        </script>

Note Acquia's Typekit Kit ID pey8xam can only be used with Acquia sites and products on registered domains such as *.acquia.com.

Proxima Nova Regular

Proxima Nova Regular Italic

Proxima Nova Regular Semibold

Proxima Nova Regular Semibold Italic

Proxima Nova Regular Bold

Proxima Nova Regular Bold Italic

Nunito Sans Regular

Nunito Sans Regular Italic

Nunito Sans Semibold

Nunito Sans Semibold Italic

Nunito Sans Bold

Nunito Sans Bold Italic

Open Sans Regular

Open Sans Regular Italic

Open Sans Semibold

Open Sans Semibold Italic

Open Sans Bold

Open Sans Bold Italic

Helvetica Regular

Helvetica Regular Italic

Helvetica Semibold

Helvetica Semibold Italic

Helvetica Bold

Helvetica Bold Italic

Class

Size

Example

Description

.text-xl

30px
1.875rem

Page Header

Used in page headers.

.text-lg

24px
1.5rem

Section Header

Used in empty/error state headers, modal headers.

.text-md

16px
1rem

Card Header

Interactive Element

Used in buttons, alerts, primary navigation items, and selected dates in the datepicker.

Used in form field labels, tab nav, body text in empty/error states, tabs on headers, and secondary navigation items.

.text-sm

14px
0.875rem

Body Text

Used in tables, UI text, tags, calendar dates, dropdown text, form input fields, breadcrumb, link text in lists - (needs review), input field in modals, pre-headers, small button.

.text-xs

12px
0.75rem

Table Header

Metadata

Badge

Used in tables.

Used in calendar weekday header.

Used in badges.

H1 Heading Sample Text

Heading Sample Text
Wrap on Two Line

H2 Heading Sample Text

Heading Sample Text
Wrap on Two Line

H3 Heading Sample Text

Heading Sample Text
Wrap on Two Line

H4 Heading Sample Text

Heading Sample Text
Wrap on Two Line

H5 Heading Sample Text

Heading Sample Text
Wrap on Two Line

H6 Heading Sample Text

Heading Sample Text
Wrap on Two Line

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus vulputate vestibulum. Aliquam erat volutpat. Nunc porttitor accumsan dictum. Nulla sagittis dolor at magna faucibus lacinia. Aliquam consectetur augue non nunc porta vulputate.

Nunc porttitor accumsan dictum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus vulputate vestibulum. Aliquam erat volutpat.

Truncated te…
Truncated text phrase…
lowercase text
uppercase text
initial cap text
Sentence case text
Normal weight
Semibold weight
Bold weight
Italic text
Monospaced text
Muted text
Link text

This is abbr text example

This is b text example

This is cite text example

This is code text example

This is ~~del~~ text example

This is dfn text example

This is em text example

This is i text example

This is ins text example

This is kbd text example

This is q text example

This is s text example

This is samp text example

This is small text example

This is span text example

This is strong text example

This is _sub text example

This is ^sup text example

This is u text example

This is var text example

Proxima Nova Regular

Proxima Nova Regular Italic

Proxima Nova Regular Semibold

Proxima Nova Regular Semibold Italic

Proxima Nova Regular Bold

Proxima Nova Regular Bold Italic

Nunito Sans Regular

Nunito Sans Regular Italic

Nunito Sans Semibold

Nunito Sans Semibold Italic

Nunito Sans Bold

Nunito Sans Bold Italic

Open Sans Regular

Open Sans Regular Italic

Open Sans Semibold

Open Sans Semibold Italic

Open Sans Bold

Open Sans Bold Italic

Helvetica Regular

Helvetica Regular Italic

Helvetica Semibold

Helvetica Semibold Italic

Helvetica Bold

Helvetica Bold Italic

H1 Heading Sample Text

Heading Sample Text Wrap on Two Line

H2 Heading Sample Text

Heading Sample Text Wrap on Two Line

H3 Heading Sample Text

Heading Sample Text Wrap on Two Line

H4 Heading Sample Text

Heading Sample Text Wrap on Two Line

H5 Heading Sample Text

Heading Sample Text Wrap on Two Line

H6 Heading Sample Text

Heading Sample Text Wrap on Two Line

Heading Sample Text
Wrap on Two Line

Heading Sample Text
Wrap on Two Line

Heading Sample Text
Wrap on Two Line

Heading Sample Text
Wrap on Two Line

Heading Sample Text
Wrap on Two Line

Heading Sample Text
Wrap on Two Line