คู่มือฉบับสมบูรณ์เกี่ยวกับการจัดวางแบบอักษรในการออกแบบเว็บไซต์

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

ประเภทของฟอนต์

ฟอนต์ภาษาอังกฤษ (Typeface) แบ่งออกเป็นหลายประเภทหลักๆ นี่คือความรู้พื้นฐานที่คุณต้องรู้เมื่อใช้ฟอนต์ภาษาอังกฤษ:

1. Serif

Serif เป็นส่วนตกแต่งขอบเส้นขีด พื้นที่ที่ทำเครื่องหมายด้วยสีแดงในภาพด้านล่างคือเซอริฟ

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

เซอริฟที่ใช้กันทั่วไปในการออกแบบเว็บไซต์ ได้แก่ Times New Roman และ Georgia ด้านซ้ายของภาพด้านล่างเป็นแบบอักษร Times New Roman ขนาด 12px และด้านขวาเป็นแบบอักษร Georgia ขนาด 12px

ในภาษาจีน ฟอนต์เพลงที่เราใช้คือฟอนต์เซอริฟที่สอดคล้องกัน

2. Sans-serif

ถ้าแบบอักษรไม่มี serif จะเรียกว่า non-serif หรือ sans-serif ภาพด้านล่างเป็น sans-serif

มี sans-serif ที่ใช้กันทั่วไปในการออกแบบเว็บไซต์ค่อนข้างมาก เช่น Arial, Verdana, Tahoma, Helivetica, Calibri เป็นต้น ภาพด้านล่างแสดง Arial, Verdana และ Tahoma จากซ้ายไปขวา:

เป็นที่น่าสังเกตว่าถึงแม้ฟอนต์ serif จะใช้กันอย่างแพร่หลายในหนังสือ แต่ฟอนต์ serif ก็ไม่ค่อยได้ใช้บนอินเทอร์เน็ต เนื่องจากความละเอียดของหน้าจอคอมพิวเตอร์ไม่สามารถเทียบได้กับความละเอียดของหนังสือ ฟอนต์ serif ขนาด 10 ถึง 12px ในข้อความหลักจึงอ่านบนหน้าจอคอมพิวเตอร์ได้ยาก ภาพด้านล่างเป็นการเปรียบเทียบระหว่าง 10px Verdana และ 10px Times New Roman ที่ไม่มี Cleartype อย่างที่คุณเห็น Verdana ทางด้านซ้ายสามารถระบุได้ง่าย Times New Roman ทางด้านขวาอ่านค่อนข้างยาก

3. แบบอักษร Monospace

แบบอักษร Monospace จริงๆ แล้วมีไว้สำหรับแบบอักษรตะวันตกเท่านั้น เพราะตัวอักษรภาษาอังกฤษมีความกว้างต่างกันไป ตัวอย่างเช่น ฉันแคบกว่า m มาก แสดงโค้ดเมื่อเขียนโปรแกรม หากตัวอักษรมีความกว้างไม่เท่ากัน เลย์เอาต์จะดูน่าเกลียด ในบรรทัดคำสั่ง DOS เราจะเห็นว่ามีการใช้แบบอักษรที่มีความกว้างคงที่

แบบอักษรที่มีความกว้างคงที่ที่จำเป็นสำหรับการเขียนโปรแกรมมีข้อกำหนดดังต่อไปนี้:

1. อักขระทั้งหมดต้องมีความกว้างเท่ากัน

2. รูปร่างอักขระที่เรียบง่าย ชัดเจน และเป็นมาตรฐาน

3. รองรับชุดอักขระเพิ่มเติมที่มีรหัส ASCII ที่สูงกว่า

128 (ASCII: 0× 20) ความกว้างเท่ากับอักขระอื่นๆ

5. อักขระสามตัว เช่น "1", "l" และ "i" แยกแยะได้ง่าย

6. อักขระสามตัว เช่น "0", "o" และ " O" แยกแยะได้ง่าย

7. ส่วนหน้าและหลังของเครื่องหมายคำพูดคู่และเครื่องหมายคำพูดเดี่ยวแยกแยะได้ง่าย และควรมีลักษณะสมมาตรเหมือนกระจก

8. เครื่องหมายวรรคตอนที่ชัดเจน โดยเฉพาะเครื่องหมายปีกกา วงเล็บกลม และวงเล็บเหลี่ยม

แบบอักษร monospaced ทั่วไป ได้แก่ Courier และ Courier New

4 การประดิษฐ์ตัวอักษร

