Typography + Color: จากจืดเป็นสวย

ลองเปิด HTML เปล่าๆ ใน browser ตัวอักษรสีดำล้วน ฟอนต์เป็น Times New Roman ย่อหน้าเบียดกัน หัวข้อตัวใหญ่แบบห้วนๆ ทุกอย่างดูไม่น่าอ่านไปหมด ทั้งที่ browser แค่แสดง default ไม่ได้ทำอะไรผิด

คำถามคือ ทำไม default ถึงน่าเกลียดแบบนี้ คำตอบไม่ใช่ "browser ออกแบบไม่เก่ง" แต่เป็นเพราะ ยังไม่มีใครเลือกbrowser ไม่รู้ว่าเว็บคุณเป็นเรื่องอะไร สไตล์ไหน คนอ่านเป็นใคร เลยใส่ค่า neutral ที่สุดให้ไว้ก่อน

ข่าวดีคือแค่ 5 rule ง่ายๆ ก็ได้เว็บที่ดูเหมือนถูก design แล้ว

5 rule ที่เปลี่ยน default ให้กลายเป็นเว็บจริง

ลองกดเปิดปิดทีละตัวดูว่าแต่ละ rule มีผลยังไง:

1. font-family เลิกใช้ Times New Roman เปลี่ยนเป็น system font
2. font-size hierarchy หัวข้อใหญ่ ย่อหน้าเล็ก เพื่อบอกความสำคัญ
3. font-weight หัวข้อหนา ย่อหน้าปกติ
4. line-height เว้นบรรทัดให้หายใจ อ่านลื่นขึ้น
5. color สีข้อความให้มีลำดับ หัวข้อเข้ม ย่อหน้าอ่อนลง

font-family เลือกฟอนต์ยังไง

CSS ไม่ได้โหลดฟอนต์มาให้ แต่ใช้ตาม font stack ที่ระบุไว้ browser จะพยายามใช้ตัวแรกที่มีในเครื่อง ถ้าไม่มีก็ถอยไปตัวถัดไป

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

อ่านว่า "ใช้ system-ui ก่อน ถ้าไม่มีใช้ -apple-system ถ้าไม่มีอีกใช้ Segoe UI ถ้ายังไม่มีใช้ sans-serif อะไรก็ได้"

ลองสลับฟอนต์ดูว่า feel ของเนื้อหาเปลี่ยนยังไง:

font-family: system-ui, -apple-system, "Segoe UI", sans-serif;

font-size ระหว่าง rem กับ px

CSS มี unit เยอะมาก แต่สำหรับ font-size จำแค่ 2 ตัว:

• px คือขนาด fixed ตาม pixel เท่ากันเสมอ ไม่ว่า user ตั้ง font-size ของ browser เท่าไหร่
• rem คืออัตราส่วนของ font-size root (default เป็น 16px) ถ้า user ตั้งตัวอักษรใหญ่เพราะสายตาไม่ดี ทุกอย่างจะ scale ตาม ซึ่ง accessible กว่า

ในงานจริงใช้ rem เป็นหลัก เพราะเคารพการตั้งค่าของ user โดยเฉพาะคนสูงวัยหรือสายตาไม่ดี

html { font-size: 16px; }      /* base = 16px */
h1   { font-size: 2rem; }      /* = 32px */
p    { font-size: 1rem; }      /* = 16px */
small{ font-size: 0.875rem; }  /* = 14px */

line-height ระยะห่างบรรทัด

line-height คือความสูงของแต่ละบรรทัด รวมช่องว่างระหว่างบรรทัดด้วย ใช้ unitless (1.4, 1.6, 2) ไม่ใส่ px หรือ rem

• 1.2 คือแน่นมาก สำหรับหัวข้อใหญ่เท่านั้น
• 1.5 ถึง 1.7 คือสบายตา สำหรับย่อหน้า
• 2.0 ขึ้นไป คือห่างเกิน เหมาะกับ list หรือข้อความสั้นๆ

สีที่ใช้ใน CSS มี 3 รูปแบบ

CSS มี 3 วิธีหลักในการบอกสี:

/* hex ชื่อสั้น จดจำง่าย สำหรับค่าคงที่ */
color: #5C5FEE;

/* rgb / rgba ใส่ alpha ได้ ใช้กับ opacity */
color: rgb(92, 95, 238);
background: rgba(92, 95, 238, 0.2);   /* opacity 20% */

/* hsl tune ง่ายสุด ปรับ hue/saturation/lightness แยกได้ */
color: hsl(239, 82%, 65%);

Contrast เว็บอ่านได้จริงหรือเปล่า

เขียนเว็บให้สวยยังไม่พอ ต้องให้ คนอ่านได้ ด้วย คนสายตาไม่ดี คนสูงวัย คนดูหน้าจอในที่แสงจ้า ทุกคนต้องอ่านเว็บคุณได้

มาตรฐาน WCAG (Web Content Accessibility Guidelines) บอก ratio contrast ระหว่างสีตัวอักษรกับพื้นหลังที่ยอมรับได้

กฎที่ต้องรู้:

• AA (ใช้ในงานจริง) คือ ratio ≥ 4.5 สำหรับตัวปกติ และ ≥ 3 สำหรับหัวข้อใหญ่ (18pt ขึ้นไป หรือ 14pt ตัวหนา)
• AAA (ยอดเยี่ยม) คือ ratio ≥ 7 สำหรับตัวปกติ ใช้กับเว็บที่ต้องการ accessibility สูง (ราชการ ธนาคาร ฯลฯ)
• Fail คือ ratio น้อยกว่า 4.5 ในตัวปกติ คนสายตาไม่ดีอ่านไม่ออก เว็บจริงห้ามปล่อยผ่าน

สรุป

• Default browser น่าเกลียดเพราะไม่มีใครเลือก แค่ 5 rule (font, size, weight, line-height, color) ก็ทำให้ดูเหมือนถูก design แล้ว
• font-family ใช้ font stack เป็นลำดับ fallback system-ui เป็น default สำหรับ app
• font-size ใช้ rem เป็นหลัก เพื่อเคารพการตั้งค่าของ user
• line-height ใช้ unitless 1.5 ถึง 1.7 สำหรับย่อหน้า
• สี ใช้ hex สำหรับค่าคงที่ ใช้ hsl สำหรับ tune (สีเดียวกันแต่อ่อนหรือเข้มกว่า)
• Contrast ratio ≥ 4.5 (AA) สำหรับงานจริง อย่าใช้ gray-400 บนขาวเพราะจะ fail

บทถัดไปคือ Responsive เว็บที่สวยบน laptop พอเปิดมือถือทีพังหมด ทำไมล่ะ เพราะไม่ได้ design สำหรับจอเล็กตั้งแต่แรก บทหน้าจะเรียนว่า viewport กับ media queries กับ mobile-first ช่วยให้เว็บเดียวใช้ทุกจอได้ยังไง