Font ภาพหน้าจอที่ใช้ได้ดีในทุกโลแคลของ App Store
การเลือก font สำหรับภาพหน้าจอ App Store มีข้อจำกัดสามอย่างที่การเลือก typography ทั่วไปไม่มี: ความอ่านออกที่ขนาด thumbnail พฤติกรรมของ renderer ใน App Store และการรองรับอักษรใน 50 โลแคลเลือก font ที่ล้มเหลวในข้อใดข้อหนึ่งแล้วคารูเซลจะมี conversion แย่กว่าที่ควรจะเป็น
การทดสอบความอ่านออกที่ขนาด thumbnail
ผลการค้นหา App Store แสดงภาพหน้าจอที่ความกว้างประมาณ 200-260 px — ประมาณ 1/6 ของ 1320 × 2868 ต้นฉบับข้อความคำบรรยายที่สูง 100 px ในดีไซน์จะเรนเดอร์ที่ ~15 px ใน thumbnail ที่ขนาดนั้น font ที่มีเส้นบาง (Helvetica Light, Avenir Next Ultra-Light, Playfair Display Thin) จะกลายเป็นจุดเบลอที่แยกแยะไม่ออก
Font ที่ยังคงความชัดเจนที่ขนาด thumbnail มีลักษณะร่วมกันไม่กี่อย่าง:
- x-height กว้าง (ตัวพิมพ์เล็กสูงกว่าเมื่อเทียบกับตัวพิมพ์ใหญ่)
- น้ำหนักหนัก (700-900)
- ช่องเปิดกว้าง (พื้นที่ negative space ในตัวอักษรอย่าง 'c', 'e', 'a' ยังเปิดที่ขนาดเล็ก)
- ความกว้างเส้นสม่ำเสมอ (ไม่มีความแตกต่างระหว่างเส้นบางและหนา)
Font ที่ใช้ได้สำหรับโลแคลอักษรละติน
ทดสอบแล้วสม่ำเสมอในการใช้งาน App Store คารูเซล:
- Inter (ฟรี open source) — ค่าเริ่มต้นของเรา Inter Bold และ Inter Black เรนเดอร์ได้ดีทุกขนาดรองรับละติน Cyrillic กรีกเวียดนามในตัวเป็น font ภาพหน้าจอแอปที่พบบ่อยที่สุดใน ecosystem indie ปี 2025-2026
- SF Pro (Apple system) — typeface ของ Apple เองใช้งานฟรีในการตลาดสำหรับแอป iOS ตาม license font ของ Apple เรนเดอร์เหมือนกันทุก iOS device รู้สึก "Apple-default" เล็กน้อยกว่า Inter ซึ่งอาจเป็นข้อดีหรือข้อด้อยขึ้นกับแบรนด์
- Söhne (จ่ายเงิน Klim Type Foundry) — ดาวเด่นยุค OpenAI / Anthropic ใช้โดย Linear, OpenAI, Vercel มีหลายน้ำหนัก license แพง
- GT America (จ่ายเงิน Grilli Type) — geometric sans หลายน้ำหนักใช้งานได้ดีในการตลาดใช้โดย Notion, Stripe และอื่นๆ
- Geist (ฟรี Vercel) — release open-source ล่าสุดดูดีที่ขนาด thumbnail รองรับ Cyrillic/กรีกจำกัด
- Roboto / Roboto Flex (Google ฟรี) — ค่าเริ่มต้นของ Android พบน้อยกว่าบนคารูเซล iOS แต่อ่านได้ดี
Font ที่ไม่ควรใช้
- น้ำหนัก Thin / Ultra-Light น้ำหนักต่ำกว่า 400 กลายเป็นเบลอที่ขนาด thumbnail ใช้ 600+ เสมอ 700+ สำหรับคำบรรยายหลัก
- Display font ที่มีความแตกต่างเส้นสูง Didone serif (Bodoni, Didot) condensed display (Bebas, League Spartan Bold Variable) สูญเสียความคมชัด
- Script / handwriting font อ่านไม่ออกที่ขนาด thumbnail ข้ามไปเลย
- Comic Sans, Papyrus มีคนยังลองอยู่อย่าทำ
อักษรที่ไม่ใช่ละติน
Marketing font ส่วนใหญ่ไม่รวม glyphs อาหรับฮีบรู Hindi (Devanagari) ไทยหรือ CJK เมื่อเผยแพร่คารูเซลที่แปลเป็นโลแคลเหล่านั้น font จะ fallback เป็นค่าเริ่มต้นของระบบมีสองคำตอบที่สมเหตุสมผล:
- ยอมรับ system fallback ตามโลแคล ผู้ใช้ในตลาดที่ไม่ใช่อักษรละตินคุ้นเคยกับ font ค่าเริ่มต้นของระบบและไม่สังเกตความสม่ำเสมอของแบรนด์ที่เสียไปไม่คุ้มกับความซับซ้อนในการโหลด font ที่ได้มา
- จับคู่กับ multi-script font ตระกูล Noto (Noto Sans, Noto Serif) ครอบคลุมเกือบทุกอักษรที่ Apple รองรับการจับคู่ Inter สำหรับละตินกับ Noto Sans Arabic, Noto Sans Hebrew, Noto Sans Devanagari, Noto Sans Thai และ Noto Sans CJK ช่วยรักษาน้ำหนัก visual ให้สม่ำเสมอทั่วโลแคล
สำหรับงานภาพหน้าจอ App Store แนวทาง system fallback มักเป็นทางปฏิบัติที่ดีกว่าแนวทาง Noto คือคำตอบที่ถูกต้องสำหรับแอปที่ความสม่ำเสมอของแบรนด์ทั่วตลาดสำคัญมาก (luxury แฟชั่นเครื่องมือดีไซน์)
faux-bold และ faux-italic
หลีกเลี่ยงทั้งสองอย่างเครื่องมือออกแบบส่วนใหญ่ "สังเคราะห์" bold หรือ italic เมื่อน้ำหนักจริงไม่มีผลลัพธ์ดูเสียที่ขนาดเล็กและเรนเดอร์ได้แย่เป็นพิเศษใน CJK และอาหรับใช้น้ำหนักหรือ italic จริงของ font เสมอไม่ใช่เวอร์ชันสังเคราะห์
การทดสอบในทางปฏิบัติ: ถ้า font picker มีแค่ "Regular" และคุณใช้ bold ผ่านปุ่ม "B" คุณได้รับ faux-bold เปลี่ยนเป็น font ที่มีน้ำหนัก Bold จริงๆ
Letter-spacing สำหรับหัวข้อ
Marketing font ส่วนใหญ่มี letter-spacing เริ่มต้นที่ดูดีในข้อความเนื้อหาแต่หลวมเล็กน้อยที่ขนาดหัวข้อให้ลดลง -2% ถึง -4% (tracking) สำหรับข้อความหัวข้อในภาพหน้าจอช่วยเพิ่มความสม่ำเสมอทางภาพและอ่านได้ดีกว่าที่ขนาด thumbnail ที่ตัวอักษรแต่ละตัวดูเล็กอยู่แล้ว
สิ่งที่เราใช้เป็นค่าเริ่มต้น
Mokbi ตั้งค่าเริ่มต้นเป็น Inter น้ำหนัก 700 สำหรับ text layer ใหม่ Inter ฟรี open source รองรับละติน/Cyrillic/กรีก/เวียดนามและเรนเดอร์สม่ำเสมอทุก browser สำหรับโลแคลที่ไม่ใช่ละตินเครื่องมือแก้ไขจะ fallback เป็นค่าเริ่มต้นของระบบตามโลแคลอัตโนมัติ — ซึ่งเป็นตัวเลือกที่ใช้ได้จริงสำหรับแอปส่วนใหญ่