^ פתיחה למסך מלא ^ ( אבל שמרו את הלינק המקורי WWW.UXFONTS.CO.IL - הפנימי עשוי להשתנות כשנעדכן את הטבלה )
קבלו! רשימה מסודרת של הגופנים הכי טובים לעיצוב UI ואיפיון ווירפריימס. בדקנו את כל אלו עבור אפליקציות שאנחנו מאפיינים ומעצבים וסידרנו ותייקנו - כי גם לנו נמאס לחפש בכל האינטרנט כל פעם מחדש. האופציות השונות מדורגות על פי התדירות בה שקלנו להשתמש בכל גופן, ועל פי קריטריונים נוספים שחשובים לצרכי פרוייקטי UI UX.
צפייה במצב מובייל- שימו לב! בגרסת המובייל- הטבלה אומנם קיימת אבל אנחנו ממש ממליצים לפתוח בדסקטופ, לקבלת טבלה יותר, אהם, טבלאית :)
^ פתיחה למסך מלא ^ ( אבל שמרו את הלינק המקורי WWW.UXFONTS.CO.IL - הפנימי עשוי להשתנות כשנעדכן את הטבלה )
בעולם ה-UI ישנו שימוש מצומצם יותר בסוגי פונטים. אלו הסיווגים החשובים:
Serif
סריף אחד הסיווגים העיקריים של גופנים, הסריפים הם קווים אופקיים קטנים בקצוות העליונים והתחתונים של גופנים. ה״שוונצים״. הסריפי פופולארי בעיקר בטקסטים באתרים ופחות באפליקציות מובייל או ווב, אבל לאחרונה יש עליה בשימוש בפונטים מסוג זה - בעיקר לאפליקציות שקשורות לתוכן וקריאה ארוכה.
נשתמש בפונטים בסיווג סריפים בד״כ כשנרצה לייצג משהו:
פורמלי / ותיק או ישן / חכם / קלאסי / קריאה או כתיבה
Sans Serif
גופני סאנס סריף הם הסיווג הגדול השני של גופנים. הם ״חסרי״ סריפים, בעצם ללא ה״שוואנצים״ שיש לסריפים, ובכללי חסרי עיטור חזותי. הם יותר מודרניים ובשימוש הרבה יותר רחב באמצעים דיגיטליים מאשר אחיהם הסריפים. בעיקר הם בולטים בשימוש בגדלים קטנים, כיוון שהחסרת ה״עיטורים״ מאפשר לאותיות קטנות להיות יותר ברורות וקריאות - מה שמאד נחוץ בממשקים ובטח במכשירי מובייל. ואכן, במכשירי מובייל יש שימוש של 94% נכון ל-2018 בגופני סאנס, לעומת 6% של שימוש בכל סוג אחר, אז זה דיי ללכת ״על בטוח״ בכל מה שקשור למובייל :)
נשתמש בפונטים בסיווג סאנס בד״כ כשנרצה לייצג משהו:
מודרני / פשוט / ״נקי״ / מינמליסטי / קריא באותיות קטנות / עוצב במיוחד לפיקסלים ושימוש במסכים
Slab Serif
סלאב סריפים שייכים כתת זן של הפונט הסריפי, אבל מגיע להם פה אזכור מיוחד. הם בעלי סריף עבה שלא מתכנס לשפיץ - העבה כמעט כעובי משקל הפונט. הסלאבים פופולארים בעיקר בגדלים גדולים ככותרות מודרניות עם מראה ייחודי, אבל יותר קשה לקרוא אותם בפסקאות ארוכות מדי (אבל יש כאלו חדשים שיוצרו למטרה הזו ועובדים לא רע). אבל, וזה אבל חשוב - בד״כ הסרפים העבים האלו מייצרים עומס ויזואלי בטקסט רץ, ולרוב הפסקאות יראו כבדות צפופות ו״שחורות״.
בקיצור, נשתמש בהם כשנרצה:
מודרני + מסוגנן / כותרות / טקסטים קצרים
Monospace
מונוספייס זהו זן של פונט, בו כל תו מגיע בדיוק באותו הרוחב, מה שמייצר ריווחים שקצת מעיקים למעצב הממוצע- אבל לאחרונה הם עושים קצת קאמבק.
נשתמש בפונטים בסיווג מונו בד״כ כשנרצה לשדר:
קוד / כתיבה טכנית / מכונת כתיבה / חשבונאות או עיסוק במספרים / משהו עיתונאי או צבאי
Display
פונט ראווה / דיספליי נועד לכותרות. בדר״כ מאופיין בפרטים שנותנים עדיפות להקניית אופי עיצובי מאשר מאפיינים שמאפשרים קריאות בקטן. דוגמה קלאסית היא קו שנהיה דק מאד באופן ש״נעלם״ או ״נמרח״ בגדלים קטנים. נשתמש בו כשנרצה: כותרות שמתפארות ביופי של הפונט / אופי ותדמית בולטת / שימושי מיתוג ועיצוב שנוטה לויזואליות מוגברת מאשר שימוש UI קלאסי, למשל בעיצוב משחקים.
Hand Writing
פונט שנראה כתוב ידנית. באופן מפתיע מצאנו את עצמנו שוב ושוב צריכים כאלו בשנים האחרונות לשימושים שונים בעולם ה- UI UX:
לכתיבה ״לא רשמית״ מעל משהו - הוראות הפעלה (Coachmarks), הערת ״תכל׳ס״ / פנייה למשתמש בשפה אנושית (בעיקר במוצרי B2C)
טקסטים ל Wireframes - לפעמים נרצה להקנות לווירפריימס עיצוב סקיצתי כדי להגדיר לנו ול״לקוח״ שלנו שזה אך ורק ווירפריימס ולא עיצוב.
Scribble / Greek
פונט ג׳יבריש שעובד יפה עם Low Definition Wireframes. נשתמש בו כשנרצה להוריד פוקוס מהטקסט עצמו לטובת הבנת מבנה הדף בסקיצה, הבנת מודל ניווטי ופלואו בין מסכים. כשנרצה שמשתמשי הווירפריימס לא יתייחסו כלל לטקסט אלא לתבניות ולמשמעות שלהן.
* מתוך קורס PRO UI Fundumentals פנימי בפומיקה 2018 ( C )
באופן מסורתי כל משפחת גופנים יכולה להגיע במשקלים שונים מדק ועד שחור- כשמעצבים למטרת פיתוח חשוב להכיר את האופן שבו הדבר מיוצג בקוד CSS- כמספר אשר מציין את משקל הגופן (100-1000). לפעמים שמות הגופנים מטעים בנקודה הזו, למשל Thin בפונט Assistant מוצמד למספר 200 בעוד שבHeebo הוא מוצמד בשם זהה ל100.
ככל שהגופן יכיל יותר משקלים, כך יותר קל להשתמש באותה המשפחה לצרכים שונים בעיצוב UI. המשקלים השונים מאפשרים גמישות ביצירת קשר בין אלמנטים בגדלים שונים מבלי להעמיס אופטית על העין. בסעיף הזה הדירוג מציין את מספר המשקלים הקיימים בכל משפחה לאותו הסגנון.
המינימום לגמישות הוא 2 משקלים בד״כ Regular + Bold, שהם בד״כ מספיקים לעיצוב ווב אבל ממש לא לעיצוב UI, ללא סיוע של גופנים אחרים. הדירוג הטוב מצריך לפחות 4-5 משקלים ומעלה. שימו לב שיש גם גופנים שיש להם סגנונות נוספים כמו Italic או Condensed והם מדורגים בעמודה נפרדת.
* מתוך קורס PRO UI Fundumentals פנימי בפומיקה 2018 ( C )
מתי להשתמש בפונט הזה? טאגים להמלצותינו:
Body Texts
פונט שעובד טוב בטקסט רץ. לרוב זה אומר כמה דברים:
הוא עובד בגדלים קטנים, מבחינת קריאות ובהירות. בנוסף הוא ״צנוע״- לא בעל אישיות מוגזמת, כזו שמשתלטת על העיצוב ותובעת תשומת לב מהמשתמש. לשימושי UI יתאים לרוב פונט Body גם לכותרות ותוויות קטנות- ויש הרבה כאלה.
טיפ: איך נדע שפונט אכן מיועד ויוצר לשימושי Body? אם בשם הפונט מוזכר השם Text (למשל SF Pro Text), אם יש לפונט משקלי Italic זה בד״כ סימן שייעדו אותו לטקסטים ארוכים.
Title
פונט שעובד טוב בשימוש לכותרות. לרוב זה אומר מספר דברים בהקשר של עיצוב UI: הפונט יעבוד פחות טוב בגדלים קטנים, ומצד שני ייראה טוב בגדלים גדולים יותר. זה אומר שיש בו אלמנטים בעלי אופי מסוים, שנרצה במקומות בהם צריך להפגין ייחודיות. למשל כשרוצים להציג ממשק ממותג, הכותרות הן אפיק שימושי לביטוי ייחודיות- בד״כ באזורי מפתח בפרודאקט או באתר התדמיתי.
עם זאת, יש לשים לב שבשונה מתחום הפרינט, תחום הUI n מורכב מהמון כותרות ו״תוויות״ בגודל קטן. אלו בד״כ יקבלו דווקא פונט שטוב לBody. מה זה אומר? שאם זו כותרת, זה לא אומר שחובה להשתמש ב פונט לכותרות.
הכי טוב? לבחור בפונט שהוא ״סוס עבודה״ שעליו נרחיב בסעיף הבא.
Workhorse
פונט סוס עבודה (נשבעים לכם, ככה קוראים לזה), הוא כזה ש״נותן עבודה״ בכל מה שצריך: טקסט רץ, כותרות, גדול קטן שמן דקיק. אלו פונטים בעלי גמישות גבוהה- המון משקלים, נראים מצוין בקטן כשצריך קריאות, אבל גם בגדול שצריך שיהיה יפה. ספציפית בטבלה הזו תראו כאלו שהם סוסי עבודה לשימוש UI- כי יכול להיות שיש סוסי עבודה לפרינט שפחות מותאמים לשימושי מסך מורכבים. למשל הפונט SF שאפל יצרו לעיצוב הIOS הוא סוס עבודה מצויין ומומלץ - במיוחד לUI.
Coachmarks / Wireframes
פונטים שנועדו לשימושים קצת שונים- הם ידניים ונועדו לעבודה עם ווירפריימים או שימושים אחרים. תוכלו לקרוא עוד עליהם בטאב של ״סוגי פונטים״.
NOTHING
*טאג חדש* פונט שלא טוב לכלום. אז למה הוא פה, אתם שואלים? כי כנראה הוא מפורסם ופופולרי כל כך שהיינו חייבים להכניס אותו רק בשביל להזהיר לגביו.
04 Repeatedly 🔥
03 A Lot 👍
02 Once/Twice ✓
01 Rarely
00 TBD / Unavailable
דירוג על פי סדר מספר הפעמים ששקלנו להשתמש בפונט לפרויקט.
הפרוייקטים שאנחנו עובדים עליהם בפומיקה מאוד מגוונים: המון מערכות מורכבות, אפליקציות מובייל, אתרים תדמיתיים ומיתוג לפרודאקט, אפליקציות לצגי רכב, מציאות מדומה (VR), משחקים, וכולם - גם B2C (אפליקציות לצרכנים) וגם B2B (אפליקציות לצרכנים עסקיים) . זה אומר שהצרכים שלנו גם מאוד מגוונים. פרמטר ה-consideration rating מדרג את הפונטים על פי התדירות שבהם שקלנו להשתמש בפונט לפרוייקט. ככל שהתדירות גבוהה יותר - כך השילוב של התכונות השונות של הפונט הופך אותו לראוי, גמיש, ומתאים לשימושים ארוכי טווח במערכת. השיקולים שלנו כוללים, בין היתר - אסתטיקה, קריאות, גמישות בשימושים שונים במוצר, פי'צרים נרחבים בפונט- ובסופו של דבר גם ספציפיות של שימוש וצורך ספציפי שפשוט חזר על עצמו שוב ושוב.
מתי להשתמש ומתי לא- תיאור חופשי. מתי תכל׳ס משתמשים ומתי לא. המלצות ומידע לסריקה מהירה.
מצאנו את הפונט הזה בשימוש של מותג מסויים. מותג מסויים השתמש בפונט שבחרתם? אז כנראה שיש בו משהו ומישהו דאג לעשות את הסינון הראשוני. בנוסף, אם זה קרה לאחרונה תוכלו לקפוץ אל הברנד ולבדוק איך הוא עובד שם.
חדש! מיפוי של פרודאקטים וברנדים מוכרים והשימוש שלהם בפונטים. סקרנים לדעת איזה פונט בחרו המעצבים של AIRBNB כדי לשדר תיירות וטכנולוגיה? רוצים להבין איך פייסבוק מתמודדים עם היררכיות של מידע וקריאות בפלטפורמות שונות? הרשימה הזאת תחסוך לכם עבודה ותקצר לכם את הדרך לפונטים שנבחנו ונבדקו (ושרדו) במוצרים מצליחים. מכיוון שכל ברנד משתמש בכמה וכמה פונטים תמצאו שם עמודות גם לIOS וגם לאנדרואיד, ווינדוס ומק.
Segoe UI
Roborto
SF Pro
Circular
MacOS Fonts
Open Sans
Brandon Grotesque
Helvetica
MacOS Fonts
Poppins
Rubik
MacOS Fonts
המקומות בהם נמצא הפונטים. ספריות פונטים, ויוצרי פונטים מרכזיים המפתחים פונטים לשימושי ווב ו-UI. הסבר קצר על הספריה או הפאונדרי, מה מייחד אותם, איפה מורידים ואיפה קונים.
עזרים ולינקים בנושאי פונטים. פלאגינים, תוכנות, אתרים. ריכוז של החשובים והטובים.
פומיקה היא סוכנות עיצוב, אפיון ואסטרטגיית פרודאקט ושירותים דיגיטליים מהגדולות בישראל.
אנו מתכננים מעצבים מוצרים חדשניים לווב ולמובייל, עבור יזמים וסטארטאפים פורצי דרך, פרודאקטים בשימוש מליוני משתמשים בכל העולם. בפומיקה עובדים צוותי מאפיינים ואנשי מחקר UX, קופירייטרים, אנשי תוכן, מעצבי UI UX & Interaction, מעצבי מושן, מעצבי מותג, מאיירים ועוד. לפומיקה מערך ייחודי של הכשרת מאפיינים ומעצבים לחוד החנית של היכולות והכישורים היחודיים לתחום חווית המשתמש.
רוצים עוד? יש עוד:
Pumika Labs - UX Resources רוצים עוד עזרים? כנסו לדף העזרים באתר של פומיקה. מדי פעם נשחרר שם דברים טובים.
Crashing UX קבוצת פייסבוק של אמל״ק חווית משתמש (אמל״ק - סיכום תכלסי, ראשי תיבות של ארוך-מדי-לא-קראתי). בואו לקרוא ולשתף בנושאי UX UI, Design Tools & Tech.
בקרו עוד מקומות של פומיקה : בואו לעבוד בפומיקה (מאפיינים ומעצבים) / בקרו באינסטגרם שלנו / עקבו אחרינו בפייסבוק / צור איתנו קשר .
יש לכם תוספת בשבילנו? פונט חדש שחייבים להכניס? יש משהו שלא עובד / שגוי?
תהיו חברים, רשמו לנו למטה. אנחנו גם נעדכן פה כשיש תוספות:
