คำแนะนำที่สมบูรณ์สำหรับแบบอักษรการออกแบบเว็บบนเค้าโครงหน้า

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

ประเภทตัวอักษร

แบบอักษรภาษาอังกฤษ (แบบอักษร) แบ่งออกเป็นหลายประเภทหลัก

1. Serif

Serif เป็นส่วนตกแต่งของขอบของจังหวะ เครื่องหมายสีแดงในรูปด้านล่างคือ serif

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

serifs ที่ใช้กันทั่วไปในการออกแบบเว็บเป็นครั้งใหม่โรมันและจอร์เจีย ด้านซ้ายของภาพด้านล่างเป็นแบบอักษรโรมันใหม่ที่มี 12px และด้านขวาคือจอร์เจียที่มี 12px

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

2. sans-serif/sans-serif

หากตัวอักษรไม่ได้เป็น serif มันจะเรียกว่า sserif หรือ sans serif รูปต่อไปนี้คือ Sanserif

มี sans serifs ที่ใช้กันทั่วไปในการออกแบบเว็บ มี Arial, Verdana, Tahoma, Helivetica, Calibri ฯลฯ รูปต่อไปนี้คือ Arial, Verdana และ Tahoma จากซ้ายไปขวา:

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

3. Monospace

แบบอักษร Monowidth นั้นเป็นแบบอักษรตะวันตกเท่านั้น เพราะความกว้างของตัวอักษรภาษาอังกฤษแตกต่างกันไป ตัวอย่างเช่นฉันแคบกว่า M มาก เมื่อการเขียนโปรแกรมรหัสจะปรากฏขึ้นหากตัวอักษรไม่เท่ากันในความกว้างเค้าโครงจะน่าเกลียด ในบรรทัดคำสั่ง DOS เราจะเห็นว่าใช้ตัวอักษร monospace

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

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

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

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

4. ตัวอักษร Whitespace (ASCII: 0 × 20) เท่ากับอักขระอื่น ๆ

5. ตัวละครสามตัวเช่น "1", "L" และ "I" นั้นง่ายต่อการแยกแยะ

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

7. ส่วนด้านหน้าและด้านหลังของคำพูดสองเท่าและคำพูดเดี่ยวนั้นง่ายต่อการแยกแยะและเป็นการดีที่สุดที่จะมีกระจกตามสมมาตร

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

แบบอักษร Monospace ทั่วไป ได้แก่ Courier, Courier ใหม่

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

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

5. สัญลักษณ์

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

รูปแบบตัวอักษร

รูปแบบตัวอักษรทั่วไปแบ่งออกเป็น: ปกติ, ตัวหนา, ตัวเอียง, ตัวเอียง

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

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

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

หน่วย

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

1. จุด (pt, จุด)

72 คะแนน = 1 นิ้ว 1 นิ้วคือ 72 คะแนน นอกจากนี้ 1 ปิคอัพ (pica) = 12 คะแนน

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

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

3. DPI, PPI

ชื่อเต็มของ DPI คือจุดต่อนิ้วและชื่อเต็มของ PPI คือพิกเซลต่อนิ้ว พวกเขาเป็นหน่วยของความละเอียด กล่าวคือจำนวนคะแนน (พิกเซล) สามารถจัดเรียงได้ในระยะเวลา 1 นิ้ว ตัวอย่างเช่นโดยทั่วไปจอภาพของเรามีความยาวประมาณ 72ppi ซึ่งหมายถึงความยาว 1 นิ้วโดยมี 72 จุด (พิกเซล) ยิ่ง 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. ความสูงบรรทัดนำ

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

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

2. การเว้นระยะห่างจดหมายติดตาม

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

3. kerning

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

ย่อหน้า

1. ประธานาธิบดี (มาตรการ)

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

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

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

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

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

โดยทั่วไปมีการจัดตำแหน่งสี่ประเภทของวรรค: ซ้าย (ฟลัชซ้าย), ขวา (ฟลัชขวา), กึ่งกลาง (กึ่งกลาง) และเป็นธรรม

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

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

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

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

3. ง่ายในการอ่าน

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

การออกแบบใช้ขนาดตัวอักษรมากถึงสามขนาด

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

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

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

"น้อยกว่านั้นมากขึ้น" ใช้องค์ประกอบน้อยที่สุดในการถ่ายทอดข้อมูลมากที่สุด

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

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