การอภิปรายสั้น ๆ เกี่ยวกับขนาดตัวอักษรที่เหมาะสมสำหรับหน้าเว็บคืออะไร?

ในยุคที่มีการแสดงผลหลายร้อยรายการนี้ นักออกแบบเว็บไซต์มักจะต้องคำนึงถึงประสบการณ์การท่องเว็บของลูกค้าที่แตกต่างกัน

ขนาดข้อความเป็นส่วนสำคัญของประสบการณ์ผู้ใช้ ความละเอียดที่แตกต่างกัน ขนาดจอภาพที่แตกต่างกัน DPI ที่แตกต่างกัน และแม้กระทั่งการตั้งค่าเบราว์เซอร์ที่แตกต่างกัน จะส่งผลต่อขนาดข้อความสุดท้ายที่แสดง แม้ว่าขณะนี้เบราว์เซอร์จำนวนมากสามารถซูมหน้าได้อย่างง่ายดาย แต่ผู้ใช้จะซูมหน้าใหม่ทุกครั้งที่เข้าชมก็เป็นเรื่องยากเสมอ ไม่ต้องพูดถึงว่าผู้ใช้จำนวนมากไม่ทราบวิธีซูมหน้า เป็นการดีที่สุดที่จะให้ผู้ใช้มีขนาดตัวอักษรเริ่มต้นที่คำนึงถึงมากขึ้นโดยพิจารณาจากความละเอียดของพวกเขา ดังนั้นขนาดที่เหมาะสมสำหรับขนาดตัวอักษรนี้คือเท่าใด

12px? 14px? 15px? 16px หรือไม่?

สาเหตุของปัญหาคือหน่วยขนาดตัวอักษรทั้งหมด (px, pt, em) บนหน้าจอเป็นหน่วยสัมพัทธ์ และหน่วยเหล่านี้เพียงอย่างเดียวไม่สามารถระบุขนาดที่แท้จริงของข้อความได้ ยิ่งไปกว่านั้น การรับรู้พื้นฐานของผู้คนเกี่ยวกับขนาดตัวอักษรยังขึ้นอยู่กับมุมมองของดวงตา ซึ่งไม่เพียงแต่ขึ้นอยู่กับขนาดทางกายภาพของข้อความเท่านั้น แต่ยังขึ้นอยู่กับระยะห่างจากสายตามนุษย์ด้วย

ขนาดทางกายภาพ

ขั้นแรก สมมติว่าขนาดข้อความที่เราต้องการบรรลุ เช่น ตั้งค่าเป็น 16px บนจอภาพขนาด 17 นิ้ว 1280 * 1024 เมื่อคำนวณแล้ว ความสูงจะอยู่ที่ประมาณ 4.32 มม. เราวางแผนที่จะทำให้ข้อความบนเว็บใกล้กับสิ่งนี้บนจอภาพส่วนใหญ่ แล้วขนาดตัวอักษรใดที่ควรแสดงที่ความละเอียดต่างกัน?

ขั้นตอนที่ 1: นับความละเอียดหลักของผู้ใช้และขนาดหน้าจอที่สอดคล้องกัน

หากต้องการแปลงระหว่างขนาดทางกายภาพและความละเอียด ให้นับความละเอียดและขนาดหน้าจอที่เกี่ยวข้องก่อน การกระจายการแก้ปัญหาของผู้ใช้สามารถรับได้จากบันทึกทางสถิติของเว็บไซต์ เนื่องจากการตั้งค่าความละเอียดแต่ละรายการอาจสอดคล้องกับหน้าจอหลายหน้าจอที่มีขนาดแตกต่างกัน และไม่สามารถรับขนาดหน้าจอผ่านทางหน้าเว็บได้ เราจึงต้องดำเนินการวิเคราะห์ทางสถิติของตลาดจอภาพในปัจจุบัน: สำหรับความละเอียดที่แน่นอน ให้นับช่วงขนาดหน้าจอที่เป็นไปได้ จากที่เล็กที่สุดไปจนถึงขนาดที่ใหญ่ที่สุดและค่อนข้างเป็นกระแสหลัก (หรือใช้ช่วงกลางของช่วงเป็นขนาดกระแสหลัก) ดังแสดงในภาพด้านล่าง——

ตลาดจอคอมพิวเตอร์ (สินค้ามีหลายประเภทและจะขาดไม่ได้ ข้อมูลมีไว้เพื่อการอ้างอิงเท่านั้น)

