---
title: "Chinese fonts, from Hargapedia to MoneyMama"
description: "Getting Chinese typography to look right in Hargapedia took a custom font and plenty of manual styling. Years later, MoneyMama needed the same attention, but I wasn't going to fix it the same way."
url: "https://rayson.me/writing/chinese-fonts/"
category: "Design"
author: "Janarayson"
published: 2026-08-20
---

When we launched Hargapedia in January 2018, the app was available in English, Malay and Chinese. I'd made sure the screens were translated, but the Chinese version didn't quite look like the same app.

The problem was the font.

English and Malay shared the rounded typefaces I'd chosen for Hargapedia, while Chinese fell back to whatever font was on the phone. Everything was readable, but the Chinese screens looked rather plain beside the English ones.

I eventually fixed that with a custom Chinese font. Years later, when we built MoneyMama in the same three languages, I ran into a similar problem. This time, though, I wanted to avoid the amount of manual work I'd created for myself in Hargapedia.

## Giving Hargapedia a rounded Chinese font

Here's what Hargapedia's Chinese home screen looked like in the original December 2017 design.

<Figure
  src={homeZh2017}
  alt="Hargapedia's Chinese home screen from 2017, with the search bar and category labels using the phone's system font"
  caption="Hargapedia's Chinese home screen in the original design, using the system font."
/>

For English, I was using SF Rounded, Gotham Rounded and TT Rounds Condensed. They gave Hargapedia its friendly, rounded appearance, but the Chinese text didn't have that same character.

In November 2018, I found Tensentype JiaLi Yuan (腾祥嘉丽圆), a Chinese font with the rounded look I wanted. The character 圆 even means round. I added its Medium and Bold weights to the app and adjusted the Chinese text to use them.

The difference was especially noticeable when English and Chinese appeared in the same sentence. Something like 有了 Price Meter finally looked like it belonged together, rather than two different styles sitting next to each other.

<Figure
  src={pairing}
  alt="Hargapedia onboarding typography comparing the rounded English fonts with Tensentype Chinese, including their font sizes"
  caption="The English and Chinese typography used in Hargapedia's onboarding screens."
/>

I also found that Chinese needed slightly different sizing. At the same font size, the characters appeared smaller to my eye, so I made the Chinese text a little larger and let the line height adjust naturally.

The implementation was simple enough. Whenever a screen needed to display text, I'd check the selected language and choose the appropriate style.

```ts
isChinese ? styles.headerZH : styles.header
```

That worked.

What I hadn't considered was how much work it would create later. Almost every text style needed a Chinese counterpart, and whenever I added a screen or changed the typography, I had to maintain both versions.

It became one of those little annoyances that followed us as the app grew. Even when we rebuilt Hargapedia in 2024, those language checks were still scattered across dozens of files.

<Screens
  screens={[
    { src: storePriceMeter, alt: 'Hargapedia Chinese store screenshot featuring Price Meter' },
    { src: storeAbc, alt: 'Hargapedia Chinese store screenshot featuring the A-B-C price grading system' },
    { src: storeAlert, alt: 'Hargapedia Chinese store screenshot featuring HargaAlert' },
  ]}
  caption="Hargapedia's Chinese screenshots on Google Play, using the rounded fonts across the app."
/>

## The same problem in MoneyMama

MoneyMama has a different visual style. We use Inter for most of the text and Plus Jakarta Sans for headings. They work well in English and Malay.

But neither of the font files we bundled contained Chinese characters, so the phone had to supply its own font whenever it encountered Chinese text.

And just like the early days of Hargapedia, the Chinese version looked flat.

The biggest problem was that everything seemed to have the same weight. A bold heading, a semibold button and regular body text could look almost identical. We were losing much of the hierarchy I'd designed into the English screens.

Other details became obvious once I started looking closely. Some labels were only 11px, which was too small for Chinese characters with many strokes. The line spacing was tuned for Inter, leaving Chinese sentences looking cramped, and the slightly tight letter spacing we'd used for English didn't suit Chinese either.

Mixed-language text had its own issue. In a phrase such as 和 Mama 聊天, the word "Mama" looked smaller than the characters around it.

<Figure
  src={beforeAfter}
  alt="MoneyMama screens in Chinese before and after the typography changes, showing clearer font weights and spacing"
  caption="MoneyMama's Chinese screens before and after. The wording and layout are unchanged."