ตามชื่อที่แนะนำ การประดิษฐ์ตัวอักษรเป็นแบบอักษรสไตล์การเขียนด้วยลายมือ บางครั้งเราก็เรียกมันว่าแบบอักษรประดิษฐ์ตัวอักษร ฟอนต์อักษรจีนส่วนใหญ่จะแข็ง โดยส่วนตัวแล้ว ฉันแนะนำให้ใช้ฟอนต์คัดลายมือแบบญี่ปุ่น แบบอักษรการประดิษฐ์ตัวอักษรของญี่ปุ่นมีความนุ่มนวลและมีมนุษยธรรมมากขึ้น อย่างไรก็ตาม ข้อเสียของการใช้ฟอนต์คัดลายมือแบบญี่ปุ่นก็คือส่วนใหญ่เป็นอักษรจีนตัวเต็ม และอักษรจีนจำนวนมากก็หายไป

5. สัญลักษณ์

ตัวสัญลักษณ์ที่มีชื่อเสียงที่สุดใน Windows คือ Webdings (ฉันจำได้ว่าฉันเคยใช้มันบ่อยมากตอนที่ยังใช้ Windows 95...) นี่คือฟอนต์บางส่วนของ Webdings:

ลักษณะแบบอักษร:

ลักษณะแบบอักษรทั่วไปได้แก่ ปกติ ตัวหนา และตัวเอียง

พูดง่ายๆ ก็คือตัวหนาหมายความว่าแบบอักษรจะเข้มขึ้นและ "หนา" มากขึ้น ตัวเอียงหมายถึงการเอียงแกนของข้อความเล็กน้อย ใช้เพื่อเน้นข้อความบางย่อหน้าภายในช่องว่าง

เมื่อพูดถึงตัวหนา เราสามารถนึกถึงคุณสมบัติน้ำหนักแบบอักษรใน CSS ได้อย่างง่ายดาย เรารู้ว่านอกเหนือจากค่าแอตทริบิวต์ปกติและตัวหนาที่เรามักใช้แล้ว ค่าแอตทริบิวต์แบบอักษร-น้ำหนักยังมีแอตทริบิวต์ต่างๆ เช่น ตัวหนาขึ้น เบากว่า 100~900 เป็นต้น แล้วค่าของ 100 ถึง 900 คืออะไร จริงๆ แล้ว 100 ถึง 900 ไม่มีหน่วยเลย แบบอักษรที่ดีจะมีการออกแบบที่แตกต่างกันตามน้ำหนักที่แตกต่างกัน หากแบบอักษรมีการออกแบบที่สร้างไว้ล่วงหน้าสำหรับระดับความหนาที่แตกต่างกัน ค่าเหล่านี้จะสอดคล้องกับแต่ละระดับตามลำดับ ตัวอย่างเช่น แบบอักษรของซูริกประกอบด้วยแบบอักษร 6 แบบ ได้แก่ Zurich Light, Zurich Regular, Zurich Medium, Zurich Bold, Zurich Black และ Zurich UltraBlack ด้วยวิธีนี้ Zurich Light สอดคล้องกับค่าสามค่า 100, 200 และ 300, Zurich Regular สอดคล้องกับ 400 ซึ่งเป็น "ปกติ", Zurich Medium สอดคล้องกับ 500 และ Zurich Bold ซึ่งเป็น "ตัวหนา" สอดคล้องกับ 600, 700, ซูริกแบล็กสอดคล้องกับ 800 และสุดท้าย, ซูริก UltraBlack สอดคล้องกับ 900

ตัวเอียงภาษาจีนโดยทั่วไปไม่ได้ใช้บนอินเทอร์เน็ต เนื่องจากภาษาจีนมีหลายขีด การใช้ตัวเอียงจะทำให้อ่านยาก

หน่วย

เราจะใช้บางหน่วยในการออกแบบเว็บของเรา:

1. จุด (pt, point)

72 จุด = 1 นิ้ว, 1 นิ้วคือ 72 จุด นอกจากนี้ 1 พิก้า = 12 จุด

2. พิกเซล (พิกเซล, พิกเซล)

พิกเซลเป็นหน่วยภาพที่เล็กที่สุดบนหน้าจอคอมพิวเตอร์ ในแง่คนธรรมดา มันเป็นจุดที่เล็กที่สุดบนหน้าจอ

3. DPI, PPI

