Hello Charlies: A Fresh Handwritten Font for Modern Web Design
Choosing the Right Typeface for a Creative Portfolio Homepage
While working on a personal portfolio site for a freelance illustrator, I found myself scrolling through font libraries, looking for something that felt both modern and personal. The goal was to create a homepage that felt inviting but still professional—something that balanced creative expression with usability. That’s when I came across Hello Charlies, a new handwritten font that immediately stood out for its clean, approachable style.
I dropped it into the hero section as a test. The homepage banner had a soft pastel background with a subtle pattern overlay. Using Hello Charlies for the headline—“Hi, I’m Lena. I draw stories to life.”—felt right. The font’s soft curves and open spacing gave it a warm, human feel without sacrificing legibility. It wasn’t too playful, nor was it too formal. It fit the brand voice perfectly.
Visual Style and Digital Appeal
Hello Charlies is a script font in the Script Amp category, meaning it has a slight bounce and variation in stroke weight that mimics natural handwriting. What makes it stand out is its clarity. Many handwritten fonts can become messy or hard to read at smaller sizes, especially on mobile screens. But this one maintains a clean structure, making it more versatile for digital use.
It has a soft, contemporary personality. Think of it as the digital equivalent of a handwritten note on quality stationery—personal, but not sloppy. It works especially well in design projects that require a human touch: greeting cards, blog headers, branding kits, landing page headlines, and social media graphics.
Using Hello Charlies in Real Web Layouts
Back to the portfolio homepage. After testing it in the hero section, I tried Hello Charlies in a few other areas: the project titles in the gallery grid, the call-to-action button on the contact section, and even as a decorative accent in the footer. Here’s what I noticed:
- At larger sizes (48px and up), it’s excellent for headlines and hero text.
- At 24px–32px, it works well for section titles and short phrases.
- Below 20px, it starts to lose clarity—especially on mobile—so I switched to a clean sans serif for captions and supporting text.
For the project gallery, I used Hello Charlies only on hover states, revealing it when users hovered over each thumbnail. This added a nice micro-interaction without overwhelming the layout. On mobile, I made sure the font scaled appropriately and didn’t interfere with thumb-friendly tap targets.
Where Hello Charlies Shines Online
This font is best suited for decorative and display use. Here are some practical applications:
- Hero headlines on landing pages and personal websites
- Logo text or brand accents for small creative businesses
- Call-to-action buttons on course sales pages or product banners
- Blog headers and featured post titles
- Testimonials or quote blocks in marketing sections
It’s not ideal for long-form body text or navigation menus. Like most script fonts, it’s better used sparingly to highlight and elevate key messages rather than for extended reading.
Readability and Responsive Design Considerations
One of the first things I checked was how Hello Charlies performed on mobile devices. I previewed the homepage on an iPhone 13 and a Samsung Galaxy S22. At 40px, the headline looked great on both devices—crisp and legible, even with a semi-transparent overlay on the background image.
On smaller screens, I adjusted the font size and line height to ensure readability. I also made sure to pair it with a clean, highly legible sans serif—Inter—for body text and secondary labels. This kind of font pairing helps maintain visual hierarchy and guides the user’s eye through the layout.
Another consideration was contrast. I tested Hello Charlies over light and dark backgrounds. On dark backgrounds, I slightly increased the font weight and added a thin white outline using CSS to improve legibility. On light backgrounds, the natural contrast of the font was sufficient.
Font Pairing Tips for Web Designers
When using a decorative display font like Hello Charlies, it’s important to pair it with something more neutral. Here are a few combinations that work well:
- Hello Charlies + Inter (clean, modern, UI-friendly)
- Hello Charlies + Georgia (elegant, editorial feel)
- Hello Charlies + Roboto (versatile for SaaS or digital product sites)
This helps maintain balance. The decorative font draws attention, while the neutral font ensures readability and consistency across the site.
Technical and Licensing Notes
Before committing to Hello Charlies for the final site build, I reviewed the font’s technical specs and licensing terms. As a web designer, it’s crucial to ensure that any premium font used in a client project is properly licensed for web and commercial use.
The font package included multiple webfont formats (WOFF, WOFF2, TTF), which is great for cross-browser compatibility. It also had a range of alternate characters and ligatures, giving me some flexibility in how the text was displayed.
It supported a wide range of languages, which was a plus since the client wanted to eventually expand into Spanish and French markets. And the commercial license allowed for use in websites, online stores, landing pages, and branded templates—no hidden fees or usage restrictions.
Final Layout Decisions
In the end, I used Hello Charlies for the homepage hero, the featured project titles, and the newsletter signup header. For everything else—body copy, navigation, and form labels—I used a system-friendly sans serif to ensure speed and accessibility.
The final site felt more polished and intentional. The font helped create a stronger emotional connection with the brand. It wasn’t just a layout—it felt like a personal introduction from the artist herself. And that’s what good modern typography should do: enhance the message, support the brand, and improve the user experience.
