---
title: "CJK & RTL Typography"
url: https://memocore.ai/memos/6ab4a320af51aac421da8789
project: "Brand Styles"
tags: "design-system"
updated_at: "2026-09-25T05:43:47.904Z"
---

# CJK & RTL Typography

Add-on to the templates. Use when a described page has Japanese, Chinese, Korean, Arabic or Hebrew text. Fields go into the Overview TOKENS (font stacks), TYPOGRAPHY RULES (metrics, breaking) and a LOCALE section (differences between language versions).

1 FONT STACKS
Write the full stack in order; Latin family first when scripts are mixed, e.g. "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif.
Record: web font source, unicode-range subsetting, separate Latin and CJK families, Yu Gothic weight workaround (renders thin on Windows at default weight).
Common families: JP gothic: Noto Sans JP, Hiragino Sans, Yu Gothic, Meiryo, M PLUS, Zen Kaku Gothic; JP mincho: Noto Serif JP, Hiragino Mincho, Yu Mincho, Shippori Mincho; SC/TC: Noto Sans SC/TC, PingFang, Microsoft YaHei/JhengHei; KR: Noto Sans KR, Apple SD Gothic Neo, Pretendard; Arabic: Noto Naskh Arabic, Noto Kufi Arabic, IBM Plex Sans Arabic; Hebrew: Noto Sans Hebrew, Heebo, Assistant.

2 CJK METRICS
body line-height (often 1.7-2.0), heading line-height, letter-spacing (often 0.04-0.1em), font-feature-settings "palt" (not the same as font-variant-east-asian: proportional-width), text-spacing-trim, text-autospace, full-width or half-width punctuation and numerals, text-align justify.

3 LINE BREAKING
line-break: auto | loose | normal | strict | anywhere; word-break: normal | keep-all (Korean) | auto-phrase (Chromium, needs lang="ja"); overflow-wrap; kinsoku rules; manual line breaks in headings (record where they fall).

4 VERTICAL TEXT AND RUBY
writing-mode vertical-rl, text-orientation, text-combine-upright, ruby annotations, text-emphasis marks.

5 DENSITY
Record high | medium | low with measured values. Typical Japanese and Chinese commercial sites: more text, many banners and badges, base size 13-15px, tabs, long pages, many CTAs, characters. Do not westernize: add "no western-style whitespace reduction of content" to guardrails when this applies.

6 RTL
dir="rtl"; logical properties; mirrored: arrows, progress, carousels, layout order; not mirrored: logos, media controls, numerals, phone numbers; Arabic: larger line-height, no letter-spacing; bidi isolation for embedded LTR strings.

7 LOCALIZED SITES
Differences between language versions go into a LOCALE section of the Overview and Page memos. A localized site with a very different design is a separate brand set (BRAND Apple Japan 2026).