การพิมพ์

ฟีเจอร์บนเว็บ: font-size rem em unit line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min(), max() และ clamp() หน่วยวิวพอร์ต

แนวทางปฏิบัติแนะนำโดยรวม

  • ใช้ตัวเลขที่ไม่มีหน่วยสำหรับ line-height (เช่น 1.5) เพื่อให้แน่ใจว่ามีการปรับขนาดแบบสัมพัทธ์ระหว่างการรับค่าขนาดแบบอักษร
  • ใช้ overflow-wrap: break-word (หรือ anywhere) เพื่อใส่ URL แบบยาว
  • อย่าใช้ px สำหรับขนาดแบบอักษร ใช้ rem เพื่อให้เป็นไปตามค่ากำหนดขนาดแบบอักษรในเบราว์เซอร์ของผู้ใช้ (ขนาดแบบอักษรระดับรูท) หรือ em/เปอร์เซ็นต์สำหรับการปรับขนาดตามบริบท

ความอ่านง่าย

  • หลีกเลี่ยงบรรทัดข้อความที่ยาว: จำกัดบล็อกย่อหน้าให้มีความกว้างไม่เกิน 80 อักขระ
  • หลีกเลี่ยงการจัดข้อความชิดขอบ: หลีกเลี่ยง text-align: justify เนื่องจากอาจทำให้ข้อความอ่านยากขึ้น หากจำเป็นต้องใช้ ให้ใช้ร่วมกับ hyphens: auto เพื่อหลีกเลี่ยงการเว้นวรรคมากเกินไประหว่างคำ
  • อย่าใช้แบบอักษรที่หรูหรา: ละเว้นแบบตัวพิมพ์ที่เป็นตัวเขียนสำหรับเนื้อหาหลักที่ต้องการให้อ่าน
  • อย่าใช้ตัวพิมพ์ใหญ่ทั้งหมดเพื่อเน้นข้อความ: ควรใช้ตัวหนาเพื่อเน้นข้อความ และใช้ <em>/<strong> เมื่อต้องการเน้นความหมาย
  • จำกัดการเน้นโดยรวม: การเน้นจะสูญเสียความหมายเมื่อมีอยู่ทุกที่ ให้ใช้เฉพาะในกรณีที่เปลี่ยนวิธีอ่านเนื้อหาเท่านั้น
  • รองรับค่ากำหนดการซูมของผู้ใช้: อนุญาตให้ผู้ใช้ปรับขนาดข้อความได้สูงสุด 200% โดยไม่สูญเสียเนื้อหาหรือฟังก์ชันการทำงาน
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

การตัดข้อความ

  • ใช้ text-wrap: balance สำหรับบรรทัดแรกที่สมดุลและเนื้อหาที่คล้ายกับบรรทัดแรก (เช่น <th>)
  • ใช้ text-wrap: pretty สำหรับข้อความเนื้อหาแบบยาว (ย่อหน้า, บล็อกคำพูด ฯลฯ)
  • ใช้ text-wrap: balance หรือ text-wrap: pretty อย่างรอบคอบ อย่าใช้กับ * เนื่องจากส่งผลต่อประสิทธิภาพ
  • หลีกเลี่ยง text-wrap: balance ในองค์ประกอบที่มีกล่องที่มองเห็นได้ (พื้นหลัง เส้นขอบ เงา ฯลฯ) เนื่องจากจะไม่เปลี่ยนความกว้างของคอนเทนเนอร์ แต่จะส่งผลต่อวิธีตัดข้อความภายในความกว้างนั้นเท่านั้น ซึ่งอาจทำให้มีพื้นที่ว่างที่ส่วนท้ายของคอนเทนเนอร์ ซึ่งมักเป็นสิ่งที่ไม่พึงประสงค์

แบบตัวพิมพ์ที่ปรับเปลี่ยนตามอุปกรณ์

  • ควรรวมหน่วยที่สัมพันธ์กับวิวพอร์ตและหน่วยที่สัมพันธ์กับแบบอักษรใน clamp() สำหรับขนาดแบบอักษรที่ปรับขนาดตามขนาดวิวพอร์ต ขณะเดียวกันก็ต้องแน่ใจว่าขนาดแบบอักษรยังคงอยู่ในช่วงที่ต้องการ เช่น clamp(2rem, 1rem + 5vw, 4rem) ปรับสัดส่วนของหน่วยที่สัมพันธ์กับวิวพอร์ตและหน่วยที่สัมพันธ์กับแบบอักษรเพื่อควบคุมความเร็วในการเปลี่ยนแปลงขนาดแบบอักษร
  • อย่าใช้ vw เพียงอย่างเดียวสำหรับขนาดแบบอักษรโดยไม่มี clamp() เนื่องจากอาจปรับขนาดข้อความให้เล็กหรือใหญ่เกินไปบนหน้าจอที่มีขนาดเล็กหรือใหญ่มาก