what font does the brat cover use?
The brat font is not a font. The text on the 2024 lime-green cover is plain Arial, squished horizontally to about 69% of its natural width, with a slight gaussian blur on top. That is the entire recipe. Nothing to buy, nothing to install, no custom lettering hiding underneath. If you came here hoping for a download link, good news: you already own the typeface. What you were missing is the two transformations, and those take a minute each.
the answer, precisely
Start with Arial. Regular weight, default letter spacing, everything lowercase. Scale it sideways to roughly 69% of its natural width. Done. That is the type half of the look.
Most people guess Arial Narrow, and the guess is reasonable but wrong. Arial Narrow is a separately drawn condensed typeface. Its strokes were designed for that narrow width, so vertical and horizontal lines keep a consistent relationship to each other. Squishing regular Arial is cruder: the vertical strokes get thinner while the horizontal strokes keep their full weight. The result is subtly lopsided in a way no properly drawn condensed font ever is. Put the two side by side and the difference is small but real, and the cover matches the squished version, distortion and all.
That crudeness is not a flaw to fix. It is the point. A real condensed cut would look designed. The squish looks like someone dragged a text box until it fit, which is exactly the energy the cover runs on.
Nothing else about the type changes. The letter spacing is Arial's default: the gaps compress along with the letters when the word is squished, and that is all the tightening the look needs. The weight is regular, not bold. And the case is always lower, because a capital letter would imply the whole thing was trying.
the blur is not a font feature
The second half of the recipe has nothing to do with type. The original artwork was designed tiny and then upscaled, and the upscaling left every edge soft. Measured against the final file, the softness works out to a gaussian blur with a sigma of 0.4% of the canvas edge. On a 2048px square, that is about 8 pixels.
Skip the blur and your recreation reads like a parody made in a spreadsheet. Keep it and the word sits in that degraded, screenshotted-too-many-times zone where the style lives. Cover art is supposed to be sharp and labored over. This look refuses both, on purpose, and the blur is how it says so.
how to recreate it anywhere
Any tool with a text layer can do this. The numbers are the same everywhere:
- 1
Set your text in regular Arial, all lowercase. Arimo behaves identically if Arial is not on your system.
- 2
Squish it. Scale the text layer horizontally to about 69%. In CSS that is
transform: scaleX(0.69). - 3
Blur it. Gaussian, with a sigma around 0.4% of your canvas edge: roughly 8px on a 2048px square, 4px on a 1080px one.
- 4
Center on the ink, not the line box. The original centers the painted pixels, and a short word stands about 27% of the canvas tall. Most software centers the line box instead, which floats the word slightly high, so nudge it.
Put it on the right background while you are at it. The green is #8ACE00, and the color code page has it in every format with copy buttons.
the open-font route
One practical snag: Arial is not free. It ships with Windows and Apple systems, but it is a licensed font, and Android does not include it. Render squished Arial on a phone that lacks it and the system quietly substitutes something else, the widths shift, and your carefully measured layout drifts.
The clean way around this is Arimo. It is metrically identical to Arial: every letter occupies exactly the same horizontal space, the spacing tables match, and the shapes are near-identical. Its open license lets anyone embed it or self-host it. That is what this site does. Every image renders from one self-hosted Arimo file, so the brat font output is the same on a Mac, a Windows laptop, and a cracked Android, pixel for pixel.
If you are building your own version, do the same. Arimo is in every major open font library, it costs nothing, and it saves you from the classic bug report where the design looks right on your machine and wrong on everyone else's. Metric-identical means you can swap it in without touching a single measurement.
One thing no font choice can solve: all of this produces an image. If what you actually need is styled characters that stay as text, so they can be pasted into a username, a bio, or a message box, that is a different trick entirely. Unicode has whole alternate alphabets built in, and tools like aesthetic fonts or cute fonts swap your letters for them. They are not fonts in the typographic sense and they will not give you the brat look, but they go where an image cannot. Both are mine, and both are free.
Or skip the manual work. The brat font generator applies the 69% squish, the measured 0.4 blur, and the ink-box centering automatically, live in your browser, then exports at full resolution with no watermark. Type a word, download the file, move on with your day.