Mayor: A Handwritten Font for Web Design
As a web designer, I’m always on the lookout for fonts that bring personality and visual interest to a site without sacrificing readability. Mayor, a brush handwritten font from Script Amp, has quickly become one of my go-to choices for adding a warm, authentic feel to digital projects.
Testing Mayor in a Hero Section
I first tried Mayor while designing a hero section for a boutique online store. The font’s soft, flowing strokes gave the headline a handcrafted, approachable vibe that perfectly matched the brand’s aesthetic. It looked great against a bold background and added just the right amount of character without overwhelming the design.
The font’s natural variation made each letter feel unique, which is perfect for creating a sense of individuality in a digital space. Whether it was used for a tagline or a call-to-action button, Mayor brought a level of warmth that a standard sans serif might not have achieved.
Mayor on Mobile Devices
One of the biggest concerns when using a decorative font like Mayor is how it performs on smaller screens. I tested it on mobile devices and found that it remained legible even at smaller sizes. The spacing between letters was generous enough to prevent crowding, and the strokes were clear enough to maintain readability.
For buttons and headings, Mayor worked well, but I avoided using it for body text. The font’s style is best suited for short phrases and display purposes rather than long paragraphs. That said, it paired beautifully with a clean, modern sans serif for supporting text, creating a balanced contrast that enhanced the overall design.
Mayor in Landing Pages and CTA Areas
When I used Mayor in a landing page for a course sales funnel, it immediately caught the eye. The font’s expressive nature made the headline stand out, drawing users in and encouraging them to read further. It was especially effective when placed over an image banner, where its organic flow complemented the visual elements of the page.
I also experimented with using Mayor for call-to-action buttons. The font added a personal touch that felt more inviting than a typical bold sans serif. However, I made sure to keep the button text short and to the point, as longer phrases could become difficult to read at smaller sizes.
Font Pairing and Web Usability
Mayor pairs well with a variety of other fonts, especially those that offer a clean, structured contrast. For instance, pairing it with a simple serif or sans serif font helped balance its ornate style and improved overall readability. This made it ideal for websites that needed both visual flair and functional clarity.
When working on a portfolio site, I used Mayor for the main heading and paired it with a light-weight sans serif for subheadings and body copy. The result was a cohesive, professional look that still felt creative and engaging.
Considerations for Web Use
While Mayor excels in display and header use, it’s important to consider where it’s most effective. I wouldn’t recommend using it for long blocks of text, small navigation items, or form labels. Its decorative nature can make these elements harder to scan and less accessible.
That said, for areas like logos, hero sections, and branding elements, Mayor shines. It adds a human touch that can help a website feel more authentic and relatable. When used thoughtfully, it can elevate a site’s visual identity and create a stronger emotional connection with users.
Before implementing Mayor on a live site, I always check the available styles, weights, and file formats. Ensuring that the font is properly licensed for commercial use is also essential, especially when working on client projects or e-commerce sites.
