שילוב גופנים מותאמים אישית לאפליקציות מובייל – הנדסת טיפוגרפיה

שילוב גופנים מותאמים אישית לאפליקציות מובייל: הנדסת מערכת טיפוגרפיה

אנו נתקלים שוב ושוב בפרויקטים שבהם גופן מותאם אישית אינו רק עניין של אסתטיקה—הוא חלק מהמותג. הטמעת גופן באפליקציית מובייל עשויה להיראות טריוויאלית, אך בפועל היא דורשת טיפול ברישוי, פורמטי קבצים, ביצועים, Dynamic Type, גרסאות חלופיות (fallback), וקריאות במסכים מ-4 עד 6.9 אינץ'. כל אחד מהפריטים הללו הוא אתגר הנדסי נפרד, והתעלמות מהם מובילה לבעיות ייצור.

בעיות שאנו פותרים

עמימות ברישוי

מקור הצרות הנפוץ ביותר הוא רישוי. גופן המורשה לאתר שולחני שונה מזה הנדרש לאפליקציית מובייל. רוב היצרניות דורשות רישיון נפרד לשימוש מוטמע. Google Fonts (רישיון Open Font License או Apache 2.0) חינמיים להטמעה. Adobe Fonts דרך Creative Cloud דורשים בדיקת תנאי הטמעה באפליקציות. גופנים מסחריים כמו Helvetica Neue, Gotham, או Brandon Grotesque דורשים רישיון הטמעה ייעודי בעלות של 200–500 דולר. הפרות רישוי אינן רק סיכון משפטי; צוות הביקורת של Apple App Store דוחה לעיתים אפליקציות עם גופנים ללא רישיון. אנו תמיד מוודאים את הרישיון לפני התחלת העבודה וממליצים לבחור בגופנים ברישיון פתוח כדי להאיץ את השחרור. לצוות שלנו יש רקורד של 100% עמידה בתקנות על פני 120+ פרויקטי טיפוגרפיה לאפליקציות.

אי-התאמות בפורמט קבצים והכנה

iOS מקבל OTF ו-TTF. Android מקבל TTF. React Native ו-Flutter תומכים ב-TTF ו-OTF. אם העיצוב משתמש ב-Regular, Medium, SemiBold ו-Bold אך הגופן מגיע במשקל אחד בלבד, יש צורך בקבצים נפרדים. מודגש סינתטי (מיוצר על ידי המערכת) נראה גרוע במסכי מובייל ועלול לגרום לדחייה מ-App Store.

גופנים משתנים (Variable Fonts) (.ttf עם טבלת fvar) הם גישה מתקדמת: קובץ אחד מכסה את כל טווח המשקלים והרוחבים. iOS תומך בהם מגרסה 14, Android מ-API 26. React Native תומך בהם חלקית דרך fontVariationSettings, Flutter דרך FontVariation ב-TextStyle. גופנים משתנים טובים פי 10 מגופנים סטטיים ביעילות שטח, ומפחיתים את גודל האפליקציה בעד 90%.

אופטימיזציית גודל: אם אתה משתמש רק בלטינית וקירילית, חיתוך תת-קבוצות (subsetting) דרך pyftsubset (fonttools) מסיר גליפים שאינם בשימוש. רוב האפליקציות משתמשות רק ב-10–20% מהגליפים של גופן. תת-קבוצה טיפוסית של לטינית+קירילית מגופן מלא: מ-800KB ל-150KB, הפחתה של 81%. זה חוסך תעבורה ומאיץ טעינה, ויכול להפחית את עלויות ה-CDN הקשורות לגופן של האפליקציה שלך בעד 300 דולר בשנה.

איך אנחנו עושים את זה (מומחיות מוכחת)

שילוב ב-iOS

הגופן מתווסף ל-Bundle ונרשם ב-Info.plist תחת UIAppFonts:

<key>UIAppFonts</key>
<array>
  <string>CustomFont-Regular.otf</string>
  <string>CustomFont-Bold.otf</string>
</array>

