Loyola: A Fun Sans Serif for Web Design
There I was, staring at a blank hero section on a new client’s website, trying to find the right font to make the headline pop. The site was for a boutique online shop selling handmade soaps and candles, and the brand needed something that felt modern yet approachable. That’s when I pulled up Loyola by Rodrigo Araya Salas from Rodrigo Typo. It wasn’t just another sans serif—it had a personality that made me want to use it everywhere.
Visual Personality and Digital Appeal
Loyola is a fun, playful sans serif that leans into a slightly irregular, hand-drawn aesthetic. It doesn’t feel too rigid or overly clean, which makes it perfect for creative brands looking to stand out without sacrificing readability. The letterforms have a friendly, almost whimsical charm that adds warmth to digital designs. It’s not too bold, but it has enough character to make headlines and headings feel dynamic and engaging.
What I love most about Loyola is how it balances style with usability. It’s not a purely decorative font, which means it can hold its own in web layouts without needing a lot of extra spacing or design work around it. It works well as a display font, especially for headers, call-to-action buttons, and short phrases that need to grab attention.
Web Usability and Responsive Performance
I tested Loyola on several different screen sizes, from mobile phones to desktop monitors, and it performed consistently. On smaller screens, the font remained legible without feeling cramped. It didn’t require any special adjustments to look good on touch devices, which is a big plus for designers working on responsive sites.
One of the first places I used Loyola was in a hero section for a product landing page. The headline was a simple “Handmade with Love,” and it looked great against a background image of a candle jar. The font added a sense of authenticity and craft that matched the brand’s message perfectly. It also worked well over dark backgrounds, where some fonts can lose clarity.
Best Uses for Loyola in Web Projects
Loyola shines in areas where visual hierarchy matters. It’s ideal for headlines, subheadings, and CTA buttons—places where you want to make an immediate impression. I’ve used it on a portfolio site to highlight project titles, on a coaching website to introduce service offerings, and on a blog header to add a bit of flair without overwhelming the reader.
It also pairs well with simpler fonts. For example, I paired Loyola with a clean sans serif like Open Sans for body text. This combination gave the site a balanced look—modern yet warm, professional yet personable. The contrast between the two fonts helped guide the user’s eye through the content without creating visual noise.
Another place where Loyola excels is in digital ads and social media graphics. Its unique shape makes it stand out in a crowded feed, and it’s easy to read even at smaller sizes. I used it on a promotional banner for a seasonal product launch, and it caught the eye without being distracting.
When Loyola Might Not Be the Best Fit
While Loyola is a great choice for headlines and short phrases, it’s not ideal for long paragraphs or dense blocks of text. Its stylized letters can become harder to read when used in body copy, especially on smaller screens. I wouldn’t recommend using it for form labels, navigation menus, or anything that requires high readability at a glance.
It also isn’t the best choice for accessibility-heavy interfaces. If a site needs to meet strict accessibility standards, Loyola might not be the primary font for large sections of text. However, it can still be used as a secondary element, like a logo or decorative accent.
Font Pairing and Design Flexibility
When working with Loyola, I always check what other fonts are available in the same family. Rodrigo Typo includes multiple weights and styles, which gives designers more flexibility. I found that using a lighter weight for subheadings and a bolder version for main headlines created a nice visual rhythm without overwhelming the layout.
For projects that require multilingual support, Loyola’s character set is comprehensive enough for most Western languages. But if a site needs support for non-Latin scripts, it’s worth double-checking the font’s capabilities before finalizing the design.
Commercial licensing is another important consideration. Loyola is available for purchase, and the license allows for use in both personal and commercial projects. As a designer, I always make sure to review the terms before using a font on a client’s site or in a digital template.