ขั้นตอนที่ 2: คำนวณความกว้างทางกายภาพของขนาดหน้าจอหลักสำหรับความละเอียดแต่ละรายการ

อัตราส่วนภาพของจอภาพในปัจจุบันไม่เพียงแต่รวมถึงหน้าจอมาตรฐาน 4:3, ไวด์สกรีน 16:10 เท่านั้น แต่ยังมีอัตราส่วนที่ผิดปกติมากขึ้นอีกด้วย เพื่อเปรียบเทียบจอภาพที่มีอัตราส่วนภาพต่างกัน จึงมีการใช้ความละเอียดแนวนอนเป็นสถิติ ใช้ขนาดและอัตราส่วนภาพหลัก (สมมติว่าความยาวและความกว้างของพิกเซลเท่ากัน) เพื่อคำนวณความกว้างของหน้าจอ (นิ้ว) จากนั้นแปลงเป็นหน่วยเมตริก (มิลลิเมตร) โดยการจับคู่แบบหนึ่งต่อหนึ่ง คุณจะเห็น แนวโน้มขนาดหน้าจอ เมื่อรวมกับการกระจายผู้ใช้ของแต่ละความละเอียด ผลลัพธ์ที่ได้จะแสดงในรูปด้านล่าง (แต่ละจุดในภาพสอดคล้องกับความละเอียด แกนนอนคือจำนวนพิกเซลในทิศทางแนวนอนของหน้าจอ แกนแนวตั้งคือจำนวนพิกเซลในทิศทางแนวนอนของหน้าจอ ความกว้างทางกายภาพของหน้าจอ และขนาดฟองแสดงถึงการใช้ความละเอียดนี้ จำนวนผู้ใช้ ฟองสีน้ำเงินหมายถึงหน้าจอมาตรฐาน และสีม่วงหมายถึงหน้าจอกว้าง): ฟองที่ใหญ่ที่สุดสามฟองคือ 1024*768, 1280*1024 และ 1280*800.

ขั้นตอนที่ 3: คำนวณขนาดตัวอักษรบนจอภาพต่างๆ

แบ่งความกว้างทางกายภาพของหน้าจอด้วยความกว้างพิกเซลเพื่อให้ได้ความกว้างของแต่ละพิกเซล จากนั้นหารตัวเลขนี้ด้วยขนาดทางกายภาพที่ระบุของข้อความเพื่อให้ได้ขนาดตัวอักษรที่ต้องการในความละเอียดที่แตกต่างกัน ตัวอย่างเช่น หากต้องการแสดงข้อความสี่เหลี่ยมจัตุรัส 4.32 มม. ต้องใช้ขนาดแบบอักษรต่อไปนี้ในแต่ละความละเอียด (คำนวณแยกกันสำหรับโน้ตบุ๊กและเดสก์ท็อป):

ขนาดตัวอักษรที่ต้องการในความละเอียดที่แตกต่างกัน

จะเห็นได้ว่าขนาดของโน้ตบุ๊กและเดสก์ท็อปแตกต่างกันมาก เพื่อความสะดวก จึงใช้ขนาดกระแสหลักหรือขนาดเฉลี่ยของแต่ละความละเอียดในการคำนวณขนาดตัวอักษรที่จำเป็นสำหรับขนาดตัวอักษรที่ระบุในแต่ละความละเอียด (ภาพต่อไปนี้จะลบความละเอียดที่โดยทั่วไปใช้กับโน้ตบุ๊กเท่านั้น) โดยยึดขนาด 4.32 มม., 3.77 มม. และ 3.25 มม. เป็นตัวอย่าง (แบบอักษรขนาด 16, 14 และ 12 ที่ความละเอียด 17 นิ้ว 1280*1024):

เพื่อรักษาขนาดทางกายภาพคงที่ ความสัมพันธ์ระหว่างขนาดตัวอักษรที่ต้องการและความละเอียดภายใต้จอแสดงผลหลักแต่ละจอ

เนื่องจากฟอนต์ภาษาจีนบางตัวแสดงได้ไม่ดีนักในตัวเลขที่ไม่ใช่เลขคู่เมื่อไม่ได้เปิด cleartype โดยทั่วไปจึงแนะนำให้ใช้ตัวเลขคู่ เช่น 12, 14, 16, 18 และ 22px นั่นคือเลือกเลขคู่ที่ใกล้ที่สุดสำหรับความละเอียดที่แน่นอน ตัวอย่างเช่น: 14px ใช้สำหรับความละเอียดแนวนอนของหน้าจอที่ต่ำกว่า 1100, 16px ใช้สำหรับ 1100 ถึง 1500, 18px ใช้สำหรับหน้าจอที่สูงกว่า 1500 และอื่นๆ

