พรีวิวจับคู่ฟอนต์
ไทย–อังกฤษ
ลองฟอนต์ไทยคู่กับอังกฤษแบบ เห็นผลจริง — ปรับขนาด น้ำหนัก ระยะบรรทัด แล้วคัดลอก CSS ไปวางในเว็บได้เลย ไม่ต้องเดา
PRESET PAIRINGS
6 คู่แนะนำแตะเพื่อสลับคู่ฟอนต์ทันที · ปรับต่อได้ทุกค่า
ทิป: คู่ที่เวิร์กส่วนใหญ่ใช้ x-height ใกล้กัน — ลอง Prompt + Inter หรือ Mitr + Space Grotesk จะกลมกลืนสุด
CSS SNIPPET
คัดลอกไปวางได้เลยพื้นหลังพรีวิว
พื้นหลังมีผลแค่พรีวิว ไม่เกี่ยวกับ CSS ที่คัดลอก
พรีวิวเรียลไทม์
พิมพ์แล้วเห็นทันที ทั้งไทย–อังกฤษในเลย์เอาต์เดียวกัน เห็นความกลมกลืนก่อนเอาไปใช้จริง
คัดลอก CSS พร้อมใช้
ได้ font-family, weight, size, line-height และ letter-spacing ครบ — วางในเว็บหรือ Figma ได้เลย
คู่แนะนำที่คัดมาแล้ว
6 คู่ยอดนิยมที่ x-height และบุคลิกเข้ากัน — จากคู่ทางการ (Sarabun) ถึงสายเทค (Chakra Petch)
คำถามที่พบบ่อย
จับคู่ฟอนต์ไทย-อังกฤษดูอะไรเป็นหลัก? +
ดู x-height, น้ำหนัก และคาแรคเตอร์ให้ใกล้กัน — ฟอนต์กลมควรคู่กับฟอนต์กลม (เช่น Kanit + Space Grotesk) ฟอนต์ทางการคู่กับทางการ (Sarabun + Inter) จะกลมกลืนที่สุด
ใช้ฟอนต์เหล่านี้บนเว็บได้ฟรีไหม? +
ได้ — ฟอนต์ทั้งหมดในเครื่องมือนี้มาจาก Google Fonts ใช้ฟรีเชิงพาณิชย์ แค่คัดลอก CSS หรือเพิ่ม <link> ที่ให้ไว้ไปใส่ในเว็บก็ใช้งานได้ทันที
ดาวน์โหลดเป็นรูปภาพไปให้ลูกค้าดูได้ไหม? +
ได้ — กด “ดาวน์โหลด PNG” ระบบจะเรนเดอร์พรีวิวเป็นไฟล์ภาพขนาด 1600×900 พื้นโปร่งใสน้อยๆ เหมาะส่งให้ลูกค้า approve ก่อนขึ้นเว็บจริง
ทำไมต้องแยกฟอนต์ไทย-อังกฤษ ไม่ใช้ฟอนต์เดียวสองภาษา? +
ฟอนต์ที่ทำสองภาษาในไฟล์เดียวมักต้องประนีประนอมรูปทรง ทำให้ไทยหรืออังกฤษฝั่งใดฝั่งหนึ่งไม่สวยเต็มที่ การจับคู่แยกไฟล์ให้อิสระเลือกบุคลิกที่เหมาะกับแต่ละภาษามากกว่า
CSS ที่คัดลอกต้องใส่ Google Fonts link ด้วยไหม? +
ต้อง — ในช่อง CSS จะมีคอมเมนต์บอก <link> ที่ต้องวางใน <head> ให้ด้วย ถ้าไม่ใส่ ฟอนต์จะตกไปใช้ฟอนต์ระบบแทน