CatalystTypographyv0.2.9Ready for Production
Installation and usage of PMI's brand typeface Aeonik using either Tailwind CSS or direct imports from CDN.
Certifications
Advance your career with a PMP certification
The Project Management Professional (PMP) is the world's leading project management certification. Join over one million certified professionals driving change globally.
Installation
- Install the package:
npm install @pmi/catalyst-typography- Add the preset to
tailwind.config.ts:
import { tailwindTypographyPreset } from '@pmi/catalyst-typography';
export default {
presets: [tailwindTypographyPreset],
};- Register the Aeonik
@font-facerules inapp/globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: 'Aeonik';
src: url('https://cdn.pmi.org/dsm/fonts/Aeonik/Aeonik-Regular.woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Aeonik';
src: url('https://cdn.pmi.org/dsm/fonts/Aeonik/Aeonik-Medium.woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Aeonik';
src: url('https://cdn.pmi.org/dsm/fonts/Aeonik/Aeonik-Bold.woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Aeonik';
src: url('https://cdn.pmi.org/dsm/fonts/Aeonik/Aeonik-Black.woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
}- Apply the font globally in
app/layout.tsx:
export default function RootLayout({ children }) {
return (
<html>
<body className="font-display font-normal">{children}</body>
</html>
);
}Font Scale
Designs on the product side of PMI use the standard Tailwind font scale. See the Tailwind CSS font size documentation for full usage details. Check out the Marketing tab for marketing-related projects like .org and MyPMI.
These role names give designers and developers a shared vocabulary — each maps directly to a Tailwind class in the underlying scale.
| Role | Tailwind class | Size | Use |
|---|---|---|---|
display | text-header-3xl | 120px / 110px lh | Hero backgrounds, oversized brand moments |
display-sm | text-header-2xl | 72px / 72px lh | Large hero headings |
heading | text-header-xl | 56px / 62px lh | Primary page headings |
heading-sm | text-header-lg | 40px / 44px lh | Section headings |
subheading | text-header-md | 32px / 36px lh | Subsection headings |
subheading-sm | text-header-sm | 24px / 28px lh | Card and panel titles |
title | text-header-xs | 22px / 26px lh | Small titles, list headings |
title-sm | text-header-2xs | 18px / 22px lh | Extra small titles |
body-lg | text-body-xl | 24px / 30px lh | Lead paragraphs |
body | text-body-lg | 20px / 26px lh | Standard reading text |
body-sm | text-body-md | 18px / 24px lh | Supporting body copy |
caption | text-body-sm | 16px / 20px lh | Captions, secondary text |
caption-sm | text-body-xs | 14px / 18px lh | Fine print |
label | text-eyebrow | 14px / 18px lh | Overlines, eyebrow labels |
For teams not yet on Tailwind, replicate these utilities in your own stylesheet as a step toward the standard. Reference:
Font Weight
Font weight is controlled by Tailwind utility classes regardless of whether you are using the product scale or the marketing semantic scale. See the Tailwind Font Weight documentation for the full reference.
Aeonik X Height
Aeonik's x-height requires a small bottom padding offset to align correctly inside flex containers. Some Catalyst components (Badge, Button) already include this. For custom components, add pb-2 to the text node only — icons and non-text elements do not need it.
<div className="h-40 flex items-center justify-center">
<span className="pb-2">Text Node</span>
<ArrowRightIcon />
</div>Accessibility
All type sizes meet WCAG 2.2 AA minimum size requirements, with line heights preset for comfortable reading at each scale step. Key points:
- Font loading —
font-display: swapprevents invisible text during the font load. - Scaling — All sizes use
remunits so they respect user browser preferences. - Semantics — Typography classes are presentation-only; pair them with appropriate semantic HTML (
<h1>–<h6>,<p>) for correct document structure.