ระยะห่างจากสายตามนุษย์

แม้ว่าขนาดตัวอักษรของโน้ตบุ๊กจะเล็กกว่าคอมพิวเตอร์เดสก์ท็อปมาก แต่จริงๆ แล้วก็ไม่ได้ทำให้เราลำบากขนาดนั้น เนื่องจากโดยทั่วไปแล้วระยะห่างระหว่างสายตามนุษย์กับหน้าจอจะอยู่ใกล้กว่าเมื่อใช้โน้ตบุ๊กมากกว่าเมื่อใช้คอมพิวเตอร์เดสก์ท็อป เมื่อเน็ตบุ๊กมีขนาดเล็กลงเรื่อยๆ (ตัวอย่างที่รุนแรงคือโทรศัพท์มือถือ) ผู้คนอาจถือเน็ตบุ๊กไว้ใกล้ยิ่งขึ้นเมื่อใช้งาน เพื่อให้มุมมองภาพกว้างขึ้น ในทางตรงกันข้าม เมื่อจอแสดงผลมีขนาดใหญ่ขึ้นเรื่อยๆ (24 นิ้วหรือใหญ่กว่านั้น) เนื่องจากการพิจารณา เช่น มุมมองโดยรวม ผู้คนอาจขยับออกห่างจากหน้าจอมากขึ้น ซึ่งส่งผลให้มุมมองในการรับชมลดลง

ในเชิงปริมาณ: เนื่องจากขนาดตัวอักษร h (4~5 มม.) มีขนาดเล็กมากเมื่อเทียบกับระยะห่าง d (30~60 ซม.) ระหว่างสายตามนุษย์กับข้อความ จึงประมาณได้ว่ามุมมอง θ เป็นสัดส่วนกับ h และผกผัน สัดส่วนกับ d (θγtgθ=h/ d) กล่าวอีกนัยหนึ่ง ข้อความที่มีขนาดเดียวกันจะปรากฏเพียงครึ่งหนึ่งของขนาดเมื่ออยู่ห่างจากข้อความ 2 ฟุต

กล่าวอีกนัยหนึ่ง จอภาพสามารถถ่ายทอดขนาดโดยประมาณเท่านั้น และผู้ใช้แต่ละคนจะยังคงปรับเอฟเฟกต์จริงที่พวกเขาเห็นโดยการปรับระยะห่างจากหน้าจอโดยไม่รู้ตัวระหว่างการทำงานเฉพาะอย่าง เมื่อเผชิญกับผู้ใช้แล็ปท็อปมากขึ้นเรื่อยๆ (โปรดดูบทความก่อนหน้า: ส่วนแบ่งตลาดแล็ปท็อป) นักออกแบบส่วนหน้าสามารถให้เอฟเฟกต์หน้าตามขนาดเฉลี่ยของแล็ปท็อปและเดสก์ท็อปเท่านั้น และขึ้นอยู่กับผู้ใช้ในการปรับเปลี่ยนตัวเอง

ใช้ JS เพื่อปรับขนาดตัวอักษรโดยอัตโนมัติภายใต้ความละเอียดที่แตกต่างกัน

ตัวอย่างเช่น รหัสของ div ซึ่งเป็นที่ตั้งของเนื้อหาหน้าเว็บคือเนื้อหา——

หมายเหตุ: เพื่อให้แน่ใจว่าข้อความสามารถปรับขนาดได้ในแต่ละเบราว์เซอร์ หน่วยขนาดแบบอักษรจะใช้ em แทน px โดยทั่วไป เบราว์เซอร์จะมีค่าเริ่มต้นอยู่ที่ 1em=16px และ 0.875em1em1.125em คือ 1416 18px.

โปรดทราบเมื่อใช้การปรับขนาดแบบอักษร: ควรใช้เปอร์เซ็นต์แทนขนาดแบบอักษรคงที่สำหรับหน่วยขนาดแบบอักษร เช่น ชื่อภายใน div เพื่อให้สามารถปรับขนาดพร้อมกันกับข้อความได้

เอกสารแนบ: ข้อมูลหลักที่อ้างถึงในแผนภูมิในบทความนี้

เผยแพร่ครั้งแรกบนเว็บไซต์นี้: http://www.mhzx1.com