praneet-front — ประณีต ฟอนต์ไทยที่ไม่พังยับ

Crash Tests

CSS ที่เขียนมาเพื่อ Latin ทำไทยพังเงียบๆ

ไม่มี error อะไรเลย layout ขึ้นปกติ แต่พอดูดีๆ วรรณยุกต์ชนกัน สระอำแตกกระจาย บรรทัดตัดกลางพยางค์ ตัวอย่างข้างล่างคือของจริงที่กำลังพังอยู่บน browser คุณตอนนี้ — พร้อมเวอร์ชันแก้แล้วเทียบใต้กันเลย ข้อความเดียวกัน ต่างกันแค่ property เดียว

Crash 01 · clipped marks

น้ำปั๊มที่นี่ใช้พลังงานแสงอาทิตย์ น้ำปั๊มที่นี่ใช้พลังงานแสงอาทิตย์ เครื่องวัดระดับน้ำส่งข้อมูลทุกชั่วโมง

line-height แบบ Latin บี้ชั้นวรรณยุกต์

ภาษาไทยซ้อนกันได้ถึง 4 ชั้นต่อคอลัมน์ พอใช้ line-height: 1.05 ชั้นบนสุดของบรรทัดล่างก็กระแทกเข้าบรรทัดบนเต็มๆ

body line-height 1.6–1.8 ห้ามต่ำกว่า 1.55

Crash 02 · broken shaping

น้ำดื่มสะอาดสำหรับทุกคน

Tracking ฉีกสระออกจากพยัญชนะ

letter-spacing ถ่างช่องว่างเข้าไประหว่างพยัญชนะกับสระของมันเอง สระอำ (ำ) คือตัวแรกที่พังยับ

ใช้ tracking แค่กับ :lang(en) — ห้ามแตะภาษาไทย

Crash 03 · mid-syllable break

ระบบจะแจ้งเตือนอัตโนมัติเมื่อระดับน้ำต่ำกว่าเกณฑ์

break-all ตัดมั่วกลางคำ

ภาษาไทยไม่มีช่องว่างระหว่างคำ word-break: break-all เลยตัดตรงไหนก็ได้ — กลางพยางค์ อ่านไม่รู้เรื่อง

ตัดคำตาม dictionary · Intl.Segmenter('th')

The Axis

มีหัว / ไม่มีหัว — เลือกครั้งเดียว คุมทั้งงาน

ฟอนต์ไทยมีสองสาย มีหัว (looped) กับไม่มีหัว (loopless) — มันคือแกนหลักเหมือน serif vs sans แบบมีหัวอ่าน paragraph ยาวๆ ได้เร็วกว่าแบบวัดผลได้จริง แบบไม่มีหัวคมกว่าตอนขึ้น size ใหญ่ ลองสลับตัวอักษรยักษ์ดู แล้วจะเห็นหัวโผล่มา

SAME FAMILY · SAME WEIGHT
ONLY THE หัว DIFFERS

IBM PLEX SANS THAI
↔ PLEX THAI LOOPED

คนมือ

VERDICT: loopless = headings · looped = body ไม่มีหัวล้วนใช้ได้แค่กลุ่มวัยรุ่น + UI สั้นๆ บทความยาว / ราชการ / การเงิน body ต้องมีหัวเท่านั้น ห้ามแหกกฎ

ห้องแล็บ vertical rhythm — ลองลากให้พัง

1.70 line-height

✓ CORRECT — MARKS CLEAR คำปราบเซียน: น้ำ · ที่ · ปั๊ม

ปั๊มน้ำที่นี่ใช้พลังงานแสงอาทิตย์ทั้งหมด ระบบจะวัดระดับน้ำและแจ้งเตือนเมื่อต่ำกว่าเกณฑ์ที่ตั้งไว้ น้ำที่ปั๊มขึ้นมาผ่านการกรองสามขั้นตอน ปั๊มน้ำที่นี่ใช้พลังงานแสงอาทิตย์ทั้งหมด ระบบจะวัดระดับน้ำและแจ้งเตือนเมื่อต่ำกว่าเกณฑ์ที่ตั้งไว้

Violations

7 ทางโดนประทับตรา ห้าม

พังจริง ไม่ใช่เรื่องสไตล์ skill ปัดตกทุกข้อนี้ในทุกงานที่มันแตะ

Violation 01✕

ใส่ letter-spacing ให้ภาษาไทย — สระ/วรรณยุกต์หลุดจากตัว สระอำ (ำ) พังก่อนเพื่อน

Violation 02✕

ปล่อย stack โดยไม่มี Thai fallback — ปิดท้ายด้วย 'Noto Sans Thai', system-ui เสมอ

Violation 03✕

body line-height ต่ำกว่า 1.55 — วรรณยุกต์โดนตัดหัว

Violation 04✕

word-break: break-all — ภาษาไทยไม่มีช่องว่างระหว่างคำ มันจะตัดมั่วกลางพยางค์

Violation 05✕

เอาฟอนต์สาย display (Pattaya, Chonburi, Itim…) มาทำ body text

Violation 06✕

ผสมมีหัว / ไม่มีหัวมั่วๆ — มันคือแกนที่ต้องเลือกแล้วยืนให้สุด

Violation 07✕

เหมาเอาว่าไทยกับ Latin ขนาดเท่ากัน — แยกด้วย unicode-range แล้วจูนด้วย font-size-adjust

Install

แปะทีเดียวจบ ทุกงานได้มาตรฐาน

# ติดตั้ง skill ลงใน project
> use skill: praneet-front

# แล้วก็สั่งได้เลย
> "ออกแบบหน้า checkout เป็นภาษาไทยหน่อย"

✓ pairing locked      DIR-08 Prompt / Anuphan
✓ line-height         1.3 head / 1.7 body
✓ letter-spacing      scoped to :lang(en)
✓ fallback stack      Noto Sans Thai → system-ui
✓ numerals            tabular, ฿-ready

ผ่านPASS · PRN-001

ได้อะไรบ้าง

คัมภีร์อ้างอิงครบชุด — ตัวอย่าง crash-test, รายการข้อห้าม และคู่ฟอนต์ 10 แบบพร้อม URL จาก Google Fonts — ถูกใช้กับทุกงานดีไซน์ภาษาไทยของคุณโดยอัตโนมัติ

01ติดตั้ง skill ลงใน project หรือบทสนทนา

02สั่งงาน UI, สไลด์ หรือเอกสารภาษาไทยได้เลย

03ได้ฟอนต์ที่รอดทั้ง น้ำ, ที่ และ ปั๊ม — ทุกครั้ง

กลับไปที่ปั๊ม ↑

Acknowledgement

ขอบคุณ

ถึง Cadson Demak

เกือบทุกตระกูลใน skill นี้ — Kanit, Prompt, Mitr, Krub, Chakra Petch, KoHo, Taviraj, Trirong, Chonburi, Pattaya, Anuphan — วาดโดย Cadson Demak ฟาวน์ดรีตัวอักษรในกรุงเทพฯ ที่พาฟอนต์ไทยร่วมสมัยออกสู่โลกในแบบ open fonts skill นี้แค่เขียนกฎ พวกเขาคือคนวาดตัวอักษร ขอบคุณครับ

CADSON DEMAK CO., LTD. · BANGKOK
RELEASED UNDER SIL OPEN FONT LICENSE · SERVED VIA GOOGLE FONTS
SARABUN BY SUPPAKIT CHALERMLARP · IBM PLEX THAI BY IBM + CADSON DEMAK

ฟอนต์ไทย
ที่ไม่
พังยับ

จัดเต็มมาให้ 16 ตระกูล ลองจิ้มดู