ชื่อเต็มของ DPI คือ Dots Per Inch, Dots Per Inch และชื่อเต็มของ PPI คือ Pixel Per Inch เป็นหน่วยของความละเอียด กล่าวอีกนัยหนึ่งความยาว 1 นิ้วสามารถจัดเรียงได้กี่จุด (พิกเซล) ตัวอย่างเช่น โดยทั่วไป จอภาพของเรามีขนาดประมาณ 72ppi ซึ่งหมายความว่ามี 72 จุด (พิกเซล) ในความยาว 1 นิ้ว ยิ่ง dpi/ppi ยิ่งสูง ความละเอียดก็จะยิ่งสูงขึ้น กล่าวคือ ยิ่งอนุภาคเล็กลง ภาพก็จะยิ่งละเอียดอ่อนมากขึ้น โดยทั่วไปแล้ว ความละเอียดของภาพถ่ายจะอยู่ระหว่าง 240dpi ถึง 300dpi ดังนั้นเหตุใดภาพถ่ายจึงมีรายละเอียดมากกว่าที่เห็นบนหน้าจอมาก นิตยสารจะพิมพ์ที่ความละเอียด 133 หรือ 150dpi และหนังสือคุณภาพสูงจะพิมพ์ที่ 350-400dpi เพราะหนังสือที่พิมพ์สวยงามส่วนใหญ่จะพิมพ์ที่ 175 ถึง 200dpi นั่นเป็นเหตุผลว่าทำไมข้อความที่มีขนาดเท่ากันจึงชัดเจนกว่าเมื่อดูในหนังสือมากกว่าบนหน้าจอ นั่นคือเหตุผลที่เราได้กล่าวไปแล้วว่าแบบอักษร Sans-serif สามารถใช้ในการพิมพ์หนังสือภาษาอังกฤษได้อย่างกล้าหาญ

โดยพื้นฐานแล้วไม่มีความแตกต่างระหว่าง dpi และ ppi หากคุณต้องการค้นหาความแตกต่างจริงๆ ข้อแตกต่างเพียงอย่างเดียวอาจเป็นได้ว่า dpi มักใช้เพื่ออธิบายเครื่องสแกนและเครื่องพิมพ์ ในขณะที่ ppi มักใช้เพื่ออธิบายความละเอียดของหน้าจอ

4. ex และ x-height

มักใช้ใน CSS 1ex = ความสูงของตัวอักษรพิมพ์เล็ก x

5. em

มักใช้ใน CSS แน่นอนว่า em ไม่ได้แสดงถึงความสูงของตัวอักษรพิมพ์เล็ก m (อันที่จริง ความสูงของตัวอักษรพิมพ์เล็ก m โดยทั่วไปจะเหมือนกับความสูงของตัวอักษรพิมพ์เล็ก x) 1em = 100% ของขนาดตัวอักษร เป็นหลายหน่วย

การเว้นวรรค

1. การเว้นวรรคระหว่างบรรทัด (ความสูงของบรรทัด, การเป็นผู้นำ)

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

จากนั้น ระยะห่างระหว่างบรรทัดหมายถึงระยะห่างระหว่างเส้นฐานระหว่างเส้นสองเส้นที่อยู่ติดกัน หน่วยระยะห่างระหว่างบรรทัดมักเป็น em ซึ่งกำหนดตามขนาดตัวอักษร ในเบราว์เซอร์ ไม่มีหลักเกณฑ์สำหรับระยะห่างระหว่างบรรทัดเริ่มต้น ตามคำแนะนำของ W3C ระยะห่างระหว่างบรรทัดเริ่มต้นควรอยู่ระหว่าง 1.0em ถึง 1.2em จริงๆ แล้วในการกำหนดระยะห่างระหว่างบรรทัด มีหลักการในการเรียงพิมพ์ว่าช่องว่างระหว่างบรรทัดจะต้องมากกว่าช่องว่างระหว่างคำ มิฉะนั้น ผู้อ่านจะ "เรียงลำดับ" ได้ง่ายเมื่ออ่านยาก ระยะห่างระหว่างบรรทัดที่เพียงพอสามารถแยกข้อความแต่ละบรรทัดได้ ทำให้ดวงตาแยกแยะบรรทัดก่อนหน้าหรือบรรทัดถัดไปได้ง่ายขึ้น ในช่วงไม่กี่ปีที่ผ่านมา คนส่วนใหญ่ชอบการเว้นวรรคบรรทัด 1.5em สำหรับการจัดวางข้อความบนเว็บ โดยเฉพาะเว็บไซต์ภาษาจีน นั่นคือ หากใช้ขนาดตัวอักษร 12px นักออกแบบมักจะชอบระยะห่างบรรทัด 18px 1.5em เป็นประสบการณ์ที่คุ้มค่าจริงๆ ที่จริงแล้ว มาตรฐานสำหรับเอกสารภาษาจีนคือใช้ระยะห่างระหว่างบรรทัด 1.5em

2. การเว้นวรรคตัวอักษร (Letter-spacing, Tracking)

การเว้นวรรคตัวอักษรหมายถึงระยะห่างระหว่างกลุ่มตัวอักษร การเว้นวรรคของคำส่งผลต่อความหนาแน่นของข้อความในบรรทัดหรือย่อหน้า

