Professional Typography

Inter + Plus Jakarta Sans specimen showcase

Inspired by Visuelt Pro - clean, professional font display without gradients

Font Pairing

Two complementary typefaces

Display Font

Plus Jakarta Sans

Headlines, titles, display text

Body Font

Inter

Body text, interfaces, reading

Clean Hierarchy

Professional typography scale

Display
Headline
Subheading
Body Text
Caption
Small

No Gradients

Professional aesthetic only

Solid colors
High contrast
Clean borders

Professional typography without visual distractions

Font Viewer
Inter + Plus Jakarta Sans

Plus Jakarta Sans - Display Font
Display / Bold
60px / 100% line height
You have the right to remain private™
Spacing: -2%
Display / Semibold
48px / 110% line height
You have the right to remain private™
Spacing: -1%
Display / Medium
36px / 120% line height
You have the right to remain private™
Spacing: 0%
Inter - Body Font
Heading 1 / Bold
32px / 120% line height
You have the right to remain private™
Spacing: -0.5%
Heading 2 / Semibold
24px / 130% line height
You have the right to remain private™
Spacing: 0%
Heading 3 / Medium
20px / 130% line height
You have the right to remain private™
Spacing: 0%
Body / Regular
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Body / Medium
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Caption / Regular
14px / 140% line height
You have the right to remain private™
Spacing: 0.5%
Caption / Medium
14px / 140% line height
You have the right to remain private™
Spacing: 0.5%
Small / Regular
12px / 140% line height
You have the right to remain private™
Spacing: 1%
Weight Comparison - 16px
Light / 300
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Regular / 400
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Medium / 500
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Semibold / 600
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Bold / 700
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Extrabold / 800
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Black / 900
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Size Scale - Medium Weight
12px
You have the right to remain private™
14px
You have the right to remain private™
16px
You have the right to remain private™
18px
You have the right to remain private™
20px
You have the right to remain private™
24px
You have the right to remain private™
30px
You have the right to remain private™
36px
You have the right to remain private™
48px
You have the right to remain private™
60px
You have the right to remain private™

Usage Examples

CSS Classes

Tailwind classes for professional typography

/* Display Headlines - Plus Jakarta Sans */
.font-display = font-family: "Plus Jakarta Sans"
text-6xl font-bold font-display leading-none tracking-tight
text-4xl font-semibold font-display leading-tight tracking-tight

/* Body Text - Inter */
.font-sans = font-family: "Inter" (default)
text-3xl font-bold leading-tight tracking-tight
text-xl font-medium leading-tight
text-base font-normal leading-relaxed

/* Professional Hierarchy */
text-5xl font-bold          /* Page titles */
text-3xl font-semibold      /* Section headers */
text-xl font-medium         /* Card titles */  
text-base font-normal       /* Body text */
text-sm font-medium         /* Labels */
text-xs font-normal         /* Captions */
← Back to Design System