Font Weight คืออะไร? — คู่มือการใช้น้ำหนักฟอนต์อย่างมืออาชีพ

Font Weight หรือน้ำหนักฟอนต์ เป็นหนึ่งในคุณสมบัติพื้นฐานที่สำคัญในการออกแบบ การเลือกใช้ weight ที่เหมาะสมจะช่วยสร้าง hierarchy และทำให้งานอ่านง่ายขึ้น

ระดับของ Font Weight

Font Weight มีค่าตั้งแต่ 100 ถึง 900 โดยแต่ละค่ามีชื่อเรียกดังนี้:

• 100 — Thin (บางมาก)
• 200 — ExtraLight / UltraLight (บางพิเศษ)
• 300 — Light (บาง)
• 400 — Regular / Normal (ปกติ)
• 500 — Medium (กลาง)
• 600 — SemiBold / DemiBold (กึ่งหนา)
• 700 — Bold (หนา)
• 800 — ExtraBold / UltraBold (หนาพิเศษ)
• 900 — Black / Heavy (หนามาก)

การใช้งานแต่ละ Weight

Thin / Light (100-300)

เหมาะสำหรับ: หัวข้อขนาดใหญ่, งาน elegant, ข้อความที่ต้องการความละเอียดอ่อน

ข้อควรระวัง: อาจอ่านยากในขนาดเล็กหรือบนหน้าจอความละเอียดต่ำ

Regular (400)

เหมาะสำหรับ: เนื้อหาทั่วไป (body text), ข้อความที่ต้องอ่านยาวๆ

นี่คือ weight มาตรฐานที่ใช้บ่อยที่สุด

Medium (500)

เหมาะสำหรับ: เน้นเล็กน้อย, subheading, ปุ่ม, navigation

Weight นี้ให้ความโดดเด่นกว่า Regular เล็กน้อยโดยไม่แรงเกินไป

SemiBold (600)

เหมาะสำหรับ: หัวข้อย่อย, label, ข้อความสำคัญ

เป็นจุดกึ่งกลางระหว่าง Regular และ Bold

Bold (700)

เหมาะสำหรับ: หัวข้อหลัก, ข้อความที่ต้องการเน้นหนัก

Weight ที่ใช้บ่อยรองจาก Regular

ExtraBold / Black (800-900)

เหมาะสำหรับ: โปสเตอร์, banner, หัวข้อขนาดใหญ่มาก

ข้อควรระวัง: ไม่เหมาะกับเนื้อหายาวๆ หรือขนาดเล็ก

การสร้าง Hierarchy ด้วย Font Weight

ใช้ weight ต่างกันเพื่อสร้างลำดับความสำคัญ:

• H1: Bold หรือ Black
• H2: SemiBold หรือ Bold
• H3: Medium หรือ SemiBold
• Body: Regular
• Caption: Light หรือ Regular

CSS สำหรับ Font Weight

h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3 { font-weight: 500; }
p { font-weight: 400; }
.caption { font-weight: 300; }

สรุป

Font Weight เป็นเครื่องมือสำคัญในการสร้าง visual hierarchy การเลือกใช้ weight ที่เหมาะสมจะทำให้งานออกแบบอ่านง่ายและดูเป็นมืออาชีพ