Type & Spacing Scales

เมื่อคุณ nudge element ใน Figma ค่า nudge เริ่มต้นคือ 8px นั่นไม่ใช่เรื่องบังเอิญ ตาราง 8px คือระบบ spacing ที่พบมากที่สุดในการออกแบบมืออาชีพ — และมีคู่เทียบในโค้ดโดยตรงที่ทำให้เลย์เอาต์ของคุณสอดคล้องกัน

Spacing scale

Spacing scale คือชุดค่าคงที่ที่สร้างบน base unit หน่วยฐานที่พบมากที่สุดคือ 4px (โดย 8px เป็น “standard step”) นี่คือวิธีที่แมป:

ชื่อ Token	ค่า	Figma equivalent
`--space-1`	`4px`	Nudge × 0.5
`--space-2`	`8px`	1 nudge
`--space-3`	`12px`	1.5 nudges
`--space-4`	`16px`	2 nudges
`--space-6`	`24px`	3 nudges
`--space-8`	`32px`	4 nudges
`--space-12`	`48px`	6 nudges
`--space-16`	`64px`	8 nudges

ทุกอย่างในเลย์เอาต์ของคุณ — padding, margin, gap ระหว่าง elements — ควรใช้หนึ่งในค่าเหล่านี้ ค่าที่ “นอก scale” (เช่น 13px หรือ 22px) มักเป็นข้อผิดพลาดในการออกแบบที่คุ้มค่าแก่การแก้ไข

Type scale

Type scale คือชุดขนาดฟอนต์ที่สอดคล้องกัน สร้างบน ratio ที่กำหนด Ratio ที่พบบ่อยคือ 1.25 (Major Third) และ 1.5 (Perfect Fifth) โดยเริ่มจาก base 16px:

ชื่อ Token	ค่า (ratio 1.25)	การใช้งาน
`--text-xs`	`12px`	Labels, captions
`--text-sm`	`14px`	Body รอง, metadata
`--text-base`	`16px`	Body text
`--text-lg`	`20px`	Lead text, card headings
`--text-xl`	`24px`	Section headings
`--text-2xl`	`32px`	Page headings
`--text-3xl`	`40px`	Hero headlines

ใน Figma สิ่งเหล่านี้แมปกับ Text Styles ของคุณ ถ้า text styles ของคุณมีชื่อว่า body/sm, body/base, heading/lg ควรแปลโดยตรงเป็น --text-sm, --text-base, --text-lg

Scales ในการทำงาน

ส่วนด้านล่างใช้เฉพาะ spacing และ type sizes ที่ใช้ token เท่านั้น เปลี่ยน --text-base หรือ --space-4 ใน CSS และดู scale ที่ส่งผลตลอด

<article class="article">
  <p class="label">Case Study</p>
  <h1 class="heading-hero">Designing for scale</h1>
  <p class="lead">A consistent type scale and spacing system are the foundation of every readable, well-structured interface.</p>
  <h2 class="heading-section">Why consistency matters</h2>
  <p class="body">When every spacing decision comes from the same set of tokens, layouts feel harmonious — not because of any single value, but because all the values belong to the same system.</p>
  <p class="caption">Last updated: June 2026</p>
</article>

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

ตั้งขนาด font/spacing แบบสุ่มไม่เป็น scale ทำให้แต่ละหน้าดู “ไม่ใช่ระบบเดียวกัน”
ใช้ scale คนละชุดระหว่าง desktop กับ mobile โดยไม่มีเหตุผลรองรับ

มุมมองของ developer

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

Designer เห็น “ขนาดที่ดูสมส่วน” แต่ developer อยากได้ scale ที่จำกัด (เช่น type scale แบบ 1.25 ratio) เพื่อ map เป็น CSS variable ที่ reuse ได้ ไม่ต้องจำค่าที่ต่างกันทุกจุด

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

Type scale ของ Material Design (Display/Headline/Title/Body/Label) ให้ชุดขนาดจำกัดที่ Google ใช้ตรงกันทั้ง Android และ Web