Outfit — five weights, one voice, every surface
One typeface, every voice
Outfit is a geometric sans-serif designed for versatility. From bold headlines that command attention to clean body copy that guides learners through content — one font family carries the full weight of the Lexonic brand.
Its wide range of weights gives us precision: light for elegance, semibold for structure, and black for impact.
Outfit in action
With five weights from Regular to Black, Outfit adapts to every context — weight, contrast, and scale all work together.
Outfit gives us control over the look and feel of type. We adjust weight optically for light vs dark backgrounds, use scale to establish hierarchy, and pair with brand colours for impact.
Weight scale
Five carefully chosen weights give us the range to express hierarchy, emphasis, and tone.
Try it yourself
Adjust the weight and size. Click the text to edit it.
Mega display
For hero moments, outlined type at massive scale creates drama and visual texture without overwhelming content.
Outlined text at weight 900 with -webkit-text-stroke. Use for section backgrounds, hero overlays, and scroll-driven reveals. Always pair with a solid text element for readability.
learners
Character set
Hover to explore. Every glyph in Outfit at your fingertips.
Type hierarchy
A clear hierarchy guides readers through content. Each level has a defined size, weight, and purpose.
Key principles
Tight tracking on headings
Large text uses negative letter-spacing (-0.02em) for a confident, modern feel. Body text uses default tracking for readability.
Balance your text
Use text-balance on headings to ensure even line lengths. This prevents orphans and creates visual harmony across breakpoints.
Weight conveys meaning
Headings use Medium (500) or Semibold (600) — not Bold. Reserve heavier weights (800, 900) for hero moments and impact statements.
Responsive scaling
Every heading steps down gracefully across breakpoints. Mobile first: 4xl → Tablet: 5xl → Desktop: 6xl. Never let text overflow.