ฟอนต์พิกเซลสมัยใหม่ที่น่าสนใจบางตัว

 (unsung.aresluna.org)
2 คะแนน โดย GN⁺ 6 시간 전 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Analog Mono เป็นฟอนต์สไตล์พิกเซลที่อิงจาก VCR OSD Mono ของอุปกรณ์อย่าง VCR, TV, แคมคอร์เดอร์ และเครื่องเสียงไฮไฟในยุค 1990 โดยแก้ปัญหาที่เกิดจาก baseline ต่ำ
  • ใน VCR OSD Mono ตัวอักษรที่มี descender จะถูกดึงขึ้นด้านบน และ Analog Mono ได้แก้ปัญหา baseline นี้
  • Coral Pixels เป็น color font ที่มีให้ใช้งานบน Google Fonts ด้วย โดยบรรจุเอฟเฟกต์สีฟุ้งตามขอบแบบยุค 1990~2000 ไว้ในตัวฟอนต์เอง
  • Two Slice เป็นฟอนต์ที่สูงเพียง 2 พิกเซล และเป็นฟอนต์พิกเซลขนาดเล็กสุดขั้วที่ชูจุดขายว่า “พออ่านได้ในระดับหนึ่ง”
  • Geist Pixel มองฟอนต์พิกเซลไม่ใช่ของตกแต่ง แต่เป็นเครื่องมือเชิงหน้าที่ในระบบ typography สำหรับ production โดยให้ความสำคัญกับงานประกอบอย่าง metrics และ kerning

