Brat Font Explained: What Font Is Used on Charli XCX’s Album Cover?

Few album covers in recent memory have triggered as much conversation, imitation, and outright obsession as Charli XCX’s 2024 record “Brat.” The lime-green square with a single lowercase word slapped across it in a blurry, slightly stretched typeface became shorthand for an entire cultural moment, spawning memes, marketing campaigns, merchandise, and an endless stream of “brat generator” tools online. What’s fascinating from a design standpoint is that the typography driving all of this attention isn’t some rare, custom-built typeface locked away in a boutique foundry. It’s something far more ordinary, treated in a way that turned it into one of the most recognizable visual signatures of the decade. This article breaks down exactly what the brat font is, why it looks the way it does, and how you can recreate that low-resolution, DIY aesthetic yourself using tools you probably already have.

What Is the Brat Font, Really?

The honest answer surprises a lot of people: there is no official “brat font” you can purchase or download from a type foundry. The cover, designed by the New York-based studio Special Offer, Inc., uses plain Arial the same default sans-serif that ships with every Windows and Mac computer and sits in the font menu of nearly every word processor on earth. What makes it look distinctive isn’t the letterforms themselves but the treatment applied to them. The word was set entirely in lowercase, stretched vertically so the letters appear taller and narrower than standard Arial, and then rendered at a deliberately small pixel size before being scaled back up. That upscaling is what produces the soft, slightly out-of-focus edges that give the cover its signature blur. Layer that treatment over the now-iconic acidic green background, and you get a look that feels raw, unfinished, and almost accidental which was very much the point.

Because the vertical stretching makes standard Arial look condensed, a huge number of designers, bloggers, and font-identification tools have misattributed the look to Arial Narrow, a genuinely distinct (and narrower) font variant. That mix-up has taken on a life of its own, and today most “brat font generators” online default to Arial Narrow Bold simply because it gets close to the vertically stretched effect without requiring any manual transformation. If you’re recreating the look for practical purposes, using Arial Narrow is a reasonable shortcut, but if you want to be technically accurate to the original artwork, plain Arial stretched and blurred is the more faithful approach.

The Design Philosophy Behind the Look

Understanding why the cover looks intentionally cheap and rushed helps explain why it resonated so widely. Charli XCX has spoken publicly about wanting an “offensive, off-trend” shade of green, a color that would feel jarring rather than pleasant, paired with typography that looked like it had been thrown together in a hurry rather than polished by a design team. That anti-aesthetic — messy, low-fidelity, almost confrontational — stood in direct contrast to the glossy, over-produced album art that dominates streaming platforms. It read as authentic and unbothered, which fit the album’s themes of contradiction, messiness, and refusing to perform likability. In branding terms, the cover succeeded precisely because it broke the conventions of what a “professional” cover is supposed to look like, and that rebellious quality is exactly what people are chasing when they try to recreate it for their own projects, whether that’s a mixtape cover, a t-shirt design, or a marketing campaign riding the trend.

Anatomy of the Brat Typography

If you strip the look down to its core components, a handful of specific choices are doing all the work, and getting them right is what separates a convincing recreation from something that just looks like default text on a green square:

• All-lowercase lettering with no capitalization anywhere, including the first letter
• Vertical stretching of the base Arial typeface, scaling the height without proportionally increasing the width
• Low-resolution rendering, achieved by designing at a small pixel size and scaling the image up rather than down
• A soft Gaussian blur, typically in the range of a few pixels, applied over the final text
• Tight letter spacing, with characters pulled slightly closer together than default tracking
• A flat, saturated green background, commonly referenced by the hex code #8ACE00
• Off-white or pure white text, kept simple with no gradients, shadows, or embellishments

None of these elements is complicated on its own, but the combination is what creates the specific texture people recognize instantly, even from a thumbnail-sized image on a phone screen.

How to Recreate the Brat Font in Canva

Canva has become the default tool for a huge percentage of people chasing this trend because it requires no design background and no software installation. Start by creating a square canvas and filling the background with a saturated green, using a custom hex value close to #8ACE00 rather than a generic preset green, since the specific shade matters more than people expect. Add a text box, switch the font to Arial Narrow (or Arial, if you want to manually stretch it), type your word entirely in lowercase, and reduce the letter spacing slightly using the spacing slider in the text panel. Resize the text box to stretch the letters taller if you’re using standard Arial rather than the narrow variant. The trickiest part is the blur, since Canva’s built-in blur effects are usually designed for images rather than text; a reliable workaround is exporting the design at a small resolution, such as 300 pixels wide, and then re-importing and scaling it back up to your target size, which naturally introduces the soft, low-fidelity look without needing a dedicated blur tool.

