Using Extraordinary: How a Display Font Can Transform a Web Design
I was working on the hero section for a boutique online store, a brand that sells whimsical ceramics and curated home goods. The initial moodboard was perfect—soft colors, clean layouts, and photography that felt warm and handmade. But the typography felt flat. A standard sans-serif headline looked too corporate, too cold. I needed something that carried the brand’s personality instantly, from the very first glance a visitor would have. That’s when I opened my font library and started testing Extraordinary.
The First Impression: A Font with a Playful Mood
Extraordinary is, as its name suggests, a display font designed to stand out. It’s cute, playful, and undeniably fun. The letters have a simple, rounded structure, but there’s a subtle energy in their curves and proportions. It’s not overly ornate or childish; it’s confident. As I typed the store’s name into my design file, the entire header section shifted. The visual effect was strong and immediate. The brand’s essence—creative, approachable, joyful—was suddenly communicated before anyone read a single line of body copy. This is the power of a well-chosen display font in web design: it sets the emotional tone.
In digital layouts, especially on landing pages, portfolio sites, or product pages, that first-second impression is everything. A font like Extraordinary acts as a visual anchor. I found it worked brilliantly for the main headline, the H1. On this ceramics site, it made the brand name feel special, like a piece of art itself. For a coaching website or a creative entrepreneur’s homepage, it would create an instant connection of warmth and originality.
Practical Application in Real Web Projects
Once the hero headline was set, I began exploring other uses. A display font like this isn’t for your body text—that’s a crucial readability rule. But its domain is vast across a site’s visual hierarchy.
Key Areas for Impact
- Hero Titles & Section Headings: This is its primary home. It commands attention and defines sections.
- Call-to-Action Phrases: On buttons for "Shop the Collection" or "Book a Session," it adds a friendly urgency.
- Online Shop Banners & Promotional Graphics: For seasonal sales banners or featured product announcements over imagery.
- Blog Post Titles & Featured Graphics: In a blog redesign, it can make your content headers more engaging.
- Logo Text & Brand Marks: For a digital brand kit, it can serve as the foundational type for a logo or wordmark.
- Decorative Accents: Used sparingly for numbers, short quotes, or key stats on a campaign landing page.
For the ceramics store, I used it for the H1, the H2s for product category titles ("Handmade Mugs", "Artisan Vases"), and the main button on the hero. Consistency here builds a polished brand experience. The user scans the page and subconsciously registers a cohesive, intentional style.
Readability and Responsive Layout Considerations
Even a playful font must be legible. On desktop, Extraordinary was clear and crisp. But responsive design means testing everywhere. On mobile, I increased the letter-spacing slightly for longer headlines to ensure clarity on smaller screens. A key observation: this font performs best at larger sizes. Using it for anything below maybe 24px, especially on mobile, would compromise its charm and readability.
I also tested it over both light and dark backgrounds. Its rounded, solid forms held up well, with no thin strokes that might vanish on a dark banner. When placing it over image overlays, I ensured there was enough contrast and a clear, non-busy section of the photo behind it. This is standard web font practice, but with a distinctive display font, it’s even more critical—you want its personality to shine without a fight with the background.
Building a Complete Typographic System: Font Pairing
A display font alone is not a system. It needs a partner. For body copy, buttons labels, and longer paragraphs, you need a highly readable, neutral typeface. I paired Extraordinary with a simple, clean sans-serif font. This is a classic web design strategy: the display font provides personality and visual appeal for key moments; the sans-serif (or even a gentle serif for a more editorial feel) handles the heavy lifting of reading.
This pairing creates a clear typographic hierarchy. The user instinctively knows what’s a headline and what’s content. It builds brand trust by showing professional, thoughtful design decisions. For a course sales page or a SaaS landing page, this hierarchy guides the eye and supports the conversion journey, making important information scanable and actions clear.
A Note on Technical & Licensing Checks
Before committing any font to a live website or client project, practical checks are essential. For Extraordinary, I confirmed it was available as a webfont, meaning it could be loaded via CSS (often using @font-face) without sacrificing quality or performance. I checked the file formats included and ensured it had the necessary licensing for commercial use on an online store—this is a must for any digital product creator or business owner. I also looked for any alternate characters or weights to see if it offered flexibility for different tones, though its single, strong weight felt perfect for this brand’s consistent voice.
Performance matters, too. A well-optimized webfont shouldn’t slow down your site. It’s part of building a fast, user-friendly experience.
The Final Effect: More Than Just a Font
Implementing Extraordinary across the key touchpoints of that boutique site transformed the project. It wasn’t just about making things "look cute." It was about embedding the brand's character into the digital experience. The website felt more cohesive, more intentional, and more engaging. For a visitor, it signaled a creative, human-centric brand from the moment they landed.
Whether you’re designing a portfolio homepage to showcase your work, a coaching website to attract clients, or a product landing page to tell a compelling story, your typography choices are a direct communication channel. A display font like Extraordinary, when applied thoughtfully with readability and pairing in mind, can elevate that communication from ordinary to, well, extraordinary. It turns functional text into a memorable part of your brand’s online presence.