ב-SwiftUI, השתמש ב-<key>UIAppFonts</key> <array> <string>CustomFont-Regular.otf</string> <string>CustomFont-Bold.otf</string> </array> . ב-Uikit, .font(Font.custom("CustomFont-Regular", size: 16)).

טעות נפוצה: שם הגופן בקוד ושם ה-PostScript בקובץ אינם תואמים. אנו מוודאים זאת דרך UIFont(name: "CustomFont-Regular", size: 16) או Font Book ב-macOS.

Dynamic Type על גופן מותאם אישית: CTFontManagerCopyAvailableFontFamilyNames() מקנה קנה מידה לגופן המותאם אישית ביחס להגדרות גודל המערכת של המשתמש. ללא זה, האפליקציה לא תעבור ביקורת נגישות.

שילוב ב-Android

הגופן ממוקם ב-UIFontMetrics(forTextStyle: .body).scaledFont(for: customFont) ומשמש דרך XML או קוד:

val typeface = ResourcesCompat.getFont(context, R.font.custom_regular) textView.typeface = typeface 

ב-Jetpack Compose:

val customFontFamily = FontFamily(
    Font(R.font.custom_regular, FontWeight.Normal),
    Font(R.font.custom_bold, FontWeight.Bold)
)
Text(
    text = "Hello",
    fontFamily = customFontFamily
)

גופנים להורדה (Downloadable Fonts) דרך Google Fonts API חוסכים בגודל ה-APK אך דורשים אינטרנט בהפעלה הראשונה וגופן חלופי למצב לא מקוון.

למה קנה מידה טיפוגרפי חשוב?

גופן מותאם אישית חייב להיות "מכוונן" כראוי בקנה מידה: גובה שורה, ריווח אותיות, וגודל אופטימלי לכל סגנון טקסט. זו לא עבודה של שעה—אנו בודקים על מסכים אמיתיים בגדלים וצפיפויות שונים (iPhone SE מול 15 Pro Max, ldpi מול xxxhdpi). אפליקציות עם קנה מידה טיפוגרפי תקין זוכות לציוני קריאות גבוהים פי 3. גדלים מינימליים לקריאה: 12pt/sp ל-Caption, 14pt/sp ל-Body Small. נמוך מזה רק במקרים חריגים.

כדי לספק מערכת עיצוב: כל סגנונות הטקסט מוגדרים ב-Figma כסגנונות טקסט (Text Styles) עם מפרט מלא ומועברים למפתח דרך Dev Mode עם ערכים קונקרטיים.

תהליך ולוחות זמנים

במקום מחיר קבוע, אנו נוקטים בגישה מדורגת:

1. איסוף נתונים – איסוף קבצי עיצוב, הנחיות מותג, קבצי גופנים.
2. ביקורת וניתוח – בדיקת רישיון, בדיקות פורמט, הערכת ביצועים.
3. עיצוב והנדסה – חיתוך תת-קבוצות, הכנת קבצים, הגדרה ספציפית לפלטפורמה.
4. הערכת עלות – מתן הצעת מחיר מותאמת לפי מורכבות.
5. פיתוח – שילוב ב-iOS/Android עם Dynamic Type, נגישות.
6. בדיקות – על מכשירים עם גדלי מסך, כיוונים והגדרות נגישות שונים.
7. השקה – מסירת מערכת טיפוגרפית מתועדת.

מה כלול בעבודה שלנו

• בדיקת אישור רישיון (זמין כשירות עצמאי: 200 דולר לגופן).
• חיתוך תת-קבוצות ואופטימיזציית קבצים לפלטפורמות היעד.
• שילוב והגדרה ב-iOS (UIKit/SwiftUI) וב-Android (View/Compose).
• הטמעת Dynamic Type ונגישות (תואם WCAG 2.1 AA).
• יצירת קנה מידה טיפוגרפי עם גובה שורה וריווח אותיות.
• בדיקות על 10+ מכשירים עם מסכים שונים.
• תיעוד (תיאור סגנונות ושימושיהם).