CodingFont: เกมที่ช่วยคุณเลือกฟอนต์สำหรับเขียนโค้ด

 (codingfont.com)
1 คะแนน โดย GN⁺ 2026-03-31 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เกมแบบอินเทอร์แอ็กทีฟบนเว็บ ที่ช่วยให้คุณเปรียบเทียบ ฟอนต์แบบ monospaced หลายแบบ เพื่อหาฟอนต์สำหรับเขียนโค้ดที่อ่านง่ายที่สุดสำหรับตัวเอง
  • ในแต่ละรอบจะมีการแสดงฟอนต์ 2 แบบ และเมื่อผู้ใช้เลือกฟอนต์ที่ชอบมากกว่า ระบบจะสร้าง ผลลัพธ์คำแนะนำเฉพาะบุคคล
  • สามารถปรับองค์ประกอบด้านภาพได้โดยตรง เช่น Font Ligatures, การปรับขนาดฟอนต์, การเปลี่ยนธีม เพื่อประเมินภายใต้เงื่อนไขที่ใกล้เคียงกับสภาพแวดล้อมการพัฒนาจริง
  • ตัวอย่างโค้ดมี ชุดอักขระที่คล้ายกัน เช่น 0, O, l, 1 เพื่อทดสอบ ความสามารถในการแยกแยะตัวอักษร ของแต่ละฟอนต์
  • เชื่อมต่อกับ Studio ของ Typogram และรองรับการสำรวจและเปรียบเทียบฟอนต์ผ่าน UI ที่เรียบง่าย ซึ่งใช้งานได้ทันทีในเบราว์เซอร์

ฟีเจอร์หลัก

  • สามารถเปิดหรือปิดตัวเลือก Font Ligatures เพื่อเปรียบเทียบฟอนต์ที่มีและไม่มีคุณสมบัติ ligature
  • สามารถปรับ ขนาดฟอนต์ (Font Size) ได้ในช่วง 8~36 เพื่อตรวจสอบความอ่านง่ายบนสภาพแวดล้อมหน้าจอที่หลากหลายได้ด้วยตนเอง
  • สามารถเปลี่ยนการแสดงชื่อฟอนต์และธีมหน้าจอได้ผ่านการตั้งค่า Show Name และ Theme
  • ฟอนต์แต่ละแบบจะถูกเปรียบเทียบโดยใช้ ตัวอย่างโค้ด JavaScript เดียวกัน ทำให้ตัดสินได้ภายใต้เงื่อนไขที่คล้ายกับสภาพแวดล้อมการพัฒนาจริง

