What S Your Pronoun

Putting Your Pronouns on Display Without Overthinking It

I've been using What's Your Pronoun for about two years now, mostly because my email signature kept looking sparse and I wanted something that felt more personal without taking up half the line. The tool itself is straightforward: you pick your pronouns, choose a color, grab a snippet of code, and paste it somewhere. That's basically the entire workflow. But there are a few things that aren't obvious if you've never dealt with it before, and I ran into a couple of edge cases that cost me more time than I'd like to admit. First, head to the project page. The main hub is what'syourpronoun.org, and the source lives on GitHub. You pick from a list of pronoun sets — she/her, he/him, they/them, neopronouns, you name it — and then you adjust the visual settings. The default is a typewriter animation that types out each pronoun in sequence, which is what most people recognize from Twitter and Instagram bios. You can slow it down, speed it up, swap the color, or turn the animation off entirely if you just want static text. Once you're happy with the preview, you get either an embed code or a direct link. The embed version drops an iframe into your HTML, which works fine for personal websites and blogs. The link version is what most people use for social media — just paste the URL into your bio field. If you're embedding it on a site, the code looks something like this:

<a href="https://whatsyourpronoun.org/your-pronouns" target="_blank" rel="noopener"><img src="https://whatsyourpronoun.org/your-pronouns/preview.png" alt="My pronouns" /></a> The rel="noopener" attribute is important. Without it, the linked page gets access to your window object, which is a minor security thing but easy to forget. I learned that the hard way when someone on a forum mentioned it and I realized my existing embeds were missing it. For social media bios, just grab the short URL. It takes you to a clean page that shows your chosen pronouns in the animated typewriter style. Some platforms like Twitter and LinkedIn let you paste the full link directly. Others, like Instagram, only show the first part of the URL unless you use a link-in-bio tool. That's a platform limitation, not a What's Your Pronoun limitation, but it catches people off guard.

The Edge Case That Cost Me an Afternoon

Here's where it gets messy. I tried embedding the widget inside a dark-mode-only section of my site. The widget's default background is white, and there's no built-in option to toggle that via the public config. So my pronoun display looked like a bright white rectangle slapped onto a dark background. Ugly. I spent about twenty minutes digging through the GitHub issues before I found the workaround: you can pass a background parameter in the URL. Something like ?background=%231a1a2e where the hex code is URL-encoded. The preview on the generator page doesn't mention this, and it's not in the main README. I found it in a comment thread from six months ago. Similarly, the font size isn't adjustable through the UI. If you're embedding via iframe, you control the size with CSS on the container. If you're using the link, you're stuck with whatever the page renders. Again, not documented anywhere prominent. These aren't dealbreakers, but they're the kind of gaps that make you feel like you're hitting a wall when you first try to customize it.

What People Miss About How It Actually Works

Most guides stop at "pick your pronouns and paste the link." But there's a subtlety that matters if you're putting this on a real website: the widget loads external resources. The typewriter animation relies on a web font and a small JS file pulled from the project's CDN. If your site is behind a strict Content Security Policy or an ad blocker, the animation might not render. I had a reader report that the pronoun display showed as blank on their end, and it turned out their browser was blocking the font request. The fix was adding the domain to their allowlist, but that's not something the average person knows to check. Another thing: the pronoun data isn't stored locally. Every time someone visits your link or your embedded widget, it hits the server to fetch your configuration. That means if the service goes down, your pronoun display goes with it. I don't think that's a realistic concern — the project has been up since 2020 — but it's worth knowing. If you need something that's entirely self-hosted and independent of an external service, you'd be better off writing your own typewriter CSS animation or using a library like intro.js that gives you full control. What's Your Pronoun trades autonomy for convenience.

When It Doesn't Work Well

The iframe embed doesn't play nice with print stylesheets. If someone prints your page, the pronoun widget often comes out as a blank box or an oversized image depending on the browser. There's no media query override built in. A simple CSS rule like @media print { iframe { display: none; } } fixes it, but again, that's not obvious if you're not familiar with print-specific CSS. The tool also doesn't support RTL languages out of the box. The typewriter animation runs left-to-right, which is fine for English pronouns but looks wrong if you're displaying pronouns in Arabic or Hebrew. There's no flag or parameter to flip the direction. If you're in a multilingual context, you'd need to fork the project or build your own version.

Bottom Line

What's Your Pronoun is the fastest way to put a pronoun badge online if you don't want to maintain your own code. It's free, it's mobile-friendly, and the customizability covers 90% of what most people need. The remaining 10% — dark mode backgrounds, font size tweaks, RTL support — requires reading through GitHub issues and comments to find the undocumented workarounds. If that frustrates you, forking the repo and hosting it yourself is straightforward; the code is MIT-licensed and the setup is just a static site. If you just want it done in five minutes, the default settings will get you there. I still use the default link version for social media and the embed with a tweaked background for my website. Both work, and I haven't had a reason to switch.