Testing Mexican City in a Real Web Project
I was working on a redesign for a boutique online store selling handcrafted leather goods when I came across Mexican City. It’s a slab serif font with a vintage feel, and the moment I saw it, I knew it could bring that authentic western charm to the brand’s new look.
A First Look at Mexican City
Mexican City has thick, bold strokes and a clean, structured design. It feels like it belongs in a vintage poster or a retro magazine headline. The font carries a sense of nostalgia but also has a modern edge that makes it versatile for digital use. It’s not too ornate, which is great because it keeps the design from feeling cluttered or outdated.
Slab serif fonts are known for their strong presence, and Mexican City fits right into that category. It’s perfect for headers, titles, and any part of the layout where you want to make an impact without overwhelming the user.
Using Mexican City in a Hero Section
I decided to test Mexican City in the hero section of the website. The goal was to create a strong visual hierarchy while keeping the text readable on both desktop and mobile screens. I used it for the main headline: “Handmade Leather Goods, Made with Care.” The font gave the headline a bold, confident tone that matched the brand’s values.
On smaller screens, I made sure the text size adjusted appropriately so that the font didn’t become too cramped. I also tested it over a dark image background to ensure good contrast. The result looked sharp and legible, even at smaller sizes.
Applying Mexican City Across the Site
After testing it in the hero section, I moved on to other parts of the site. I used Mexican City for section headings, product categories, and call-to-action buttons. For example, the “Shop Now” button had a subtle shadow and a slightly lighter weight of the font to stand out without being too dominant.
The font worked well in areas that needed attention, like promotional banners and feature sections. It helped reinforce the brand’s identity and created a consistent visual language throughout the site.
Readability and Branding Considerations
One thing I kept in mind was readability. Slab serifs can sometimes be harder to read at smaller sizes, especially on mobile devices. To counter that, I paired Mexican City with a clean sans serif font for body copy. This combination ensured that the text remained easy to scan while still maintaining the vintage aesthetic.
For long-form content, I used the sans serif font as the primary typeface, reserving Mexican City for headlines and subheadings. This approach helped maintain a balance between style and usability.
Font Pairing and Design Consistency
When choosing a display font like Mexican City, it’s important to think about how it pairs with other fonts in your design system. I found that pairing it with a modern sans serif font like Montserrat or Open Sans worked really well. It gave the site a polished look while keeping the text easy to read.
I also checked if the font had different weights and styles available. The more options you have, the better you can tailor the typography to fit different parts of your design. Some weights were better suited for headings, while others worked well for decorative accents.
Practical Tips for Using Mexican City
If you're considering using Mexican City in your own projects, here are a few tips:
- Use it for headlines, titles, and short phrases rather than long paragraphs.
- Pair it with a simple sans serif font for body text to maintain readability.
- Test it on different screen sizes and backgrounds to ensure it looks good everywhere.
- Check if the font supports the languages you need and has proper licensing for commercial use.
- Consider using it in logo designs or branded graphics for a cohesive visual identity.
Overall, Mexican City added a unique character to the project. It helped elevate the brand’s look without compromising on usability. Whether you're designing a portfolio site, a landing page, or a course sales page, this font can be a great addition to your design toolkit.
