ทำไม Uppercase/All Caps Text ต้องการ Letter-spacing [Typography]

เรียนรู้ว่าทำไม uppercase text elements มักได้ประโยชน์จาก letter-spacing — และวิธีทำด้วย CSS

ใน Typography ตอนใช้ uppercase/all caps (ตัวพิมพ์ใหญ่) บน text elements มักต้องเพิ่ม breathing room ระหว่างตัวอักษร ไม่งั้นอ่านไมสบาย

Letterspacing = tracking synonyms ทั้งคู่ = space ระหว่างกลุ่มตัวอักษร (คำ) ในการสื่อสาร letterspacing ใช้บนเว็บ tracking ใช้ใน print typography

ดูตัวอย่าง

Normal vs Uppercase

เปรียบเทียบ text elements normal case และ all caps/uppercase:

Typography

เห็นปัญหาไหม?

ไม่เห็นก็ไม่เป็นไร normal/default font-weights มักไม่ใช่ปัญหา ขึ้นกับ typeface design และการใช้งาน

ใน CSS normal font-weight ประกาศ font-weight: normal; หรือ font-weight: 400; เหมือนกัน

Normal case vs Uppercase (bold)

เปรียบเทียบตัวอย่างเดิม แต่เพิ่ม bold font-weight:

Typography

เห็นไหม uppercase text ดูแน่นตอนใช้ thicker letter strokes (bold)? ตัวอักษรบางตัวแทะกัน

ใน CSS bold font-weight ประกาศ font-weight: bold; numeric values ได้ แต่เช็คว่า font-family มี font weights กี่ option 700 มักเทียบเท่า bold — แต่ไม่เสมอไป

Letterspacing (aka Tracking)

คัดลอก uppercase text example เดิม ใส่ letter-spacing 4px เปรียบเทียบ:

Typography

ต่างกันมาก! ตัวแรกเกือบ claustrophobic ตัวที่สอง relaxed

ใน CSS letterspacing ประกาศ letter-spacing property เช่น letter-spacing: 4px; เขียนภาษาไทยมี/ไม่มี hyphen (-) ก็ได้ แต่ใน CSS ต้องมี hyphen เสมอ

ไม่ได้บอกว่าตัวที่สอง (มี letter-spacing) ดีกว่าตลอด ขึ้นกับ atmosphere/mood ที่ต้องการใน use case เฉพาะ

เครื่องมือ powerful สื่อ theme ภาพยนตร์บนโปสเตอร์ คือ typography typographer เก่งจะตัดสินใจอย่างละเอียด:

typeface/font-family
typeface classification (serif, sans-serif, etc.)
font-sizes
letter casing (uppercase, lowercase, etc.)
font-weights (normal, bold, etc.)
font styles (regular/normal/italic)

ไม่ว่าจะ movie poster, book cover, food label ต้องตัดสินใจจาก context

Letterspacing แค่หนึ่งแตะ powerful element ของ typography:

CAPTIVITY

FREEDOM

รู้สึกต่างกันไหม?

ความรู้สึกแยกต่างหาก พิจารณานี้: Uppercase text โดยทั่วไปอ่านยากกว่า normal case เพราะ symmetric/proportionate structure ทำให้ยากแยกตัวอักษรในคำ — โดยเฉพาะในประโยค/ย่อหน้า

สรุป:

เพื่อ reader-friendliness ใช้ uppercase text ข้นๆ เหมาะ titles/short headings ไม่ใช่ประโยค/ย่อหน้าทั้งหมด
Rule of thumb: uppercase/all caps text ได้ประโยชน์จาก spacing เล็กน้อย (หรือมาก) ระหว่างตัวอักษร ทำให้อ่านง่าย
Text สวยกว่าตอนไมดูเหมือนกาวตัวอักษรรวมกัน Visuals matter
บางครั้ง tight tracking/letterspacing ถูกต้องที่สุด

ไม่ใช่ขาว-ดำ Context is key