Typography
Typefaces
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()"':;,.
Inter is the primary typeface used for both headings and body text.
Font Weights
| Font | Weight | Usage |
|---|---|---|
| Inter Regular | 400 | Body text |
| Inter Medium | 500 | Labels |
| Inter Semibold | 600 | Bold text, Headings, Titles |
Display Text
Display styles are used for large, prominent text like hero headlines. They use the display font family with semibold weight and responsive sizing.
Example
Display text styles.
Display 1
Display 2
Display 3
Display 4
HTML
<p class="pv-display-1">Display 1</p>
<p class="pv-display-2">Display 2</p>
<p class="pv-display-3">Display 3</p>
<p class="pv-display-4">Display 4</p>| Class | Size | Line Height |
|---|---|---|
.pv-display-1 |
48px - 64px (responsive) | 1.1875 |
.pv-display-2 |
40px - 48px (responsive) | 1.167 |
.pv-display-3 |
32px - 36px (responsive) | 1.222 |
.pv-display-4 |
24px | 1.333 |
Headings
Heading styles for section titles and content hierarchy.
Example
Heading text styles.
Heading 1 (44px)
Heading 2 (36px)
Heading 3 (28px)
Heading 4 (24px)
Heading 5 (20px)
HTML
<h1 class="pv-heading-1">Heading 1</h1>
<h2 class="pv-heading-2">Heading 2</h2>
<h3 class="pv-heading-3">Heading 3</h3>
<h4 class="pv-heading-4">Heading 4</h4>
<h5 class="pv-heading-5">Heading 5</h5>| Class | Size | Line Height |
|---|---|---|
.pv-heading-1 |
2.75rem (44px) | 1.182 |
.pv-heading-2 |
2.25rem (36px) | 1.222 |
.pv-heading-3 |
1.75rem (28px) | 1.143 |
.pv-heading-4 |
1.5rem (24px) | 1.167 |
.pv-heading-5 |
1.25rem (20px) | 1.2 |
Body Text
Body text styles for paragraphs and general content. Uses regular font weight.
Example
Body text sizes.
Body XL - Extra large body text (22px)
Body LG - Large body text (20px)
Body MD - Medium body text (18px)
Body SM - Small body text (16px)
Body XS - Extra small body text (14px)
Body XXS - Smallest body text (12px)
HTML
<p class="pv-text-body-xl">Body XL - Extra large body text</p>
<p class="pv-text-body-lg">Body LG - Large body text</p>
<p class="pv-text-body-md">Body MD - Medium body text</p>
<p class="pv-text-body-sm">Body SM - Small body text</p>
<p class="pv-text-body-xs">Body XS - Extra small body text</p>
<p class="pv-text-body-xxs">Body XXS - Smallest body text</p>| Class | Size | Line Height |
|---|---|---|
.pv-text-body-xl |
1.375rem (22px) | 1.455 |
.pv-text-body-lg |
1.25rem (20px) | 1.6 |
.pv-text-body-md |
1.125rem (18px) | 1.556 |
.pv-text-body-sm |
1rem (16px) | 1.5 |
.pv-text-body-xs |
0.875rem (14px) | 1.429 |
.pv-text-body-xxs |
0.75rem (12px) | 1.333 |
Title Text
Title styles are similar to body text sizes but with semibold weight. Use for labels, card titles, and emphasized text.
Example
Title text sizes.
Title XL - Extra large title (22px)
Title LG - Large title (20px)
Title MD - Medium title (18px)
Title SM - Small title (16px)
Title XS - Extra small title (14px)
HTML
<p class="pv-text-title-xl">Title XL - Extra large title</p>
<p class="pv-text-title-lg">Title LG - Large title</p>
<p class="pv-text-title-md">Title MD - Medium title</p>
<p class="pv-text-title-sm">Title SM - Small title</p>
<p class="pv-text-title-xs">Title XS - Extra small title</p>| Class | Size | Line Height |
|---|---|---|
.pv-text-title-xl |
1.375rem (22px) | 1.273 |
.pv-text-title-lg |
1.25rem (20px) | 1.2 |
.pv-text-title-md |
1.125rem (18px) | 1.333 |
.pv-text-title-sm |
1rem (16px) | 1.25 |
.pv-text-title-xs |
0.875rem (14px) | 1.667 |
Eyebrow Text
Eyebrow text is used for small, uppercase labels above headings or content sections.
Example
Eyebrow text styles.
Eyebrow Large
Eyebrow Small
HTML
<p class="pv-text-eyebrow-lg">Eyebrow Large</p>
<p class="pv-text-eyebrow-sm">Eyebrow Small</p>| Class | Size | Properties |
|---|---|---|
.pv-text-eyebrow-lg |
0.875rem (14px) | Bold, uppercase, letter-spacing |
.pv-text-eyebrow-sm |
0.75rem (12px) | Bold, uppercase, letter-spacing |
Text Alignment
Utility classes for text alignment.
Example
Text alignment utilities.
Left aligned text
Center aligned text
Right aligned text
HTML
<p class="pv-text-left">Left aligned text</p>
<p class="pv-text-center">Center aligned text</p>
<p class="pv-text-right">Right aligned text</p>| Class | Description |
|---|---|
.pv-text-left |
Left align text |
.pv-text-center |
Center align text |
.pv-text-right |
Right align text |
.pv-text-center-on-small |
Center align text on small screens only |
Text Transform
Example
Uppercase text.
This text is uppercase
HTML
<p class="pv-text-uppercase">This text is uppercase</p>Line Clamping
Use .pv-line-clamp to truncate text after a specified number of lines. The default is 3 lines, but you can customize with the --lines custom property.
Example
Clamped text with ellipsis.
This is a long paragraph that will be truncated after three lines of text. The remaining content will be hidden and replaced with an ellipsis to indicate there is more content available.
HTML
<!-- Default: 3 lines -->
<p class="pv-line-clamp">Long text content...</p>
<!-- Custom line count -->
<p class="pv-line-clamp" style="--lines: 2">Long text content...</p>Blockquotes
Use .pv-blockquote for styled quotations with a decorative quote mark.
Example
A blockquote with citation.
Healthcare pricing transparency is essential for patients to make informed decisions about their care. Turquoise Health
HTML
<blockquote class="pv-blockquote">
Healthcare pricing transparency is essential for patients to make informed decisions about their care.
<cite>Turquoise Health</cite>
</blockquote>Keyboard Keys
Use .pv-kbd to style keyboard key indicators.
Example
Keyboard shortcuts.
Press Cmd + K to open the command palette.
HTML
<p>Press <kbd class="pv-kbd">Cmd</kbd> + <kbd class="pv-kbd">K</kbd> to open the command palette.</p>External Links
Use .pv-link-external to add an external link indicator icon.
Example
An external link.
HTML
<a href="https://example.com" class="pv-link-external">Visit external site</a>For links on dark backgrounds, wrap in .pv-text-inverse:
HTML
<p class="pv-text-inverse">
<a href="https://example.com" class="pv-link-external">External link on dark background</a>
</p>Highlighted Text
Use .pv-mark to highlight text with a yellow background.
Example
Highlighted text.
Search results for healthcare pricing.
HTML
<p>Search results for <mark class="pv-mark">healthcare</mark> pricing.</p>Underline Styles
Use .pv-underline-dotted for dotted underline text, often used for abbreviations or terms with definitions.
Example
Dotted underline.
The CMS regulates healthcare pricing.
HTML
<p>The <abbr class="pv-underline-dotted" title="Centers for Medicare and Medicaid Services">CMS</abbr> regulates healthcare pricing.</p>List Styles
Custom list styles for different use cases.
Do/Don’t Lists
Use data-list-style="do" or data-list-style="dont" for guidelines and best practices.
Example
Do and don’t lists.
- Use clear, concise language
- Include helpful examples
- Use jargon without explanation
- Write overly long paragraphs
HTML
<ul>
<li data-list-style="do">Use clear, concise language</li>
<li data-list-style="do">Include helpful examples</li>
</ul>
<ul>
<li data-list-style="dont">Use jargon without explanation</li>
<li data-list-style="dont">Write overly long paragraphs</li>
</ul>Check Lists
Use data-list-style="check" for feature lists or completed items.
Example
A checklist.
- Responsive design
- Accessibility compliant
- Cross-browser support
HTML
<ul data-list-style="check">
<li>Responsive design</li>
<li>Accessibility compliant</li>
<li>Cross-browser support</li>
</ul>Display Lists
Use data-list-style="display" for numbered steps with prominent styling.
Example
A display numbered list.
HTML
<ol>
<li data-list-style="display">Create your account</li>
<li data-list-style="display">Configure your settings</li>
<li data-list-style="display">Start exploring data</li>
</ol>Use data-list-incomplete to show incomplete or disabled steps:
HTML
<ol>
<li data-list-style="display">Create your account</li>
<li data-list-style="display" data-list-incomplete>Configure your settings</li>
<li data-list-style="display" data-list-incomplete>Start exploring data</li>
</ol>