ฟอนต์สไตล์พิกเซลสมัยใหม่บางตัว

  • Analog Mono

    • Analog Mono ของ Andrew Gleeson เป็นฟอนต์สไตล์พิกเซลที่สร้างจาก VCR OSD Mono ซึ่งพบได้บ่อยใน VCR, TV, แคมคอร์เดอร์ และเครื่องเสียงไฮไฟในยุค 1990
    • ฟอนต์ต้นฉบับมีปัญหาจาก baseline ต่ำ ทำให้ตัวอักษรที่มี descender ถูกดึงขึ้นด้านบน และ Analog Mono ได้ปรับแก้จุดนี้

  • Coral Pixels

    • Coral Pixels ของ Kumiko Yoshida เป็น color font ที่มีให้ใช้งานบน Google Fonts ด้วย
    • ฟอนต์นี้รวมเอฟเฟกต์สีฟุ้งตามขอบอันสดใสแบบยุค 1990 และ 2000 ไว้ในตัวฟอนต์เอง
    • เอฟเฟกต์ฟุ้งนี้เดิมเป็นผลลัพธ์ของ subpixel rendering แต่ปัจจุบันก็ถูกใช้ได้ทั้งในเชิงความ nostalgic และเป็นองค์ประกอบภาพในตัวเอง

  • Two Slice

    • Two Slice ของ Joseph Fatula เป็นฟอนต์ที่สูงเพียง 2 พิกเซล และชูแนวคิดว่า “พออ่านได้ในระดับหนึ่ง”

  • Geist Pixel

    • ฟอนต์ก่อนหน้านี้ทั้งหมดเป็น vector font ที่ติดตั้งบนระบบปฏิบัติการสมัยใหม่ได้ แต่ถูกออกแบบให้ดูเหมือนฟอนต์พิกเซล
    • Geist Pixel ของ Vercel ปฏิบัติต่อฟอนต์พิกเซลในฐานะ เครื่องมือเชิงหน้าที่ ที่ใช้ภายในระบบ typography ที่กว้างกว่า ไม่ใช่แค่ของตกแต่ง
    • Geist Pixel มองว่าสาเหตุที่ฟอนต์พิกเซลมักใช้งานพังในงาน production มาจากปัญหาการขยายข้าม viewport, metrics ที่ชนกับ typography เดิม, และความเป็นของตกแต่งล้วน ๆ จึงพยายามรักษาทั้งพื้นผิวทางภาพและความเข้มงวดด้าน typography ที่ผลิตภัณฑ์ต้องการไว้พร้อมกัน
    • จุดอ่อนของฟอนต์บางตัวไม่ได้อยู่ที่รูปร่างตัวอักษร แต่เป็นงานรอบข้างที่มองไม่เห็นอย่าง kerning, metadata, glyph เพิ่มเติม และ vertical metrics ซึ่งทีม Geist Pixel ให้ความสำคัญกับ vertical metrics เป็นพิเศษ

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 6 시간 전
ความคิดเห็นจาก Hacker News

  • สิ่งที่ลืมกันได้ง่ายคือ ฟอนต์พิกเซล สมัยใหม่ล้วนตั้งอยู่บนสมมติฐานว่าอัตราส่วนกว้างยาวของพิกเซลเป็น 1:1 คือสูงกับกว้างเท่ากัน ดังนั้นกรอบตัวอักษร 8x8 จึงเป็นสี่เหลี่ยมจัตุรัสสมบูรณ์
    แต่จอคอมพิวเตอร์รุ่นเก่าจำนวนมากไม่ได้เป็นแบบนั้น และส่วนใหญ่มีความละเอียดตามแนวนอนถี่กว่าเส้นแนวตั้ง ทำให้มีพิกเซลแนวนอนมากกว่าในระยะจริงเท่ากัน พิกเซลสี่เหลี่ยมจัตุรัสแบบ 1:1 แทบจะเป็นนวัตกรรมของ Macintosh และในยุคนั้นก็หาได้ยากมาก ดังนั้นถ้าเอาฟอนต์ในหน้านี้ไปดูบนอุปกรณ์ยุค 80 รุ่นอื่น ๆ ก็คงจะดูไม่ “ถูกต้อง” ในทางกลับกัน ถ้านำฟอนต์ของอุปกรณ์เหล่านั้นมาแสดงบนจอสมัยใหม่ก็ดูแปลกเช่นกัน

    • ไม่ได้ถูกลืมไปเสียทีเดียว เช่น ชุดฟอนต์ int10h ซึ่งน่าจะเป็นคลัง ฟอนต์บิตแมป ที่ใหญ่ที่สุด ได้แสดงการชดเชยอัตราส่วนกว้างยาวแยกตามฟอนต์ไว้อย่างชัดเจน https://int10h.org/oldschool-pc-fonts/

  • Analog Mono กับ Two Slice เท่มาก ถ้าคุณชอบแนวนี้ก็น่าจะชอบ Departure Mono ด้วย ซึ่งเป็นหนึ่งในฟอนต์พิกเซลสมัยใหม่ที่ฉันชอบ https://departuremono.com

    • ให้ความรู้สึกเหมือนฟอนต์ที่ใช้ในวิดีโอเกม Papers, Please
    • ฉันก็เข้ามาเพื่อจะพูดแบบนี้เหมือนกัน และจริง ๆ แล้วชอบ Departure มากจนเอาไปใช้เป็นฟอนต์สำหรับเขียนโค้ดและในเทอร์มินัลเลย ฟอนต์ในโพสต์ต้นฉบับก็ตั้งใจว่าจะลองใช้แน่นอน

  • ยังมีใครใช้ฟอนต์ misc fixed ขนาด 7x13 ที่มากับ X11 อยู่ไหม? เปลี่ยนไม่ลงจริง ๆ อ่านได้สมบูรณ์แบบทั้งบนจอ 14 นิ้ว 1920×1200 และจอ 35 นิ้ว 3440×1440 มันเล็กก็จริง แต่นั่นแหละคือประเด็น
    ปัญหาเดียวคือที่ขนาดนั้นอ่านสัญลักษณ์ Nerd Font ได้ยากมาก การทำให้มันเรนเดอร์ใน alacritty เองไม่ได้ยากนัก แต่ใน rxvt-unicode ต้องมีการแฮ็กเพิ่มอีกนิดหน่อย

  • ชอบ https://viznut.fi/unscii/ มันถูกสร้างมาสำหรับ ASCII art แต่ก็ยังใช้ในเทอร์มินัลได้ดี และยังอัปเดต Unicode ต่อเนื่อง

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

  • เมื่อไม่กี่ปีก่อนฉันทำ โปรเจกต์ฝังตัว ที่ใช้จอเล็กมากขนาด 128x64 และอยากใช้ฟอนต์พิกเซล แต่หาเท่าไรก็ไม่เจออะไรที่พอใจ เลยทำเอง ปรากฏว่าง่ายมาก Font Forge ยอดเยี่ยมและใช้งานง่ายมาก
    แค่กำหนดตัวอักษรไม่กี่ตัวในขนาดที่ต้องการเป็นจุดเริ่ม ก็สามารถสร้างผลลัพธ์ที่ดูกลมกลืน สวย และอ่านง่ายได้อย่างรวดเร็ว แนะนำมากให้ลองทำเป็นแบบฝึกหัด เพิ่มเติมคือฉันยังยัดไอคอนโอเพนซอร์สสำหรับโปรเจกต์เข้าไปเป็น glyph ในฟอนต์จำนวนมากด้วย และการลองดูว่าจะทำให้เล็กได้แค่ไหนโดยยังแยกแยะได้ก็สนุกมาก

  • ในฐานะคนที่รักซอฟต์แวร์ความละเอียดต่ำ ต้องยอมรับ ฟอนต์ที่ดีที่สุด ที่ไม่มีใครโค่นได้มาตั้งแต่ปี 2003 https://www.dafont.com/04b-03.font
    ทุกวันนี้ถ้าอยากทำให้ซอฟต์แวร์ดูเหมือนหนังสือคาถาแฟนตาซีสวย ๆ ก็มี alpha ครบหมด https://skeddles.itch.io/eldring-pro

    • ยังมี dotsies ด้วย สูง 5 กว้าง 1 ไม่มีระยะแนวนอนสำหรับ kerning และช่องว่าง ASCII ก็เป็น “อักขระ” สีขาวล้วนไปเลย มันเป็นของสำหรับตัวอักษรหรือข้อความล้วน ๆ และน่าจะถูกทำมาเพื่อความหนาแน่นทางสายตามากกว่าการประหยัดพิกเซลจริง ๆ
      [0]: http://web.archive.org/web/20171103012446/http://dotsies.org...
    • ฟอนต์ Elisa รุ่นเก่าก็ถือว่าสู้กันได้ เป็นฟอนต์จากญี่ปุ่นเหมือนฟอนต์ 04 https://twitter.com/gingerbeardman/status/111533004449746944...

  • Analog Mono กับ Geist มีพิกเซลต่อ glyph มากพอจนที่ขนาดประมาณต่ำกว่า 20px จะอ่านไม่ค่อยได้แบบฟอนต์พิกเซล Analog ยังพอบรรเทาจุดนี้ได้บ้างด้วยการใช้บล็อกพิกเซล 2x2 ขนาดใหญ่ซ้อนกัน แต่ Geist สำหรับฉันดูเหมือนฟอนต์เวกเตอร์ที่ถูกย่อมากกว่า

    • สำหรับฉันมันดูเหมือน ฟอนต์ X11 ความละเอียดสูง ไม่ได้มีอะไรสร้างสรรค์หรือยูนีกเป็นพิเศษ

  • ฉันชอบฟอนต์ Gohu มาก ช่วงหลังตอนปรับแต่งธีมบล็อกแบบสแตติก ได้แปลงมันเป็น woff2 ไปใช้ที่ http://dntbl.ink และพอใจกับวิธีเรนเดอร์รวมถึงบรรยากาศแบบ VAX ที่มันให้มาก