<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Mia He</title>
    <description>The latest articles on Forem by Mia He (@mia_he_9dcd4e64155630d11c).</description>
    <link>https://forem.com/mia_he_9dcd4e64155630d11c</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3642474%2F6e20153a-8bd0-4a7e-81a7-4b25c2968635.jpg</url>
      <title>Forem: Mia He</title>
      <link>https://forem.com/mia_he_9dcd4e64155630d11c</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/mia_he_9dcd4e64155630d11c"/>
    <language>en</language>
    <item>
      <title>A Beginner's Guide to Unicode Math Symbols</title>
      <dc:creator>Mia He</dc:creator>
      <pubDate>Mon, 19 Jan 2026 08:27:11 +0000</pubDate>
      <link>https://forem.com/mia_he_9dcd4e64155630d11c/a-beginners-guide-to-unicode-math-symbols-2lml</link>
      <guid>https://forem.com/mia_he_9dcd4e64155630d11c/a-beginners-guide-to-unicode-math-symbols-2lml</guid>
      <description>&lt;p&gt;Have you ever tried to write a math problem in a message and ended up with "x^2 + y^2 = z^2"? I mean, it does work. People get it. But it doesn't look very good, does it?&lt;/p&gt;

&lt;p&gt;I saw this problem for the first time when I was helping my younger cousin with her homework on WeChat. She would send me pictures of her math problems, and I would try to type the answers back to her. But it wasn't easy to type "√" or "≠." I didn't even know how to find them on my keyboard.&lt;/p&gt;

&lt;p&gt;That's when I got lost in a rabbit hole of information about Unicode math symbols.&lt;/p&gt;

&lt;p&gt;What do these symbols mean?&lt;/p&gt;

&lt;p&gt;So, this is what I mean. These are not special pictures when you see a square root sign like √ or a "not equal" sign like ≠. These are real text characters. Your computer sees them the same way it sees the letter "a" or the number "5."&lt;/p&gt;

&lt;p&gt;Unicode is like a huge list of characters. It has letters from almost every language on the planet. It also has math symbols, arrows, emojis, and all sorts of other strange things. Every character has its own code number.&lt;/p&gt;

&lt;p&gt;The code for the plus-minus sign (±) is U+00B1. The U+221E symbol for infinity is ∞.&lt;/p&gt;

&lt;p&gt;You don't really need to remember these codes. I'm just bringing them up so you know how it works behind the scenes.&lt;/p&gt;

&lt;h2&gt;
  
  
  What are the reasons people use Unicode math symbols?
&lt;/h2&gt;

&lt;p&gt;I was curious about this for a while.&lt;/p&gt;

&lt;p&gt;The most common reason is simple: it looks better. Take a look at these two:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;"a != b" - "a ≠ b"&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The second one is cleaner. Looks more professional.&lt;/p&gt;

&lt;p&gt;I see people use these symbols in their social media bios, chat messages, and even the subject lines of their emails. They are used by teachers in papers. Programmers put them in comments in their code.&lt;/p&gt;

&lt;p&gt;Some platforms don't support special formatting, which is another reason. In a plain text field, you can't use subscript or bold. You can, however, copy and paste a Unicode symbol, and it will show up correctly.&lt;/p&gt;

&lt;h2&gt;
  
  
  The math symbols that people look for the most
&lt;/h2&gt;

&lt;p&gt;Here are a few that I use a lot.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Basic tasks:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;× (multiplication, since "x" looks strange)&lt;/li&gt;
&lt;li&gt;÷ (to divide)&lt;/li&gt;
&lt;li&gt;± (plus or minus)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Comparison:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;≠ (not equal) - ≤ (less than or equal)&lt;/li&gt;
&lt;li&gt;≥ (more than or equal to)&lt;/li&gt;
&lt;li&gt;≈ (about equal)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Other helpful ones:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;√ (the square root)&lt;/li&gt;
&lt;li&gt;∞ (infinity)&lt;/li&gt;
&lt;li&gt;π (pi) - ∑ (sum) - ∫ (integral)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It's not too hard to type some of these. I can get ≠ on my Mac by pressing Option + =. But to be honest, I always forget these shortcuts.&lt;/p&gt;

&lt;p&gt;How do you really type them?&lt;/p&gt;

&lt;p&gt;This is where things start to get messy.&lt;/p&gt;

&lt;p&gt;You can use Alt codes on Windows. You press Alt and then type a number on the numpad. But who remembers that Alt+247 is the code for ≈? Not me.&lt;/p&gt;

&lt;p&gt;You can use keyboard shortcuts on a Mac. Some are easy to understand. A lot of them aren't.&lt;/p&gt;

&lt;p&gt;Copying and pasting is the method I use the most. I look for the symbol and copy it. After that, I put it where I need it.&lt;/p&gt;

&lt;p&gt;You can find and copy Unicode symbols on some websites. When I need to find something specific, I sometimes use &lt;a href="https://fontgenerator.design/symbols" rel="noopener noreferrer"&gt;a Unicode symbol and font tool&lt;/a&gt;. You just click on the symbol, and it copies to your clipboard.&lt;/p&gt;

&lt;p&gt;A little technical note&lt;/p&gt;

&lt;p&gt;At first, I was confused because some symbols look the same but are actually different characters.&lt;/p&gt;

&lt;p&gt;For instance, you can type the regular minus sign with your keyboard. The mathematical minus sign (−) is another Unicode character. They look very similar. But in a technical sense, they are different.&lt;/p&gt;

&lt;p&gt;The letter "x" and the multiplication sign "×" are the same.&lt;/p&gt;

&lt;p&gt;Most of the time, this difference doesn't matter to anyone. But it might matter if you're doing something technical, like writing LaTeX or coding.&lt;/p&gt;

&lt;p&gt;What about subscripts and superscripts?&lt;/p&gt;

&lt;p&gt;Oh, this is a fun one.&lt;/p&gt;

&lt;p&gt;There are actually superscript numbers in Unicode. You can write "x²" instead of "x^2." The ² is a real character, not text that has been formatted.&lt;/p&gt;

&lt;p&gt;You can use these superscripts: ⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹&lt;/p&gt;

&lt;p&gt;There are also some letters that are superscript, like ˣ and ˣ. But not all of the letters.&lt;/p&gt;

&lt;p&gt;There are also subscripts: ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉&lt;/p&gt;

&lt;p&gt;You could write H₂O for water. Looks good.&lt;/p&gt;

&lt;p&gt;The problem is that these don't cover everything. For example, standard Unicode doesn't have a superscript "a." So, writing xᵃ isn't easy. There are ways to get around this by using different Unicode blocks, but that's going too far.&lt;/p&gt;

&lt;h2&gt;
  
  
  When things don't show up right
&lt;/h2&gt;

&lt;p&gt;This happens from time to time.&lt;/p&gt;

&lt;p&gt;You put a nice math symbol in a document. But on someone else's computer, it looks like a small box or a question mark. This means that their system doesn't have a font that can handle that character.&lt;/p&gt;

&lt;p&gt;Most of the time, common symbols like ± or √ work. More obscure math symbols might not work.&lt;/p&gt;

&lt;p&gt;When I'm not sure who I'm talking to, I've learned to stick with the basic symbols. The fancy things are nice, but only if people can see them.&lt;/p&gt;

&lt;h2&gt;
  
  
  My own opinion
&lt;/h2&gt;

&lt;p&gt;As I said before, I got into this because I had a very real problem. I just wanted to type math symbols into chat messages.&lt;/p&gt;

&lt;p&gt;I use them all the time now. In notes. In messages. When I'm feeling fancy, I post on social media.&lt;/p&gt;

&lt;p&gt;It's one of those little things that makes text look better. Once you know where to find the symbols, copying and pasting them takes only two seconds.&lt;/p&gt;

&lt;p&gt;I still don't remember how to use the keyboard shortcuts. Someday, maybe.&lt;/p&gt;

</description>
      <category>unicode</category>
      <category>typography</category>
      <category>programming</category>
    </item>
    <item>
      <title>Why I built fontgenerator.design: A clean Unicode reference for developers (Show HN 200+ points)</title>
      <dc:creator>Mia He</dc:creator>
      <pubDate>Fri, 09 Jan 2026 03:55:47 +0000</pubDate>
      <link>https://forem.com/mia_he_9dcd4e64155630d11c/why-i-built-fontgeneratordesign-a-clean-unicode-reference-for-developers-show-hn-200-points-1ooi</link>
      <guid>https://forem.com/mia_he_9dcd4e64155630d11c/why-i-built-fontgeneratordesign-a-clean-unicode-reference-for-developers-show-hn-200-points-1ooi</guid>
      <description>&lt;p&gt;Hi dev.to community!&lt;/p&gt;

