A few months ago I launched a small side project — a free online tool that converts plain text into stylized Unicode fonts. No frameworks. No backend. Just HTML, CSS, vanilla JS, and a large Unicode character map.
The tool is called Tulisan Aesthetic and it targets content creators who want aesthetic text for Instagram bios, TikTok captions, Discord usernames, and WhatsApp statuses.
What I thought would be a weekend project turned into one of the most educational things I've shipped. Here's what I learned.
What the Tool Actually Does
Unicode contains thousands of mathematical and symbolic characters that visually resemble standard Latin letters — but aren't. This means you can "fake" font styles in plain text environments that don't support custom fonts (like social media bios).
For example:
Input:Hello World
Cursive output:𝓗𝓮𝓵𝓵𝓸 𝓦𝓸𝓻𝓵𝓭
Bold output:𝐇𝐞𝐥𝐥𝐨 𝐖𝐨𝐫𝐥𝐚
Fullwidth output:Ｈｅｌｌｏ Ｗｏｒｌｄ
The implementation is straightforward — a character map object that replaces each letter with its Unicode equivalent per style. The tricky part is handling edge cases: numbers, punctuation, non-Latin characters, and emoji spacing.
3 Things User Behavior Taught Me
- Mobile-First Is Not Optional — It's Everything
Before launch, I assumed maybe 60% of users would be on mobile. The real number was over 85%.
This changed how I thought about the entire UX. The copy button needed to be large and thumb-friendly. The font list needed to scroll smoothly without jank. Input field auto-zoom on iOS had to be disabled (font-size: 16px minimum — learned this the hard way).
If you're building any tool targeting general consumers or social media users, design mobile-first from day one. Desktop is secondary.
- The "Copy" Button Is the Entire Product
I initially built a clean multi-column grid layout showing all font styles at once. Looked great on desktop. Terrible on mobile.
After watching how users actually behaved, one thing became clear: they only care about the copy button. Everything else is noise.
I rebuilt the layout as a single scrollable list — each style on its own row with a clearly visible copy button. Engagement improved immediately. Time-on-site went up. Bounce rate dropped.
Lesson: identify the single action your tool exists to enable, and make that action effortless. Everything else is secondary.
- SEO Traffic Compounds Faster Than You'd Expect in Underserved Niches
I did zero paid promotion. All growth came from organic search.
The key insight: most existing tools in this niche had terrible Core Web Vitals. Slow load times, layout shift from ads, unoptimized JavaScript. By building something lightweight and fast, I ranked faster than I expected — not because my content was exceptional, but because the technical baseline was simply better.
For developers building niche tools: performance IS your SEO strategy. A fast, clean tool will outrank a bloated one in an underserved niche.
The Tech Stack (Intentionally Simple)
Frontend: Vanilla HTML/CSS/JS — no framework overhead
Unicode map: JSON object with 50+ style mappings per character
Copy functionality: navigator.clipboard.writeText() with fallback for older browsers
Hosting: Static hosting (fast, cheap, zero maintenance)
Analytics: Lightweight script — no cookie banners needed
Total page weight: under 80KB. Lighthouse score: 98+. That's the goal for any utility tool.
What I'd Do Differently
Add more languages from day one. Traffic came from Indonesia, Brazil, and Spanish-speaking markets simultaneously. I wasn't prepared for that.
Build the copy feedback earlier. A small "Copied!" confirmation toast sounds trivial — users actually noticed and asked about it before I added it.
Create supporting content earlier. Blog posts targeting "how to use aesthetic fonts on Instagram" brought in significant long-tail traffic. I should have published those at launch, not three months later.
Try It
If you want to see the live tool: tulisanaestheticid.com
It's fully open to use — no login, no paywall. If you're curious about any part of the implementation, drop a comment. Happy to discuss the Unicode mapping approach or the SEO strategy in more detail.
Top comments (0)