Harmony Fonts | Devpost

Logo
Suggestions
Available Fonts
App description part 1
App description part 2

Inspiration

There was a time when I absolutely loved every part of being a graphic designer. Crafting visuals and choosing colors brought me so much joy. But one thing always held me back—font pairing. What should have been a fun, creative process became a frustrating chore. I spent countless late nights scrolling through endless fonts, trying to find the perfect match. The more I struggled, the more my enthusiasm faded. I started to dread what I once loved.

One night, after hours of agonizing over fonts for a client project, I hit a breaking point. I sat back, exhausted and disappointed. I remembered a time early in my career when I stumbled upon the perfect font pairing by chance, transforming my work and reigniting my passion for design. But now, that spark seemed distant.

I realized I wasn’t alone in this struggle. Designers everywhere were losing time and creativity to the same issue. That’s when I decided to create HarmonyFonts. I wanted to build something that would make font pairing effortless, bringing back the joy of design.

HarmonyFonts isn’t just an app; it’s a solution born from my own frustration. It’s about rekindling creativity and helping designers rediscover their passion.

What it does

HarmonyFonts is an intuitive extension designed to take the guesswork out of font pairing, helping designers effortlessly create beautiful, cohesive typography. By analyzing the visual characteristics of fonts—such as weight, style, and spacing—HarmonyFonts instantly suggests perfectly matched font combinations. Whether you're looking for complementary, contrasting, or hierarchical pairings, the app provides expert suggestions tailored to your project’s needs.

With HarmonyFonts, you can quickly find the right fonts for any design, saving valuable time and ensuring consistency across your work. The extension seamlessly integrates with your favorite design tools, making it easy to apply the suggested pairings directly into your projects. By simplifying the font selection process, HarmonyFonts allows you to focus more on your creativity and less on technicalities, ultimately enhancing your design workflow and boosting your confidence in typography choices.

How we built it

Developed with React and TypeScript for a dynamic, responsive interface.
Integrated with Canva App SDK and Canva UI SDK to align with Canva's UI guidelines.
Powered by LLaMA (Large Language Model Meta AI) for intelligent font pairing recommendations.
Backend processes managed with JavaScript and Node.js.
Webpack used for module bundling and optimization.
npm handled project dependencies efficiently.
Jest implemented for reliable testing.
ESLint enforced coding standards, ensuring code quality.

Challenges we ran into

Latency Issues: Encountered latency when integrating with external APIs, which impacted the responsiveness of the app and required additional optimization efforts to maintain a smooth user experience.

Accomplishments that we're proud of

Seamless Canva Integration: Achieved a smooth integration within Canva, aligning with their UI guidelines while ensuring a native, user-friendly experience.
Agile Development: Employed agile methodologies to adapt quickly to challenges, such as time zone differences and latency issues, keeping the project on track.
Intelligent Font Pairing: Developed an advanced recommendation engine using LLaMA, providing users with accurate and contextually relevant font pairings.

What we learned

Optimizing Performance: We gained valuable insights into optimizing latency issues, ensuring a smooth and responsive user experience.
User-Centered Design: Understanding the needs of designers highlighted the importance of intuitive UI/UX design, leading to a more user-friendly extension.
Agile Methodology Benefits: Embracing agile practices allowed us to quickly adapt to challenges, maintain progress, and deliver a high-quality product.

What's next for Harmony Fonts

Machine Learning Enhancements: Further refining our recommendation engine with advanced machine learning algorithms for even more precise font pairings.