How to Recreate It in Photoshop or Illustrator

For anyone comfortable with more advanced software, Photoshop offers finer control over every variable in the recreation. Set your canvas to the desired dimensions, fill the background layer with your chosen green, and add a text layer using Arial. Use the Character panel to adjust the vertical scale independently from the horizontal scale, pushing the vertical percentage up while keeping horizontal scale closer to normal, which replicates the stretched effect precisely rather than approximating it. Once the text looks right, apply Gaussian Blur from the Filter menu at a low radius, somewhere between two and six pixels depending on your canvas size, and flatten the image before exporting. Illustrator works similarly, though since it’s vector-based by default, you’ll want to rasterize the text layer before applying any blur filter, since blur effects behave inconsistently on unrasterized vector paths.

Designers who want pixel-perfect control over the low-resolution effect often build the entire composition at a fraction of the final size say, one-quarter scale and then use nearest-neighbor or bicubic scaling to blow it back up, which gives a more authentic degraded texture than a blur filter alone.

How to Recreate It in CSS and HTML

For developers and marketers building landing pages, banners, or social posts, this look translates surprisingly well into code, and it’s a nice trick to have on hand for any client project that wants to tap into the trend without commissioning custom artwork.

.brat-text { background-color: #8ace00; font-family: Arial, Helvetica, sans-serif; text-transform: lowercase; font-weight: 400; transform: scaleY(1.25); letter-spacing: -1px; filter: blur(1.5px); color: #ffffff; display: inline-block; padding: 40px; }

The transform: scaleY() property handles the vertical stretch, letter-spacing tightens the tracking, and the filter: blur() property recreates the soft edge without needing an image editor at all. Because this is pure CSS, it’s fully responsive and easy to adapt for banner ads, hero sections, or promotional graphics where you need the effect to scale cleanly across screen sizes.

Common Mistakes to Avoid

A lot of recreations miss the mark because they lean too hard on one element while ignoring the others. Using a bold font weight is one of the most frequent errors; the original artwork uses a fairly standard weight, not a heavy bold, so recreations that go bold often end up looking chunkier and less faithful than intended. Another common mistake is skipping the blur entirely and relying only on the stretched, lowercase text, which produces a look that reads as “condensed font on green background” rather than the specific low-fidelity texture that made the original distinctive. Overdoing the blur is just as much of a problem, since too much softness makes the text illegible rather than atmospheric. Finally, color accuracy matters more than most people assume — a generic lime or neon green preset from a design tool rarely matches the specific yellowish, slightly muted green from the original, and getting that hex value close is often what makes or breaks whether a recreation actually reads as “brat” to someone glancing at it.

The Evolution of the Cover and Why It Still Matters

The look didn’t stay static. In April 2025, Charli XCX updated the album artwork across streaming platforms to show the same lowercase word with the text scratched or crossed out, a visual shift that coincided with new tour dates and kept the aesthetic in circulation well beyond the album’s initial release window. That willingness to revisit and alter an already-iconic design is itself instructive: the brat aesthetic was never meant to be a fixed, precious piece of branding, but a flexible visual language that could be remixed, mocked, and reapplied across contexts, from concert backdrops to political campaign graphics that borrowed the color and type treatment during the same election cycle. That flexibility is exactly why the look has had such staying power in design and marketing circles well after the initial cultural wave of “brat summer” passed. For anyone working in branding, social media, or content design, understanding the mechanics behind the trend — rather than just copying a finished image — makes it far easier to adapt the aesthetic thoughtfully for a new product, campaign, or creative project instead of producing a stale imitation.

Final Thoughts

The brat font is a reminder that the most memorable design choices aren’t always the most technically complex ones. A default system font, treated with intention and a clear point of view, outperformed countless polished, custom-built alternatives simply because it committed fully to a specific mood. Whether you’re recreating the look in Canva for a personal project, building it in Photoshop for a client, or coding it directly into a webpage, the core ingredients are the same: lowercase Arial, a deliberate stretch, tight spacing, a soft blur, and that unmistakable acid-green backdrop. Nail those five elements together and you’ll have a recreation that feels authentic rather than approximate.

Want the effect without opening Photoshop? Try our brat font text generator to get it instantly.