3. Kerning

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

ย่อหน้า

1 ความยาวบรรทัด (วัด)

ความยาวบรรทัดหมายถึงความกว้างของย่อหน้าของข้อความ ดังที่แสดงด้านล่าง:

มีปัญหาด้านความชัดเจนสองประการที่เกี่ยวข้องกับความยาวของบรรทัด:

ยิ่งความยาวบรรทัดยาวเท่าใด ระยะห่างระหว่างบรรทัดก็จะยิ่งมากขึ้นเท่านั้น หากระยะห่างระหว่างบรรทัดน้อยเกินไป ผู้อ่านจะขาดได้ง่ายเมื่ออ่าน หากระยะห่างระหว่างบรรทัดมากเกินไป ผู้อ่านจะรู้สึกว่าข้อความไม่ต่อเนื่องเมื่ออ่านบรรทัด

ในข้อความหลัก ตัวอักษรละ 40 ถึง 70 ตัวต่อบรรทัดมีความเหมาะสม

2. การจัดตำแหน่ง

โดยพื้นฐานแล้วการจัดย่อหน้ามีสี่ประเภท: ชิดซ้าย ชิดขวา กึ่งกลาง และชิดขอบ

การจัดตำแหน่งด้านซ้ายหมายถึงวิธีการจัดตำแหน่งที่ตั้งค่าเนื้อหาข้อความ ปรับระยะห่างแนวนอนของข้อความ และจัดแนวข้อความในย่อหน้าหรือบทความไปทางซ้ายตามทิศทางแนวนอน การจัดตำแหน่งด้านซ้ายจะทำให้ข้อความทางด้านซ้ายของบทความมีขอบที่เรียบร้อย ในขณะเดียวกัน ด้านขวาของข้อความจะไม่เท่ากัน ดังนั้นการจัดตำแหน่งด้านซ้ายในภาษาอังกฤษจึงเรียกว่า ragged right ซึ่งหมายความว่าด้านขวาจะมีลักษณะมอมแมม เช่นเดียวกับการจัดตำแหน่งที่ถูกต้อง

การจัดแนวกึ่งกลางหมายถึงวิธีการจัดตำแหน่งที่กำหนดเนื้อหาข้อความและปรับระยะห่างแนวนอนของข้อความ เพื่อให้ข้อความในย่อหน้าหรือบทความจัดแนวในแนวนอนไปทางตรงกลาง การจัดกึ่งกลางทำให้ข้อความทั้งสองด้านของบทความมีความเข้มข้นตรงกลาง เพื่อให้ทั้งย่อหน้าหรือบทความมีความเรียบร้อย

การจัดตำแหน่งหมายถึงการตั้งค่าปลายทั้งสองด้านของเนื้อหาข้อความและการปรับระยะห่างแนวนอนของข้อความ/คำให้อยู่ กระจายเท่าๆ กันที่ขอบซ้ายและขวาของหน้ากระดาษ Justify ช่วยให้ขอบข้อความทั้งสองด้านดูเรียบร้อย

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

3. ความชัดเจน

ความชัดเจนอธิบายความง่ายและสะดวกสบายในการอ่านข้อความที่พิมพ์ อันที่จริงนี่คือจุดประสงค์พื้นฐานที่สุดของการออกแบบทั่วไป นอกเหนือจากหลักการที่อธิบายไว้ข้างต้นแล้ว ฉันยังได้รวบรวมหลักความชัดเจนเล็กๆ น้อยๆ ที่จะแชร์กับคุณด้วย:

ใช้ขนาดแบบอักษรไม่เกิน 3 ขนาดในการออกแบบ

ใช้แบบอักษรสูงสุดสามแบบในการออกแบบเดียว

จำเป็นต้องตรวจสอบให้แน่ใจว่ามีคอนทราสต์บางอย่าง แต่ไม่คอนทราสต์มากเกินไป อักษรหยาง (ตัวอักษรสีดำบนพื้นหลังสีขาว) อ่านได้ง่ายกว่าอักษรหยิน (ตัวอักษรสีขาวบนพื้นหลังสีดำ) บนพื้นหลังของ #fff ข้อความที่ใช้ #333 ดูสบายตากว่าข้อความ #000

ให้ความสนใจกับพื้นหลังของข้อความ พื้นหลังควรเรียบง่าย หลีกเลี่ยงเสียงรบกวนจากพื้นหลัง

"Less is more" ใช้องค์ประกอบที่น้อยที่สุดเพื่อถ่ายทอดข้อมูลให้ได้มากที่สุด

ทำให้ลิงค์ของคุณดูเหมือนลิงค์

ใช้พื้นที่ของคุณให้เกิดประโยชน์