App Store locales में काम करने वाले स्क्रीनशॉट fonts
App Store screenshots पर font choice में तीन constraints होती हैं जो ज़्यादातर general typography decisions में नहीं होतीं: thumbnail legibility, App Store renderer behavior, और 50-locale script coverage। कोई ऐसा font चुनें जो तीनों में से किसी में fail हो और आपका कैरोसेल उतना convert नहीं करेगा जितना कर सकता था।
Thumbnail legibility test
App Store search results screenshots को roughly 200-260 px wide पर दिखाते हैं — original 1320 × 2868 का लगभग 1/6। आपके design में 100 px tall कैप्शन text thumbnail में ~15 px पर render होती है। उस size पर, fine-stroke fonts (Helvetica Light, Avenir Next Ultra-Light, Playfair Display Thin) अस्पष्ट धब्बे बन जाते हैं।
Thumbnail size पर जो fonts टिकते हैं उनमें कुछ traits common हैं:
- Wide x-height (caps की तुलना में ऊँचे lowercase letters)
- Heavy weight (700-900)
- Open apertures ('c', 'e', 'a' जैसे letters में negative space छोटे sizes पर भी open रहता है)
- Consistent stroke width (thin-to-thick contrast नहीं)
Latin-script locales के लिए काम करने वाले fonts
App Store carousel use में tested और consistent:
- Inter (free, open source) — हमारा default। Inter Bold और Inter Black हर size पर अच्छे render होते हैं। Latin, Cyrillic, Greek, Vietnamese out of the box cover करते हैं। 2025-2026 indie ecosystem में सबसे आम app-screenshot font।
- SF Pro (Apple system) — Apple का अपना typeface। Apple के font license के अनुसार iOS apps की marketing में free use। हर iOS device पर identically render होता है। Inter से थोड़ा ज़्यादा "Apple-default" feeling — brand के हिसाब से feature या bug।
- Söhne (paid, Klim Type Foundry) — OpenAI/Anthropic era का darling। Linear, OpenAI, Vercel use करते हैं। बहुत weights हैं। Expensive license।
- GT America (paid, Grilli Type) — geometric sans, बहुत weights, marketing में अच्छा ship होता है। Notion, Stripe और दूसरे use करते हैं।
- Geist (free, Vercel) — recent open-source release। Thumbnail sizes पर बढ़िया दिखता है। Limited Cyrillic/Greek support।
- Roboto / Roboto Flex (Google, free) — Android-default। iOS carousels पर कम आम लेकिन ठीक पढ़ता है।
जो fonts काम नहीं करते
- Thin / Ultra-Light weights। Weight 400 से नीचे thumbnail size पर मैला हो जाता है। हमेशा 600+; primary कैप्शन के लिए 700+ चुनें।
- High stroke contrast वाले Display fonts। Didone serifs (Bodoni, Didot), condensed display (Bebas, League Spartan Bold Variable) definition खो देते हैं।
- Script / handwriting fonts। Thumbnail पर कभी legible नहीं। Skip करें।
- Comic Sans, Papyrus। हाँ, कोई अभी भी try करता है। मत करें।
Non-Latin scripts
ज़्यादातर marketing fonts में Arabic, Hebrew, Hindi (Devanagari), Thai या CJK glyphs नहीं होते। जब आप उन locales में translated कैरोसेल ship करते हैं, तो font system default पर fall back होती है। दो reasonable answers:
- Per locale system fallback accept करें। Non-Latin markets के users system-default fonts के आदी हैं और notice नहीं करते। जो brand consistency आप खोते हैं वह font-loading complexity के worth नहीं जो आप gain करते हैं।
- Multi-script fonts के साथ pair करें। Noto family (Noto Sans, Noto Serif) virtually हर script cover करती है जो Apple support करता है। Latin के लिए Inter को Noto Sans Arabic, Noto Sans Hebrew, Noto Sans Devanagari, Noto Sans Thai और Noto Sans CJK के साथ pair करने से locales में visual weight consistent रहता है।
App Store screenshot work के लिए system-fallback approach आमतौर पर pragmatic है। Noto approach उन apps के लिए सही जवाब है जहाँ markets में brand consistency बहुत ज़्यादा matter करती है (luxury, fashion, design tools)।
faux-bold और faux-italic
दोनों से बचें। ज़्यादातर design tools bold या italic "synthesize" करते हैं जब actual weight available नहीं होता — result small sizes पर टूटा हुआ दिखता है और CJK और Arabic में खासतौर पर बुरा render होता है। Font का actual weight या italic variant use करें, synthesized version नहीं।
Practical test: अगर आपके font picker में सिर्फ "Regular" है और आप "B" button से bold apply कर रहे हैं, तो faux-bold मिल रही है। ऐसे font पर switch करें जिसमें real Bold weight available हो।
Headlines के लिए letter-spacing
ज़्यादातर marketing fonts body text में ठीक दिखने वाली letter-spacing के साथ default होते हैं लेकिन heading sizes पर थोड़ी loose। Screenshots में headline text के लिए -2% से -4% (tracking) tight करें। यह visual rhythm tight करता है और thumbnail size पर बेहतर पढ़ता है जहाँ individual letters पहले से छोटे लगते हैं।
हम default में क्या ship करते हैं
Mokbi नई text layers के लिए Inter weight 700 default करता है। Inter free, open source है, Latin/Cyrillic/Greek/Vietnamese cover करता है, और browsers में consistently render होता है। Non-Latin locales के लिए एडिटर automatically per locale system default पर fall back होता है — जो ज़्यादातर apps के लिए pragmatic choice है।