Typography

Our typography is built on "Inter", a carefully crafted typeface designed for computer screens. We use a smaller base font size (14px) for a subtle, elegant, and professional appearance.

Font Family

Aa Bb Cc

Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto...

Regular (400)

Medium (500)

SemiBold (600)

Bold (700)

Headings

h1 / 24px (1.5rem) / Bold

The quick brown fox jumps over the lazy dog

h2 / 20px (1.25rem) / SemiBold

The quick brown fox jumps over the lazy dog

h3 / 18px (1.125rem) / SemiBold

The quick brown fox jumps over the lazy dog

Body Paragraphs

.text-lead / 16px (1rem) / Regular

This is the lead paragraph text. It's slightly larger than the base font size and uses a relaxed line height. It's perfect for introductory sections right below page titles.

Body Base / 14px (0.875rem) / Regular

This is the standard body text. It is set at 14px, offering a clean, compact reading layout that conveys a premium density of information without looking cluttered or bulky.

Small Text (.form-text, .form-label) / 12px-13px / Regular or SemiBold

This is small or helper text, typically used for captions, input labels, or subtle hints.

Line Heights

Tight (1.2) - Best for headings

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

Normal (1.5) - Best for body text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

Relaxed (1.75) - Best for lead text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.