Frankly: A Bold Display Font for Web Designers
A recent boutique online store redesign gave me the perfect excuse to dig through dozens of display fonts. The client wanted a headline typeface that felt warm, slightly vintage, and impossible to ignore—without screaming at visitors. When I dropped Frankly into the hero section mockup, the whole layout clicked. Its bold strokes and casual charm made the tagline feel like a friendly invitation, exactly the kind of personality this small business needed.
First Impressions on a Full‑Width Hero Banner
I placed the store’s main message over a lifestyle photo, using a semitransparent overlay to keep the text legible. Frankly held its ground beautifully. The letterforms have a subtle hand‑drawn quality—slightly irregular curves and a playful baseline—that gives the brand a down‑to‑earth, personal feel. At large sizes, the details pop: the generous x‑height, the sturdy serifs that keep it from feeling too casual, and the overall weight that commands attention without competing with the image.
What struck me most was how easy it was to read even at a glance. Many display fonts sacrifice readability for style, but Frankly’s clarity holds up for short headlines, promotional banners, and even the main call‑to‑action button. I tested it on a dark background, and the reversed white text remained crisp. On a light background, the black letterforms felt anchored, solid.
Mobile Readability and Responsive Layouts
No web project is complete without checking how a display font behaves on smaller screens. I scaled the hero section down to mobile widths, and Frankly still worked. The bold weight kept the headline readable even when the viewport squeezed it to a modest size. I did need to adjust letter‑spacing slightly—the compact default setting can feel a bit crowded at 16px on a phone. A tiny increase and a comfortable line‑height made the tagline breathable.
Over image banners, the font’s thickness helps fight the busy background noise. I added a subtle dark gradient overlay to the hero image, and the white text on top maintained excellent contrast. The font files loaded quickly as woff2, which matters for mobile performance and Core Web Vitals. No fuss, no flicker.
Pairing Frankly with a Clean Sans Serif
For body copy, I paired it with a neutral, workhorse sans serif like Inter. The contrast creates a clear typographic hierarchy: the display font announces sections, and the sans serif handles the long‑form reading. That pairing feels modern, approachable, and highly usable. On a few inner pages, I experimented with a serif body font for a more editorial vibe, but the sans serif kept the boutique’s online store feeling fresh and fast.
This pairing lets Frankly do what it does best—grab attention—while the clean body text keeps the user experience smooth. It’s a combination I’ve since used on coaching websites, where the bold headers add personality without overpowering the calm, reassuring tone of the service pages.
Where Frankly Shines in a Real Web Project
After a week of testing, I found the font’s sweet spots:
- Hero titles and landing page headlines – large, impactful, and immediately memorable.
- Section headings that break up long pages, such as testimonials, product showcases, and feature lists.
- Call‑to‑action buttons and promotional badges, where the heavy weight says “click me” in a friendly way.
- Logo wordmarks and brand lockups, where the typeface becomes a signature visual element.
- Social media graphic templates and email headers, creating a consistent brand thread across channels.
It’s not designed for navigation menus, small UI labels, or dense paragraphs—the details get muddy at tiny sizes. But for short, bold phrases, Frankly is a reliable workhorse with a warm personality.
Technical Considerations and Licensing
Before committing to a client project, I always check the webfont kit. Frankly ships with clean woff and woff2 formats, which are essential for modern web performance. The font supports standard Latin characters and a practical set of punctuation, enough for the multilingual storefront I was working on. I also looked for stylistic alternates—while this particular display font leans into its consistent, bold character, it’s always worth confirming what’s included.
Equally important is the commercial license. Using a premium font on a live e‑commerce site, in digital templates, or across client brand assets requires proper rights. The license covered web embedding, use in static designs, and even social media graphics, which gave me peace of mind. I always recommend reading the EULA carefully, especially if the font might end up in a logo or a digital brand kit.
Building a Cohesive Brand with a Display Font
Once the site launched, the brand identity felt instantly more polished. Frankly tied the homepage, blog headers, and promotional banners together with a single, recognizable voice. The casual charm of the typeface aligned perfectly with the boutique’s hand‑picked products and personal service. Reusing the same display font across digital touchpoints—landing pages, email campaigns, and even Instagram story templates—created a visual consistency that small businesses often struggle to achieve.
For a portfolio site, I’d use it for the creator’s name and project titles. For a course sales page, the headline would draw the eye straight to the value proposition. The flexibility lies in restraint: using Frankly only where it makes the biggest impact, and letting quieter typefaces handle the rest.
Readability, Scanning, and User Trust
Good typography does more than look nice. It guides the eye, establishes trust, and helps visitors scan content quickly. A bold display font like Frankly signals confidence and stability. When placed in the hero area, it tells the user “you’re in the right place” before they even read a word. Combined with a clear visual hierarchy, it reduces cognitive load and makes the browsing experience feel effortless.
On light backgrounds, the font’s weight feels solid and professional. On dark backgrounds, it becomes a beacon. Over photographic images, a little layering—like a subtle shadow or a half‑tone overlay—ensures contrast without hiding the photo’s mood. I always test headings on at least three different screen sizes and two background scenarios to avoid surprises.
Real‑World Scenarios Beyond the Boutique
While my project centered on a small online store, the same principles apply widely. A coaching website could use Frankly for motivational headers and workshop titles. A product landing page might feature it in the hero and the main benefit statements. A blog redesign could treat it as the article title typeface, paired with a comfortable serif for reading. In a digital brand kit, it becomes a go‑to asset for creating on‑brand thumbnails, ads, and quote graphics.
The key is moderation. A display font is a spice, not the main course. Use it for the pieces that need to stand out, and let a reliable sans serif or serif handle the long‑form copy. This balance keeps the design professional, readable, and aligned with modern UX expectations.
Choosing a display font for a website always feels like a small but significant decision. Frankly earned its spot in the project not because it was the loudest option, but because it brought warmth, readability, and a genuine personality that matched the brand’s voice. It’s the kind of typeface that makes a digital layout feel more human, more approachable, and ultimately more effective—without ever trying too hard.