/>

The first suggestion was to use the phone's Chinese font properly, with the different weights specified. On iOS that meant PingFang, which wouldn't add anything to the app's download size.

It didn't look right, so I went back to something I knew had worked before.

Claude Code pulled the Tensentype font files from the Hargapedia repositories and tried them in MoneyMama, alongside Inter.

<Figure
  src={pairingMama}
  alt="MoneyMama's Chinese screens comparing Hargapedia's rounded Tensentype font with HarmonyOS Sans SC"
  caption="Trying Hargapedia's Tensentype font in MoneyMama, beside HarmonyOS Sans SC."
/>

It didn't look right either.

Tensentype suited Hargapedia because the English fonts were rounded too. MoneyMama's Inter has a different character, and putting those soft, rounded Chinese characters next to it created another mismatch.

## Finding a font that fits

I looked at several Chinese fonts, including Noto Sans SC, HarmonyOS Sans SC, MiSans and some of Alibaba's typefaces.

There were a few things to consider beyond how they looked.

First, the font needed to work on both iOS and Android. Apple has Chinese fonts such as Yuanti and Hiragino, but they aren't available on Android, where the system font also varies between phone manufacturers. I wanted MoneyMama to look consistent regardless of the device, which meant bundling our own font.

Next came licensing and file size.

Chinese font files can be huge compared with Latin fonts because they contain thousands of characters. MiSans, for example, is free for commercial use, but its licence doesn't allow the modifications needed to trim the file down. That would have meant carrying around 8 MB for each weight, along with its other licensing conditions.

Some of Alibaba's fonts looked promising but were really single-weight display fonts intended for advertising. They weren't suitable for an interface that needs regular body text, heavier buttons and bold headings.

That left Noto Sans SC and HarmonyOS Sans SC as the two I wanted to compare more closely.

The full font files were large, but we didn't need every character they contained. We reduced them to the GB2312 character set, which covers 6,763 commonly used simplified Chinese characters. English letters and numbers would continue using Inter.

After doing that, Noto came down to about 2.3 MB per weight, while HarmonyOS was around 1.7 MB.

The visual comparison was close, but HarmonyOS had a few advantages for MoneyMama. At the same size, its characters were about 6% narrower, giving us more room on screens where a category name and an amount have to share a row. Its punctuation also looked tighter, and there was a clearer difference between its Regular and Bold weights.

<Figure
  src={harmonyVsNoto}
  alt="MoneyMama Chinese screens using HarmonyOS Sans SC and Noto Sans SC with identical layouts and text"
  caption="HarmonyOS Sans SC on the left, Noto Sans SC on the right."
/>

I settled on HarmonyOS Sans SC in three weights, adding about 5 MB to the app.

There's no SemiBold weight, so I mapped the app's semibold styles to HarmonyOS Medium and reserved Bold for headings. Chinese characters already tend to look heavier than Latin text at similar weights, so the pairing worked well.

Now that I'd found the font, there was still the question of how to use it throughout the app.

## Not doing it the Hargapedia way again

In Hargapedia, I'd handled Chinese typography one screen at a time. Each text style had a Chinese version, and every screen had to know which one to use.

It worked, but maintaining all those separate styles became a hassle as the app grew. I didn't want to repeat that in MoneyMama.

Fortunately, MoneyMama already uses a shared `Text` component throughout the app. That gave me a central place to handle Chinese typography without having to go through every screen individually.

When the selected language is Chinese, the component automatically switches to HarmonyOS and adjusts the styling where needed. Text smaller than 12px is increased to 12px, line spacing is opened up, and negative letter spacing is removed.

It also removes automatic uppercase styling, which doesn't affect Chinese characters but can make the English part of a mixed-language label look odd.

Money amounts are left alone. They continue using Inter, keeping the figures consistent with the rest of the app.

The adjustments happen when the text is rendered, so switching languages in Settings updates the typography without restarting the app. The converted styles are cached to avoid repeating the same work on every render.

A few animated labels were still using React Native's native `Text` component directly, bypassing our wrapper. We updated those and added a lint rule to prevent future direct imports.

Now the Chinese typography is handled in one place. When I add a new screen, I don't need to create another set of Chinese-specific styles or remember to adjust every label separately.

That's something I wish I'd done back when I was building Hargapedia.