Typography & Colors

1. สามค่าที่ทำให้ข้อความอ่านง่าย

font-size, font-weight และ line-height คือสาม property หลักของ typography font-size กำหนดขนาดตัวอักษร font-weight กำหนดน้ำหนักหรือความหนา และ line-height กำหนดระยะห่างระหว่างบรรทัด ทั้งสามค่าต้องทำงานร่วมกัน ไม่ใช่ปรับแยกแบบไม่สนบริบท

2. Mental model: ป้ายบอกลำดับความสำคัญ

ลองมองหน้าเว็บเป็นป้ายประกาศ หัวข้อควรใหญ่และชัดกว่าเนื้อหา ส่วนเนื้อหาควรมีระยะบรรทัดพอให้ตาอ่านต่อได้ง่าย ถ้าทุกอย่างใหญ่เท่ากัน ผู้เรียนไม่รู้ว่าควรอ่านอะไรก่อน ถ้าบรรทัดชิดเกินไป อ่านนาน ๆ จะเหนื่อย

• 1. กำหนด body text ให้อ่านสบายก่อน
• 2. ทำ heading ให้ใหญ่หรือหนากว่าเพื่อสร้าง hierarchy
• 3. ปรับ line-height ให้สัมพันธ์กับความยาวข้อความ

3. Rule ที่ใช้บ่อย

• body text มักเริ่มที่ 16px หรือใกล้เคียง
• font-weight: 400 คือ normal และ 700 คือ bold
• line-height แบบไม่มีหน่วย เช่น 1.6 scale ตาม font-size ของ element นั้น
• heading สั้น ๆ ใช้ line-height แคบกว่า body text ได้

.title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

4. ทดลองเปรียบเทียบ

5. Recap

• font-size สร้างความต่างของขนาด
• font-weight ใช้เน้นความสำคัญ
• line-height ทำให้ข้อความหลายบรรทัดอ่านสบาย
• typography ที่ดีคือการจัดลำดับ ไม่ใช่ทำให้ทุกอย่างใหญ่หรือหนาเท่ากัน

Lab 1: ปรับ font-size

เป้าหมาย: ทำให้หัวข้อใหญ่กว่าเนื้อหาโดยใช้ font-size โจทย์: 1. กำหนด .title ให้มี font-size: 28px

Lab 2: ปรับ font-weight

เป้าหมาย: ใช้ font-weight เพื่อทำให้คำสำคัญเด่นขึ้น โจทย์: 1. กำหนด .important ให้มี font-weight: 700

Lab 3: ปรับ line-height

เป้าหมาย: ทำให้ย่อหน้าหลายบรรทัดอ่านสบายขึ้นด้วย line-height โจทย์: 1. กำหนด .paragraph ให้มี line-height: 1.7

Lab 4: สร้าง typography hierarchy

เป้าหมาย: รวม font-size, font-weight และ line-height เพื่อแยกหัวข้อกับเนื้อหา โจทย์: 1. .section-title ใช้ font-size: 24px และ font-weight: 700 2. .section-body ใช้ line-height: 1.7