Hello Broken: A Chubby Display Font That Pops on Modern Websites
Two weeks ago, I was finalizing the hero section of a new landing page for a ceramicist’s online studio — clean layout, warm photography, minimal navigation. But something felt off in the headline. The current sans serif was legible, yes, but it didn’t carry the warmth, playfulness, or tactile confidence her handmade mugs and glaze textures conveyed. So I opened my font library and typed “Hello Broken.” Instantly, the headline came alive — chunky, grounded, unapologetically friendly.
Hello Broken is a chubby display font with generous letterforms, soft curves, and tight spacing that gives it presence without aggression. It’s not delicate — it’s confident. Not retro, but warmly contemporary. Think of it as the typographic equivalent of a well-glazed stoneware mug: substantial, inviting, and quietly expressive. As a display font, it’s built to command attention — not to whisper, but to welcome.
In that ceramicist project, I used Hello Broken for the hero headline (“Handmade in Portland”) and the subhead (“Ceramics That Feel Like Home”). On desktop, it sat beautifully over a softly blurred background image — no stroke, no shadow needed. The weight held up at 64px, and the rounded terminals softened sharp edges in the layout. On mobile, I dropped it to 48px and tightened tracking slightly. It remained legible, even on lower-DPI screens, because its open counters and consistent stroke contrast prevent visual clutter.
This is where Hello Broken shines: in moments that need personality without pretension. It works brilliantly for boutique online store banners (“New Arrivals — Just Dropped”), coaching website taglines (“Clarity Starts Here”), course sales page headlines (“Design Your First Brand Kit”), and portfolio site headers (“Work • Process • Play”). Because it’s a display font — not a text font — it thrives in short bursts: headlines, section titles, CTA buttons (when sized appropriately), logo lockups, and social media graphics embedded in web layouts.
That said, I wouldn’t use Hello Broken for body copy, navigation labels, or form fields. Its charm lies in contrast. In every project where it’s landed well, I’ve paired it with a highly legible sans serif — like Inter, Manrope, or even system fonts like -apple-system — for paragraphs, captions, and interface text. The pairing creates rhythm: Hello Broken sets the tone; the sans serif carries the conversation. For a more editorial feel — say, on a creative blog or digital brand kit site — I’ve tested it with a restrained serif like Literata or Lora for pull quotes or bylines. The juxtaposition feels intentional, not forced.
Readability checks matter — especially when you’re shipping live. I always preview Hello Broken across devices: on a dark-mode toggle (it holds up well against charcoal backgrounds, especially with 10–15% letter-spacing), over textured image overlays (its boldness prevents visual sinking), and inside responsive cards (I avoid using it under 32px on mobile unless it’s a single-word accent). I also test loading behavior: since Hello Broken ships as a webfont (WOFF2 included), I make sure it’s preloaded in the and that fallbacks are graceful — usually the same sans serif I’m already using, so the hierarchy shift feels subtle, not jarring.
Licensing is non-negotiable. Before dropping Hello Broken into any client site or SaaS dashboard, I double-check the commercial license covers web embedding, e-commerce use, and template resale if applicable. It includes multiple weights — regular and bold — plus stylistic alternates (like a slightly narrower ‘a’ or open ‘g’) that help fine-tune fit in tight spaces. No italics, which is totally fine — display fonts rarely need them, and forcing slant would break its friendly geometry. It supports Latin-based languages well, though I’d verify extended diacritics if working with Spanish or French content.
One unexpected win? Using Hello Broken in animated micro-interactions. On a recent product landing page, I applied a gentle scale-up on hover to a “Get Early Access” button set in Hello Broken. The font’s thickness made the motion feel weighty and satisfying — not flashy, but tactile. That kind of subtle feedback strengthens perceived polish without adding complexity.
It’s also proven versatile beyond the screen. When the ceramicist needed matching print assets — packaging stickers, thank-you cards, even a small tattoo design for her studio’s opening — Hello Broken translated seamlessly. Its consistency across mediums reinforced her brand identity without needing separate custom lettering. That cross-platform reliability is rare in display fonts and makes Hello Broken more than just a web decoration — it becomes part of the brand’s voice.
Of course, context is everything. Hello Broken wouldn’t suit a fintech dashboard or a law firm’s homepage — its mood is too warm, too human-centered. But for creators, makers, educators, wellness practitioners, and small businesses building digital experiences rooted in authenticity? It’s a quiet upgrade. It says, “We care about craft — down to the letters.”
If you’re refining a portfolio site, launching a course, redesigning a blog header, or building a campaign landing page that needs character without chaos, Hello Broken is worth testing early. Not as a gimmick — but as a deliberate choice to make your typography feel like part of the story, not just decoration. Try it at headline size first. See how it sits beside your imagery. Check how it breathes next to your body text. Then ask: does it feel like *your* voice — amplified, not altered?
- Best for: Hero headlines, section titles, CTA buttons (32px+), logo accents, social banners
- Avoid for: Long paragraphs, navigation menus, data tables, small UI labels
- Pair with: A neutral sans serif (e.g., Inter, Manrope) or a gentle serif (e.g., Literata) for balance
- Test on: Mobile viewports, dark mode, image overlays, fast 3G connections
- Verify: Webfont format (WOFF2), commercial license scope, language support, weight options
