Log In
Typography Test
This component is for typography style demonstration only. Visual verification of all typography classes against the Figma Foundations design system. Resize the browser to compare mobile (<1024px) and desktop (≥1024px) breakpoints.
1. Display / Headings (type-disp-*)
Style System classes from
typography.scss (Princess clientlib).
Responsive: mobile-first, desktop override at 1024px+.
.type-disp-1
Display x-large
Display x-large
DomaineDisplay, Bold (700)
D: 88px / 96px • M: 48px / 52px
LS: 0
D: 88px / 96px • M: 48px / 52px
LS: 0
.type-disp-2
Display large
Display large
DomaineDisplay, Bold (700)
D: 72px / 80px • M: 48px / 52px
LS: 0
D: 72px / 80px • M: 48px / 52px
LS: 0
.type-disp-3
Display medium
Display medium
DomaineDisplay, Bold (700)
D: 48px / 52px • M: 32px / 36px
LS: 0
D: 48px / 52px • M: 32px / 36px
LS: 0
.type-disp-4-md
Display small
Display small
DomaineDisplay, Bold (700)
D: 32px / 36px • M: 24px / 28px
LS: 1px
D: 32px / 36px • M: 24px / 28px
LS: 1px
.type-disp-5
Display x-small
Display x-small
DomaineDisplay, Bold (700)
D: 24px / 28px • M: 20px / 28px
LS: 1px
D: 24px / 28px • M: 20px / 28px
LS: 1px
.type-disp-4-sm (legacy)
Display small (legacy)
Display small (legacy)
DomaineDisplay, Bold (700)
D: 32px / 110% • M: 24px / 125%
D: 32px / 110% • M: 24px / 125%
.type-disp-6 (legacy)
Display 6 (legacy)
Display 6 (legacy)
DomaineDisplay, Bold (700)
D: 25px / 120% • M: 22px / 130%
D: 25px / 120% • M: 22px / 130%
2. Subtitles (type-subtitle-*)
Style System classes. Responsive: mobile-first, desktop at 1024px+.
.type-subtitle-1
Subtitle 1
Subtitle 1
Proxima Nova, Bold (700)
D: 32px / 150% • M: 24px / 125%
D: 32px / 150% • M: 24px / 125%
.type-subtitle-2
Subtitle 2
Subtitle 2
Proxima Nova, Bold (700)
D: 27px / 150% • M: 19px / 125%
D: 27px / 150% • M: 19px / 125%
.type-subtitle-3-regular
Subtitle 3 Regular
Subtitle 3 Regular
DomaineDisplay, Regular (400)
D: 24px / 120% • M: 20px / 120%
D: 24px / 120% • M: 20px / 120%
.type-subtitle-3-bold
Subtitle 3 Bold
Subtitle 3 Bold
DomaineDisplay, Bold (700)
D: 24px / 120% • M: 20px / 120%
D: 24px / 120% • M: 20px / 120%
.type-subtitle-4
Subtitle 4
Subtitle 4
Proxima Nova, Bold (700)
D: 22px / 120% • M: 17px / 120%
D: 22px / 120% • M: 17px / 120%
.type-subtitle-5
Subtitle 5
Subtitle 5
Proxima Nova, Bold (700)
D: 18px / 120% • M: 16px / 120%
D: 18px / 120% • M: 16px / 120%
3. Body Copy (type-body-*)
All use Proxima Nova. Responsive at 1024px+.
Hero & Intro
.type-body-hero
Body Hero text for large hero areas
Body Hero
Regular (400)
D: 25px / 140% • M: 20px / 140%
D: 25px / 140% • M: 20px / 140%
.type-body-intro-regular
Body Intro Regular for section introductions
Body Intro Regular
Regular (400) • 24px / 32px • LS: 0
.type-body-intro-italic
Body Intro Italic for emphasis
Body Intro Italic
Regular (400) Italic • 24px / 32px
.type-body-intro-bold
Body Intro Bold for strong emphasis
Body Intro Bold
Bold (700) • 24px / 32px
.type-body-intro-bold-italic
Body Intro Bold Italic
Body Intro Bold Italic
Bold (700) Italic • 24px / 32px
Large — 24px / 32px
.type-body-large-regular
Body Large Regular
Body Large Regular
Regular (400) • 24px / 32px • LS: 0
.type-body-large-italic
Body Large Italic
Body Large Italic
Regular (400) Italic • 24px / 32px
.type-body-large-bold
Body Large Bold
Body Large Bold
Bold (700) • 24px / 32px
.type-body-large-bold-italic
Body Large Bold Italic
Body Large Bold Italic
Bold (700) Italic • 24px / 32px
Medium — 18px / 28px
.type-body-medium-regular
Body Medium Regular
Body Medium Regular
Regular (400) • 18px / 28px • LS: 0
.type-body-medium-italic
Body Medium Italic
Body Medium Italic
Regular (400) Italic • 18px / 28px
.type-body-medium-bold
Body Medium Bold
Body Medium Bold
Bold (700) • 18px / 28px
.type-body-medium-bold-italic
Body Medium Bold Italic
Body Medium Bold Italic
Bold (700) Italic • 18px / 28px
Small — 16px / 24px
.type-body-small-regular
Body Small Regular
Body Small Regular
Regular (400) • 16px / 24px • LS: 0
.type-body-small-italic
Body Small Italic
Body Small Italic
Regular (400) Italic • 16px / 24px
.type-body-small-bold
Body Small Bold
Body Small Bold
Bold (700) • 16px / 24px
.type-body-small-bold-italic
Body Small Bold Italic
Body Small Bold Italic
Bold (700) Italic • 16px / 24px
4. CTA / Buttons (type-cta-*)
Typography properties only. Responsive at 1024px+.
.type-cta-button
Primary Button
Proxima Nova, Bold (700)
18px / 28px • LS: 1px • Uppercase
18px / 28px • LS: 1px • Uppercase
.type-cta-secondary
Secondary Button
Secondary Button
Proxima Nova, Semibold (600)
18px / 28px • LS: 1px • Uppercase
18px / 28px • LS: 1px • Uppercase
.type-cta-link
Primary Text Link
Primary Text Link
Proxima Nova, Semibold (600)
18px / 28px • LS: 1px • Uppercase
18px / 28px • LS: 1px • Uppercase
.type-cta-text-link
Secondary Text Link
Secondary Text Link
Proxima Nova, Regular (400)
18px / 28px • LS: 0 • Sentence
18px / 28px • LS: 0 • Sentence
.type-cta-inline-link
Inline Link
Inline Link
Proxima Nova, Regular (400)
18px / 150% • LS: 0
18px / 150% • LS: 0
.type-cta-tertiary-large
Tertiary Large
Tertiary Large
Proxima Nova, Medium (500)
16px / 150% • LS: 1px • Uppercase
16px / 150% • LS: 1px • Uppercase
.type-cta-tertiary-text
Tertiary Text
Tertiary Text
Proxima Nova, Medium (500)
16px / 150% • LS: 0.5px
16px / 150% • LS: 0.5px
.type-cta-tertiary-small
Tertiary Small
Tertiary Small
Proxima Nova, Medium (500)
12px / 150% • LS: 1px • Uppercase
12px / 150% • LS: 1px • Uppercase
5. Additional Styles
Eyebrow, Quote, Tag, Disclosure, Image Caption. Responsive at 1024px+.
Eyebrow
.type-eyebrow-large
Eyebrow Large
Eyebrow Large
Proxima Nova, Medium (500)
16px / 24px • LS: 1px • Uppercase
16px / 24px • LS: 1px • Uppercase
.type-eyebrow-medium (legacy)
Eyebrow Medium (legacy)
Eyebrow Medium (legacy)
Same specs as Eyebrow Large
.type-eyebrow-small
Eyebrow Small
Eyebrow Small
Proxima Nova, Medium (500)
14px / 20px • LS: 1px • Uppercase
14px / 20px • LS: 1px • Uppercase
Quote
.type-quote
"Sail away from the safe harbor. Explore. Dream. Discover."
Quote
DomaineDisplay, Medium (500)
D: 32px / 40px • M: 20px / 28px
LS: 0
D: 32px / 40px • M: 20px / 28px
LS: 0
Tag
.type-tag
Tag text
Tag
Proxima Nova, Semibold (600)
16px / 24px • LS: 0 • Sentence
16px / 24px • LS: 0 • Sentence
Disclosure
.type-disclosure
*Terms and conditions apply. See princess.com for details.
Disclosure
Proxima Nova, Regular (400)
14px / 20px • LS: 0
14px / 20px • LS: 0
Image Caption
.type-image-caption
Photo: Princess Cruises – Alaska Inside Passage 2025
Image Caption
Proxima Nova, Regular (400)
16px / 24px • LS: 0
16px / 24px • LS: 0
XL & Breadcrumb
.type-xl
XL
XL
DomaineDisplay, Bold (700)
D: 180px / 120% • M: 70px / 120%
D: 180px / 120% • M: 70px / 120%
.type-breadcrumb
Breadcrumb
Proxima Nova, Regular (400)
14px / 150% • LS: 0
14px / 150% • LS: 0
.type-breadcrumb-previous-page
Breadcrumb Previous Page
Proxima Nova, Regular (400)
14px / 150% • LS: 0
14px / 150% • LS: 0
6. Princess Original (headline-*, body-copy-*)
Original Princess mixin-based classes. Still active in
typography.scss.
Display / Headings
.headline-xlarge
Display x-large
headline-xlarge
DomaineDisplay, Bold
D: 88px / 96px • M: 48px / 52px
D: 88px / 96px • M: 48px / 52px
.headline-large / h1
Display large
headline-large
DomaineDisplay, Bold
D: 72px / 80px • M: 48px / 52px
D: 72px / 80px • M: 48px / 52px
.headline-medium / h2
Display medium
headline-medium
DomaineDisplay, Bold
D: 48px / 52px • M: 32px / 36px
D: 48px / 52px • M: 32px / 36px
.headline-small / h3
Display small
headline-small
DomaineDisplay, Bold
D: 32px / 36px • M: 24px / 28px
D: 32px / 36px • M: 24px / 28px
Body Copy
.body-copy-large
Body Large Regular
body-copy-large
Proxima Nova, Regular
24px / 32px • LS: 0
24px / 32px • LS: 0
.body-copy-medium
Body Medium Regular
body-copy-medium
Proxima Nova, Regular
18px / 28px • LS: 0
18px / 28px • LS: 0
.body-copy-small
Body Small Regular
body-copy-small
Proxima Nova, Regular
16px / 24px • LS: 0
16px / 24px • LS: 0
Eyebrow & Quote
.eyebrow
Eyebrow Large
eyebrow
Proxima Nova, Medium
16px / 24px • LS: 1px • Uppercase
16px / 24px • LS: 1px • Uppercase
.quote
"A journey begins with a single step aboard a Princess cruise."
quote
DomaineDisplay, Medium
D: 32px / 40px • M: 20px / 28px
D: 32px / 40px • M: 20px / 28px
How to Verify
Desktop: View at ≥1024px. Right-click any sample →
Mobile: Resize below 1024px or use DevTools mobile simulator.
Properties to verify per element:
1.
2.
3.
4.
5.
6.
7.
Inspect Element → Computed styles.Mobile: Resize below 1024px or use DevTools mobile simulator.
Properties to verify per element:
1.
font-family — DomaineDisplay or proxima-nova2.
font-weight — 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)3.
font-size — exact px or rem value4.
line-height — exact px value or percentage5.
letter-spacing — 0 or 1px6.
text-transform — uppercase or none7.
font-style — normal or italic
01 / 06
Display x-large
Disaplay large
Display medium
Display small
Display small (legacy)
Display x-mall
Display 6 (legacy)
Subtitle 1
Subtitle 2
Subtitle 3 regular
Subtitle 3 bold
Subtitle 4
Subtitle 5
Body Hero
Body Intro Regular
Body Intro Italic
Body Intro Bold
Body Intro Bold Italic
Body Large Regular
Body Large Italic
Body Large Bold
Body Large Bold Italic
Body Medium Regular
Body Medium Italic
Body Medium Bold
Body Medium Bold Italic
Body Small Regular
Body Small Italic
Body Small Bold
Body Small Bold Italic
Secondary Button
Primary Text Link
Seconday Text Link
Inline Link
Tertiary Large
Tertiary Text
Tertiary Small
Eyebrow Large
Eyebrow Medium (Legacy)
Eyebrow Small
Quote
Tag
Disclosure
Image caption
XL