&lt;p&gt;I’m a Product Manager who loves clean, single-purpose tools. Last week, I shared my project on Hacker News and was surprised to get &lt;strong&gt;198 points&lt;/strong&gt;. Many developers shared the same pain point: &lt;strong&gt;Unicode symbols are everywhere, but finding their specific encodings (HTML, CSS, JS, UTF-8) is often a mess.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;So I built &lt;a href="https://fontgenerator.design" rel="noopener noreferrer"&gt;fontgenerator.design&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. The Problem
&lt;/h3&gt;

&lt;p&gt;Usually, if you need a specific symbol like &lt;code&gt;≌&lt;/code&gt; (All Equal To), you have to search through fragmented sites or messy Wikipedia tables. You might find the symbol, but not the CSS escape code or the JavaScript string you actually need for your code.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. The Solution: One Page, All Encodings
&lt;/h3&gt;

&lt;p&gt;I designed this tool to give &lt;strong&gt;every symbol its own clean, detailed page&lt;/strong&gt;. For example, on our &lt;a href="https://fontgenerator.design/symbols" rel="noopener noreferrer"&gt;Unicode Symbols&lt;/a&gt; index, you get:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;One-click Copy:&lt;/strong&gt; Quick buttons for everything.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Developer Info:&lt;/strong&gt; HTML entities, CSS codes, JS strings, and even UTF-8/16 bytes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Usage Context:&lt;/strong&gt; How to use it on different OS and professional software (Word, Excel, etc.).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Massive Library:&lt;/strong&gt; Over &lt;strong&gt;3,431 symbols&lt;/strong&gt; categorized by Math, Tech, UI, and more.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3. Our Tech Stack
&lt;/h3&gt;

&lt;p&gt;To keep it fast and type-safe, we used:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Framework:&lt;/strong&gt; Next.js (^16.0.7) with App Router.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;UI:&lt;/strong&gt; React (^19.1.1).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Language:&lt;/strong&gt; TypeScript (^5.9.2).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Styling:&lt;/strong&gt; Tailwind CSS (^3.4.17) for that clean, "brutalist" look.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  4. Wait, who wrote the code? 🤖
&lt;/h3&gt;

&lt;p&gt;Here is the fun part: &lt;strong&gt;I didn't write a single line of this code manually.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I am a Product Manager, and while I understand how things work, I built this entire project using &lt;strong&gt;"Vibe Coding"&lt;/strong&gt; (mostly natural language prompts and AI collaboration). It’s amazing how modern tools allow someone with a PM background to translate a vision into a production-ready tool that actually survived the Hacker News front page.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Improved by Community Feedback
&lt;/h3&gt;

&lt;p&gt;Thanks to initial feedback, I’ve already added:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Improved &lt;strong&gt;Search&lt;/strong&gt; (supports &lt;code&gt;U+XXXX&lt;/code&gt; and fuzzy names).&lt;/li&gt;
&lt;li&gt;Fixed &lt;strong&gt;Mobile UI&lt;/strong&gt; (bigger tap targets for symbols).&lt;/li&gt;
&lt;li&gt;Added &lt;strong&gt;Font Tips&lt;/strong&gt; for when symbols show up as "Tofu" boxes (□).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I’m still a "code-newbie" PM, so I’d love to hear from the experts here. What other features or symbols would make your life easier when dealing with Unicode? &lt;/p&gt;

&lt;p&gt;If you're interested in my &lt;strong&gt;Vibe Coding&lt;/strong&gt; workflow, let me know in the comments and I'll write a detailed post about it!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Check it out here:&lt;/strong&gt; &lt;a href="https://fontgenerator.design/symbols" rel="noopener noreferrer"&gt;fontgenerator.design/symbols&lt;/a&gt;&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>nextjs</category>
    </item>
  </channel>
</rss>
