Typography

Typography คือจุดที่ดีไซเนอร์รู้สึกสบายใจที่สุดใน CSS ทุก property ในบทเรียนนี้มีคู่ขนานโดยตรงกับสิ่งที่อยู่ใน Text inspector panel ของ Figma — คุณรู้แล้วว่าแต่ละอย่างทำอะไร เพียงแค่กำลังเรียนรู้ชื่อ CSS ของตัวเอง

ลองคิดว่า CSS typography properties คือ ระบบ text styles ของคุณในรูปแบบโค้ด แทนที่จะคลิกไปในแต่ละ panel คุณเขียนการตัดสินใจเดิมเป็น rule ที่ browser apply สม่ำเสมอทุกหน้า

Font family

font-family: 'Inter', system-ui, sans-serif;

นี่คือ typeface CSS ให้คุณ list หลาย font คั่นด้วยจุลภาค — เรียกว่า font stack browser จะลอง font แรก และถ้าไม่มีก็ไปต่อ font ถัดไป ควรลงท้ายด้วย generic family เช่น sans-serif เสมอเป็น fallback สุดท้าย

หากต้องการใช้ Google Font ให้ link ใน <head> ของ HTML:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />

จากนั้นใน CSS: font-family: 'Inter', sans-serif;

ใช้หน่วย rem สำหรับขนาดตัวอักษร 1rem เท่ากับขนาด font พื้นฐานของ browser (ปกติ 16px) rem ปรับตามการตั้งค่า accessibility ของผู้ใช้ — หากใครเพิ่มขนาด font ของ browser ตัวอักษรของคุณก็จะใหญ่ตามไปด้วย Type scale ที่นิยมใช้:

ระดับ	rem	การใช้งานทั่วไป
xs	0.75rem	Label, caption
sm	0.875rem	ข้อความรอง
base	1rem	ข้อความ body
lg	1.25rem	Lead paragraph
xl	1.5rem	Section heading
2xl	2rem	Page heading
3xl	3rem	Display / hero

Font weight

font-weight: 400;

นี่คือการควบคุมเดียวกับ weight dropdown ใน Figma ค่ามีตั้งแต่ 100 ถึง 900:

100 — Thin
300 — Light
400 — Regular
500 — Medium
600 — Semibold
700 — Bold
800 — Extrabold
900 — Black

ไม่ใช่ทุก font ที่มีครบทุก weight — ตรวจสอบให้แน่ใจว่า weight ที่ใช้ถูก load มาแล้ว

Line height

line-height: 1.5;

นี่คือ leading ในศัพท์ typography และตรงกับ Line Height ใน Figma ใช้ตัวเลขไม่มีหน่วย: 1.5 หมายถึง line height เป็น 1.5 เท่าของ font size วิธีนี้ดีกว่าการใช้ pixel เพราะ scale ตาม font size โดยอัตโนมัติ

Body text: 1.5–1.6 — อ่านสบาย
Heading: 1.1–1.2 — กระชับ ดูมีพลัง
UI label บรรทัดเดียว: 1 — พอดีพอดี

Letter spacing

letter-spacing: 0.05em;

Figma เรียกสิ่งนี้ว่า Tracking ค่าบวกทำให้ตัวอักษรห่างออก ค่าลบทำให้แน่นขึ้น การใช้หน่วย em ทำให้ spacing scale ตาม font size อย่างสัดส่วน ค่าบวกเล็กน้อย (0.05em–0.1em) ใช้ดีกับ uppercase label ส่วน body text ปกติจะใช้ 0 หรือค่าลบเล็กน้อย

Text alignment

text-align: left;

เหมือนกับปุ่ม alignment ใน text panel ของ Figma ค่า: left, center, right, justify ใช้ justify อย่างระวัง — อาจทำให้เกิดช่องว่างไม่สม่ำเสมอเมื่อบรรทัดสั้น

Text transform และ color

text-transform: uppercase;
color: #111827;

text-transform มีประโยชน์สำหรับ label และปุ่ม — uppercase หรือ capitalize โดยไม่ต้องเปลี่ยนเนื้อหาจริง color กำหนดสีข้อความ รับค่า hex, rgb(), hsl() หรือชื่อสี

นำทุกอย่างมารวมกัน — type scale ในโค้ด

เหมือนกับที่คุณกำหนด text styles ใน Figma แล้ว apply อย่างสม่ำเสมอ ใน CSS คุณตั้ง rule สำหรับแต่ละระดับของ hierarchy แล้วใช้ตลอดทั้งหน้า LivePreview ด้านล่างแสดง layout บทความเล็กๆ แก้ไข CSS เพื่อสำรวจว่าการเปลี่ยน font-size, font-weight และ line-height เปลี่ยน feel ของ typography อย่างไร

<article class="prose">
  <p class="label">Design System</p>
  <h1 class="display">Type is the voice of design</h1>
  <p class="lead">Good typography is invisible — it lets the reader focus entirely on the message, not the mechanics.</p>
  <p class="body">Every typeface has a personality. Choosing the right font family is like casting the right actor for a role. But the family is only the beginning — size, weight, line height, and spacing together determine whether text feels calm or urgent, friendly or authoritative.</p>
</article>

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ใช้ font ที่ไม่มี fallback ทำให้ browser แสดง font แปลกถ้าโหลดไม่ทัน
ตั้ง line-height เป็นตัวเลขคงที่ (px) แทน unitless ทำให้ scale ผิดตอนเปลี่ยน font-size
ลืมว่า font ที่เลือกใน Figma อาจไม่มี weight ที่ต้องการจริงบนเว็บ

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “font ที่สวยตาม design” แต่ developer ต้องโหลด font file จริง (Google Fonts หรือ self-host) และเผื่อ fallback font ระหว่างที่ font หลักยังโหลดไม่เสร็จ

💡 ตัวอย่างจากของจริง

Notion เผื่อ system font fallback ที่ใกล้เคียงกับ font จริงมาก ทำให้ระหว่างโหลด font ไม่กระตุกสายตา