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, buttons, emphasized body text |
| Inter Semibold | 600 | Bold text, Headings, Titles |
Use the weight utilities below to apply a weight to any type class.
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 (20px)
Heading 2 (16px)
Heading 3 (14px)
Heading 4 (12px)
Heading 5 (12px)
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 | Letter Spacing |
|---|---|---|---|
.pv-heading-1 |
1.25rem (20px) | 1.2 (24px) | 0.2px |
.pv-heading-2 |
1rem (16px) | 1.5 (24px) | 0.16px |
.pv-heading-3 |
0.875rem (14px) | 1.429 (20px) | 0.14px |
.pv-heading-4 |
0.75rem (12px) | 1.333 (16px) | 0.12px |
.pv-heading-5 |
0.75rem (12px) | 1.333 (16px) | 0.12px |
Body Text
Body text styles for paragraphs and general content. Uses regular font weight.
Example
Body text sizes.
Body XL - Extra large body text (14px)
Body LG - Large body text (14px)
Body MD - Medium body text (12px)
Body SM - Small body text (11px)
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>| Class | Size | Line Height | Letter Spacing |
|---|---|---|---|
.pv-text-body-xl |
0.875rem (14px) | 1.429 (20px) | 0.14px |
.pv-text-body-lg |
0.875rem (14px) | 1.429 (20px) | 0.14px |
.pv-text-body-md |
0.75rem (12px) | 1.333 (16px) | 0.12px |
.pv-text-body-sm |
0.6875rem (11px) | 1.455 (16px) | 0.11px |
Caption
Caption pairs 11px text with a tight 12px leading, for dense metadata, table footnotes, and helper text. Defaults to regular weight; layer .pv-text-medium for the medium variant.
Example
Caption text.
Caption - regular (11px)
Caption - medium (11px)
HTML
<p class="pv-text-caption">Caption - regular</p>
<p class="pv-text-caption pv-text-medium">Caption - medium</p>| Class | Size | Line Height | Letter Spacing |
|---|---|---|---|
.pv-text-caption |
0.6875rem (11px) | 1.091 (12px) | 0.11px |
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 (14px)
Title LG - Large title (14px)
Title MD - Medium title (12px)
Title SM - Small title (11px)
Title XS - Extra small title (11px)
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 | Letter Spacing |
|---|---|---|---|
.pv-text-title-xl |
0.875rem (14px) | 1.143 (16px) | 0.14px |
.pv-text-title-lg |
0.875rem (14px) | 1.143 (16px) | 0.14px |
.pv-text-title-md |
0.75rem (12px) | 1.333 (16px) | 0.12px |
.pv-text-title-sm |
0.6875rem (11px) | 1.455 (16px) | 0.11px |
.pv-text-title-xs |
0.6875rem (11px) | 1.455 (16px) | 0.11px |
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.6875rem (11px) | Bold, uppercase, wide letter-spacing |
.pv-text-eyebrow-sm |
0.6875rem (11px) | Bold, uppercase, wide letter-spacing |
Font Weight
Utility classes for font weight.
Each font size in Figma has regular, medium, and semibold variants; combine a size class with a weight class to get any of them.
Example
Weight utilities applied to body text.
Regular (400) - the default for body text
Medium (500) - labels and emphasized body text
Semibold (600) - titles and headings
Bold (700)
HTML
<p class="pv-text-body-md pv-text-regular">Regular (400)</p>
<p class="pv-text-body-md pv-text-medium">Medium (500)</p>
<p class="pv-text-body-md pv-text-semibold">Semibold (600)</p>
<p class="pv-text-body-md pv-text-bold">Bold (700)</p>| Class | Weight |
|---|---|
.pv-text-regular |
400 |
.pv-text-medium |
500 |
.pv-text-semibold |
600 |
.pv-text-bold |
700 |
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>