มีข้อควรพิจารณาอะไรบ้างในการออกแบบฟอนต์พิกเซล


14

ฉันกำลังออกแบบฟอนต์พิกเซล monospace สำหรับเกมและจนถึงตอนนี้ฉันสามารถทำงานกับขนาดที่เล็กมาก ๆ (ที่ใหญ่ที่สุดที่ฉันจัดการได้คือ 5x9) เพราะอันที่ง่ายที่สุดในการลองและทำผิด บ่อยครั้งที่ผลลัพธ์ที่ฉันเกิดขึ้นกับขนาดแม้เล็กถึง 7x13 ล้วน แต่มีปัญหาและไม่ดึงดูด

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

มีขนาดบล็อกพิเศษที่ "ดีที่สุด" สำหรับการออกแบบฟอนต์พิกเซลหรือไม่? มีตำแหน่งพิกเซลพิเศษที่ฉันอาจจำไว้หรือไม่? เพราะบางครั้งเมื่อฉันวาดเส้นที่มีความยาวเพียง 11 พิกเซล (หรือทำให้สิ่งต่าง ๆ ตัดกับขนาดที่เล็กขนาดนี้) มันก็จะกลายเป็นอย่างอื่นเมื่อซูมออก

คำตอบ:


11

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

ไม่มีกริดพิกเซลในอุดมคติจริงๆ เห็นได้ชัดว่ากริดที่ใหญ่ขึ้นจะช่วยให้คุณมีพื้นที่ในการทำงานมากขึ้น ประเภทที่เล็กที่สุดที่ฉันเคยเห็นงานประสบความสำเร็จคือการออกแบบ 7px การออกแบบ MiniFonts ของ Joe Gillespieจะช่วยให้คุณเข้าใจการออกแบบตามเกณฑ์ที่อ่านได้ง่าย คำถามอื่นที่นี่เกี่ยวข้องกับการออกแบบขนาดเล็กเหล่านั้นและอาจให้การอ้างอิงเพิ่มเติม

จะเริ่มที่ไหนดี

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

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

จัดจ้านมีขนาดเล็กพอ ๆ กับตัวพิมพ์เล็ก

รายละเอียด

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

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

คอมพิวเตอร์ที่เป็นเพื่อนของเราในสถานการณ์เช่นนี้ทำให้เกิดความสับสน: เพียงแค่ให้เปิดหน้าต่างที่สองกับมุมมอง 100% เพื่อให้คุณสามารถดูวิธีการออกแบบของคุณเป็นจริงมอง การมีจอภาพที่สองอยู่รอบ ๆ สำหรับ "มุมมองความเป็นจริง" นี้ทำให้สิ่งต่าง ๆ สะดวกสบายยิ่งขึ้น

รองรับตัวพิมพ์เล็ก

เนื่องจากคุณพูดถึงความจำเป็นในการใช้ตัวพิมพ์เล็กที่ 6 x 12 ...

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

ยกโทษให้ฉันมันเป็นภาพคร่าวๆ

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

อักขระตัวพิมพ์เล็กที่มีตัวชี้ขึ้นที่โดดเด่นมักจะอ่านได้ดีกว่าหากตัวอักษรเหล่านั้นยาวเกินระดับความสูงสูงสุดเล็กน้อย (เช่นbในตัวอย่างของฉัน) ตัวอย่างของฉันยังคงอยู่ในที่สูง 11px สิ่งนี้ได้รับความช่วยเหลือจากข้อเท็จจริงที่ว่าความชัดเจนนั้นได้รับอิทธิพลจากตัวถอดรหัสยาว: เพียงไม่กี่พิกเซลเท่านั้นที่ทำได้

แม้ในตารางที่เข้มงวดนี้คุณสามารถเห็นสไตล์ที่คุณสามารถเพิ่มได้โดยไม่ต้องอ่านให้ชัดเจน

ขยายใหญ่ขึ้นคุณจะเห็นว่าสิ่งแปลก ๆ เกิดขึ้นได้อย่างไร

ด้วยความสูง x และร่างกายที่ไฮไลต์สำหรับการอ้างอิง:

ป้อนคำอธิบายรูปภาพที่นี่

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

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

มองไปที่เจ้านาย

เช่นเดียวกับงานศิลปะคุณจะได้เรียนรู้มากที่สุดโดยพยายามทำสิ่งที่อาจารย์ทำ ตัวอย่างที่ฉันลิงก์ไว้ด้านบนจะช่วยให้คุณได้รับข้อมูลมากมาย

กรณีศึกษาคลาสสิกในความเป็นเลิศอักษรพิกเซลเป็นชุดชั้นของ Unibody 8 นวนิยายตรง "ตัวเอียง" จะได้รับผลกระทบโดยใช้การจัดแนว 45 °เพื่อบ่งบอกมุมของแบบอักษรตัวเอียงโดยไม่ลดทอนทั้งตัวอักษรในกระบวนการ

Emigreเป็นหนึ่งในผู้บุกเบิกอีกคนหนึ่งพร้อมกับSusan Kareใน Mac OS ยุคแรก

* บันทึก Side:
Retinaเป็นตัวอย่างที่ยอดเยี่ยมของวิธีการบัญชีตัวอักษรพิมพ์ที่ไม่คาดคิดที่มีขนาดเล็ก ๆ ที่เป็นสิ่งที่ผมจะคิดว่ามันเป็นบรรพบุรุษของเบลล์ Centennial

จอประสาทตาของ H & FJ


อันที่จริงฉันต้องการตัวพิมพ์เล็ก ฉันต้องการแบบอักษร 6x12 ที่จะสามารถใช้งานได้พูดคอนโซล
Joe Z.

แต่ใช่นี่เป็นคำตอบที่ดีมากมีแหล่งข้อมูลมากมายที่ฉันสามารถดูเพิ่มเติมได้ ขอขอบคุณ.
Joe Z.

1
นอกจากนี้เล็กน้อยมาก: "ระยะใกล้และไกล" ทำได้อย่างง่ายดายใน Photoshop โดยการสร้างหน้าต่างใหม่ (เมนูหน้าต่าง> จัดเรียง> หน้าต่างใหม่สำหรับ docname-1) และปล่อยให้หนึ่งในนั้นที่ขนาดการซูม 100% ออกไปทางด้านข้าง "คัดลอกหน้าตัวอย่าง"
horatio

1
ไม่ต้องกังวลคุณจะได้รับความคิด ฉันไม่คิดว่าคุณจะต้องการความสูงเพิ่มอีก ฉันจะเพิ่มพิกเซลพิเศษที่ความกว้างและปล่อยให้ความสูงระหว่าง 10 และ 12 เล่นกับตัวละครไม่กี่ตัวและดูว่าคุณอยู่ที่ไหน
เสื้อผ้าธรรมดา

1
โดยวิธีการที่คำทดสอบมาตรฐานที่บัญชีสำหรับรูปร่างพื้นฐานของตัวอักษรโรมันเป็นHamburgefonts นักออกแบบหลายชนิดจะเริ่มต้นด้วยH, nและoจะได้รับความรู้สึกสำหรับลักษณะสำคัญ
เสื้อผ้าธรรมดา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.