องค์ประกอบของตัวอย่างโค้ด

  • โค้ดตัวอย่างมีทั้ง คอมเมนต์บรรทัดเดียว (//) และ คอมเมนต์หลายบรรทัด (/* ... */)
  • มีการนิยามฟังก์ชัน isMultipleOf ด้วยไวยากรณ์ arrow function และมีลอจิกง่าย ๆ สำหรับเปรียบเทียบตัวเลขกับตัวคูณ
  • ชื่อตัวแปรใช้ ชุดอักขระที่มองคล้ายกัน เช่น 0, o, O, l, 1, I เพื่อให้ตรวจสอบความชัดเจนในการแยกแยะของแต่ละฟอนต์ได้
  • ผลลัพธ์ของการเรียกใช้ฟังก์ชันจะแสดงในคอนโซล และสามารถทดสอบ ความสามารถในการแยกแยะตัวอักษร ได้ผ่านตัวอย่างที่จัดการ 0 และ 1 แตกต่างกัน

การโต้ตอบและลำดับการใช้งาน

  • ผู้ใช้สามารถเลือกฟอนต์ในแต่ละรอบ หรือเลื่อนด้วยปุ่มลูกศร(⇽, ⇾)เพื่อทำการเปรียบเทียบต่อไป
  • เมื่อเลือกเสร็จแล้ว ระบบจะไปยังคู่ฟอนต์ถัดไป และค่อย ๆ เรียนรู้ ความชอบด้านความอ่านง่าย ของแต่ละคนผ่านการทำซ้ำ
  • สามารถเริ่มเกมใหม่ได้ทันทีด้วยปุ่ม Restart Game เพื่อเริ่มเซสชันการเปรียบเทียบใหม่

ฟีเจอร์เสริมและการสำรวจ

  • สามารถสำรวจฟอนต์สำหรับเขียนโค้ดหลากหลายแบบได้โดยตรงผ่านแท็บ Browse ในเมนูด้านบน
  • สามารถไปยังเครื่องมือออกแบบฟอนต์ของ Typogram ได้ผ่านลิงก์ Studio
  • อินเทอร์เฟซทั้งหมดเป็น UI บนเว็บที่เรียบง่าย และสามารถใช้งานได้ทันทีในเบราว์เซอร์โดยไม่ต้องติดตั้งเพิ่มเติม

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

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

 
GN⁺ 2026-03-31
ความคิดเห็นจาก Hacker News

  • สิ่งที่ไม่ชอบในเกมนี้คือเบราว์เซอร์เป็นผู้ เรนเดอร์ฟอนต์โดยตรง
    Chrome วาดฟอนต์ไม่เหมือน Freetype หรือ DirectWrite จึงไม่ตรงกับทั้ง Windows และ macOS อย่างสมบูรณ์
    คิดว่าการแสดง ภาพหน้าจอแบบไม่สูญเสียคุณภาพ จากการเรนเดอร์จริงของแอปจะแม่นยำกว่า
    ความอ่านง่ายของแต่ละฟอนต์เปลี่ยนไปตามขนาด และผลลัพธ์ก็แตกต่างกันตามตัวเรนเดอร์ด้วย
    ฉันทดสอบหลายฟอนต์แล้ว โดยเทียบกับ Fira Code มี 8 ตัวที่ดีกว่า และ 17 ตัวที่แย่กว่า
    ลิงก์ผลการทดสอบ

    • เห็นด้วยมาก แม้จะขนาดพิกเซลเท่ากัน แต่ฟอนต์ก็ดูต่างกันมากตามสภาพแวดล้อม
      ฉันชอบ คุณภาพการเรนเดอร์ฟอนต์ ของ macOS มาก แต่บน Linux ยังทำให้ใกล้เคียงแบบนั้นไม่ได้

  • เห็น <= ถูกเปลี่ยนเป็น ลิแกเจอร์ (ligature) ก็เขี่ยทิ้งทันที
    อย่าเล่นอะไรกับตัวอักษรในโค้ดเลย

    • บางฟอนต์มีเสากลางของตัว “m” ตัวพิมพ์เล็กที่สั้น ซึ่งฉันชอบมาก
      สุดท้ายก็กลับไปใช้ Ubuntu Mono ตัวเดิม อย่างน้อยก็ยังคงความสม่ำเสมอไว้ได้
    • ฟีเจอร์ลิแกเจอร์แบบนี้ปิดได้ใน การตั้งค่าเทอร์มินัล
      ปรับได้ในอย่างเช่น wezterm หรือ ghostty
    • ในเว็บมี ตัวเลือกเช็กบ็อกซ์ สำหรับปิดลิแกเจอร์
    • ฉันชอบลิแกเจอร์ส่วนใหญ่ แต่สำหรับอันนี้อยากให้ ปิดแบบเลือกเฉพาะจุด ได้
    • ฉันก็ไม่ค่อยชอบลิแกเจอร์เหมือนกัน ปิดได้จากเช็กบ็อกซ์มุมขวาบนของเว็บ

  • ถ้าใครกำลังบอกว่าไม่มีฟอนต์ถูกใจ อยากแนะนำ MAPLE MONO
    อ่านง่ายมาก และ รองรับ Nerd Font ได้ดีด้วย
    คนรอบตัวถึงกับชมฟอนต์ที่ฉันใช้

    • แต่ตัวเอียงของ ‘l’ มีความเอียงและระยะห่างไม่เหมือนตัวอื่น ทำให้ดู เสียสมดุลทางสายตา
      โดยเฉพาะในคำอย่าง “null” จะเห็นความต่างชัดมาก
    • ถ้าจะช่วยแชร์ฟอนต์ที่คนรู้จักน้อยหน่อย ฟอนต์ที่ฉันชอบคือ Lotion
      น่ารัก เรียบสะอาด และยังอ่านง่ายด้วย
    • ส่วนตัวฉันรู้สึกว่า Maple Mono ดูมือสมัครเล่นแบบ Comic Sans
    • ข้อดีของ Maple Mono คือแยก ‘I’ กับ ‘l’ และ ‘0’ กับ ‘O’ ได้ชัดเจน
      แต่ยังขาดรายละเอียดเล็ก ๆ อย่างเสากลางของ “m” ที่สั้นเพื่อสร้างความแตกต่าง
    • ฉันไม่อยากได้ ตัวเอียงที่กลายเป็นลายมือ ใน IDE

  • ฉันชอบเกมนี้มาก แต่ถ้าเป็นการเปรียบเทียบแบบ “Hot or Not” แทน รูปแบบทัวร์นาเมนต์ น่าจะดีกว่า
    เวลาต้องเลือกฟอนต์ที่คล้ายกันมันยาก และอยากเห็น เปอร์เซ็นต์ความชอบ ด้วย

  • ฟอนต์ที่ฉันชอบอย่าง Berkeley Mono, Iosevka และ Cascadia Code ไม่มีอยู่ในนั้น
    แต่กลับมี Roboto Mono ซึ่งถ้าไม่ชอบการเรนเดอร์ของ “m” กับ “r” ก็จะรู้สึกว่าทั้งฟอนต์ดูแปลกไปเลย

    • มี IoskeleyMono ที่ผสม Berkeley กับ Iosevka เข้าด้วยกันด้วย
    • Berkeley Mono คือ ฟอนต์ตัวแรกที่ฉันยอมจ่ายเงินซื้อ
      มันเกือบสมบูรณ์แบบ และเครื่องมือปรับแต่งก็ดีเยี่ยม
      ถ้าจะใช้ในสภาพแวดล้อม Nix ต้องมี การตั้งค่าแบบแฮ็กนิดหน่อย แต่ฉันก็ยังใช้อยู่เป็นประจำ
      ลิงก์เวอร์ชันที่ฉันแก้ไข
    • ไม่ว่าจะลองมากี่ฟอนต์ สุดท้ายก็มักกลับมาที่ Ubuntu Mono
      ทำให้รู้สึกว่าฟอนต์โอเพนซอร์สพื้นฐานก็ดีพออยู่แล้ว

  • ฟอนต์สำหรับเขียนโค้ดที่ฉันใช้คือ comic-shanns-mono

    • ฟอนต์ชื่อ Codemonkey ก็น่าสนใจเหมือนกัน เว็บ มีฟอนต์แนวการ์ตูนเยอะมาก
      แต่มีบั๊กที่สัญลักษณ์ ‘+’ แสดงเป็นช่องว่าง
    • ฉันเริ่มใช้ฟอนต์นี้ตอนทำโปรเจกต์ Zed แล้วก็ยิ่งชอบขึ้นเรื่อย ๆ
    • มันทำให้นึกถึง ฟอนต์ยุค Smalltalk
    • ฉันใช้ Comic Code Ligatures :D
    • ตอนเห็นชื่อครั้งแรกก็นึกว่าจะไม่ชอบ แต่จริง ๆ แล้วชอบกว่าที่คิดมาก

  • สุดท้ายฉันเลือก Victor Mono ซึ่งก็เป็นฟอนต์ที่เคยใช้มาหลายปีแล้วเหมือนกัน
    บน iPhone อยากให้มี แถบแสดงความคืบหน้า และมีตัวเลือกแบบ “ฟอนต์นี้ยังไงก็ไม่ใช้แน่” ด้วย
    ทุก ๆ ไม่กี่ปีก็จะสลับไปมาระหว่าง ฟอนต์แคบ (Iosevka) กับ ฟอนต์กว้าง (Azeret Mono)

    • ฉันก็ใช้ Victor Mono ไปได้ค่อนข้างลึกเหมือนกัน แต่ใน Firefox การ เรนเดอร์สัญลักษณ์ @ ดูไม่ค่อยดี
      ในเทอร์มินัลกลับโอเค เลยน่าจะเป็นปัญหาความต่างของตัวเรนเดอร์

  • ช่วงนี้ฉันใช้ Iosevka เป็นหลัก แต่เมื่อก่อนก็เคยใช้ Ubuntu Mono, JetBrains Mono, PT Mono, Terminus และอีกหลายตัว
    ในบรรดานั้น Liberation Mono อ่านง่ายที่สุด
    ช่วงหลัง ๆ Cascadia Code ก็เป็นฟอนต์ที่ชอบแบบไม่คาดคิด

    • เสียดายที่เว็บไม่มี Cascadia
      ลองใช้ไม่กี่สัปดาห์แล้วอ่านง่ายกว่ามาก จนคิดว่าคงเป็นฟอนต์ขนาดใหญ่กว่า แต่จริง ๆ แล้ว เล็กกว่าและยังอ่านง่ายกว่า

  • ตอนแรกฉันคิดว่าตัวเองไม่ได้สนใจฟอนต์ขนาดนั้น แต่พอเห็น Xanh Mono ก็รู้สึก ต่อต้านทันที
    สุดท้ายก็พบว่าฟอนต์ดีฟอลต์ของ VS Code อย่าง Droid Sans Mono กับ Roboto Mono แทบไม่ต่างกันเลย

    • ฉันก็มีประสบการณ์คล้ายกัน และกำลังลอง ปรับ Roboto ให้เหมาะกับเทอร์มินัล
      คิดว่าน้ำหนักฟอนต์กับ การรองรับอีโมจิ น่าจะดีกว่า

  • เกมนี้สนุกดี แต่ถ้ามี ตัวบอกความคืบหน้า ก็น่าจะดี
    ถ้าแสดงผลอย่างอันดับ 1, อันดับ 2, รอบรองชนะเลิศ, รอบ 8 คนสุดท้ายด้วยก็คงดี

    • ความคืบหน้าจะแสดงอยู่ทางซ้าย แต่ ไม่แสดงในใบรับรอง
    • บนมือถือมี ตัวบอกความคืบหน้าที่ซ่อนอยู่ หลังปุ่มเมนู