מה הגודל פונט הנכון לאתר שלי – המדריך המלא

בואו נודה, כיום רובנו מבלים את זמננו במחשבים ובפלאפונים: רוכשים מוצרים, מתעדכנים בחדשות, מקשיבים למוזיקה וגם נחשפים לאתרים ולתכנים חדשים. תכנים שיהיו לא נוחים לעין פשוט יפסלו מיד, בעוד שאתרים המועצבים בצורה הרמונית, שתופסים את העין יכולים לגרום לנו לצלול לשעות של גלישה מהנה וכמעט בלתי-מודעת.

כך גם הלקוחות שלנו מתנהלים דרך המסכים במהלך רוב יומם, וכתוצאה מכך נחשפים בעיקר לעסקים בעלי אתרים מעוצבים שנוח להם לקרוא, דהיינו אתרים רספונסיביים.

אתרים רספונסיביים הם אתרים המותאמים לחוויית המשתמש של הלקוחות, כך שכשהם נחשפים לבית העסק או לאתר שלנו דרך הסמארטפון, הם יכולים ליהנות מחוויית משתמש נעימה ומזמינה שתמיד משאירה טעם של עוד. יאמי!

חלק גדול מעולם הרספונסיביות מתייחס לפונטים של האתר: הגודל שלהם, הוויזואליות והצבעים שלהם. פונטים קטנים, גדולים או שקופים מדי עלולים לפגוע בחוויית הגלישה של הלקוחות, וכתוצאה מכך להניא אותם מלהיחשף לבית העסק ולקנות ממנו.

אז איך אנחנו איך מתאימים את גודל הפונט הנכון לאתר, כך שהלקוחות ייהנו לגלוש בו בנייד ובמחשב במקביל?

התאמת גודל הפונטים לסמארטפון

השאלה הראשונה שחשוב לשאול את עצמנו היא "מהו גודל הפונט שבו כדאי לנו להשתמש בכלל?". אחרי הכול, בעוד שפונט קטן עשוי לייאש את עיני הלקוחות, פונט גדול מדי עשוי להשרות עליהם תחושה של שעמום ואף להאט את מהירות הטעינה של האתר במובייל.

זהו לא מדע מדויק, אך ישנן הנחיות ברורות שיכולות לסייע לנו ללמוד מהו גודל הפונט המתאים עבור האתר שלנו.

 פונטים המתארים גופי טקסט הם לרוב בגודל של px16 נגלה לכם סוד?! פעמים רבות סוג הפונט עצמו פחות חשוב מגודל הפונט. כאשר שומרים על גודל גופן אחיד, הקורא מצליח לקרוא את הטקסט בצורה נוחה ולהפנים את התוכן באופן חיובי.

גודל של px16 הוא גודל ממוצע מצוין כברירת מחדל לטקסטים ארוכים, פסקאות של תוכן, תוויות, תפריטים ורשימות הנוצרות על ידי הלקוחות.
בסופו של דבר, אנו רוצים שגוף הטקסט שלנו ייראה טבעי בפלאפון של הלקוח, וישדר לו שהוא ייהנה לקרוא אותו בדיוק כפי שהיה נהנה לקרוא ספר שמודפס טוב ובעל גופן בגודל קריא.

כיצד נוכל לקבוע גודל קריא בסוגים שונים של תכנים?

• נתחיל מברירת המחדל: גודל של px16 בכל דף באתר שלנו
• נשקול להקטין את הגופן אם בחרנו בפונט שהוא מאוד קריא כמו Arial או אם מדובר בדף מרובה אינטראקציה באתר כלומר, דף שמצריך הרבה פעולות מצד הלקוחות
• נשקול להגדיל את הגופן אם קשה לקרוא את הפונט שלנו או אם מדובר בדף רווי תוכן, המצריך יצירה של כותרות ותת-כותרות במטרה ליצור סדר ולהקל על הקריאה עבור הלקוח

פונטים בדפי מילוי פרטים הם לרוב עומדים לפחות על px16

אם אנו בדיוק בשלב התחלתי והכיפי הזה שבו האתר או האפליקציה שלנו קורמים עור וגידים ואנו עוסקים בעיצוב האתר והאפליקציה כך שיהיו רספונסיבים, חשוב לזכור חוק אחד קריטי: בדפים של מילוי פרטים נשתמש בגודל של לפחות px16.
גדלים קטנים יותר יקשו על הלקוחות להצליח ולקרוא את הפרטים בצורה נוחה, במיוחד אם יש להם iPhone: לקוחות רבים יאלצו להגדיל ולהקטין את המסך בכל פעם בכדי להצליח להבין מה עליהם למלא, מה שיפגע משמעותית בחוויית הגלישה שלהם.

אתרים שבהם התוכן של הטקסטים באתר קטן יותר מתוכן קצר כמו זה של מילוי פרטים עשוי להיראות מצחיק, להקשות על הקוראים ובעקבות זאת למנוע מהלקוחות להשקיע את הזמן ולקרוא. לכן, אם החלטנו לבחור בגודל של px16 או יותר, כדאי לנו לצאת תותחים ולשמור על גודל זה בטקסטים רוויי התוכן של האתר שלנו. בזכות זאת נקל על הקוראים, נעודד אותם להיחשף לכל טקסט עד הסוף וליהנות ממנו ומחווית המשתמש שמוצגת בפניהם.

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

תכנים שוליים או משניים מתייחסים לתוויות, תגיות ואזכורים למיניהם. מדובר בתוכן שבדרך כלל חשוב שנוסיף לאתר למטרות קידום, עניין וקרדיט.
בטקסטים משניים מומלץ לבחור בגודל פונט יחסית קטן, שנע בין px13 ל- px14. חשוב לרדת לפחות בשתי רמות של גודל, כך שהקורא לא יתבלבל בין תכנים של גוף טקסט לתכנים משניים.
בנוסף, מאחר ומדובר בתוכן שולי שלא מעניין את הלקוח בכל מקרה, מומלץ לנסות ולהפוך אותו לשקוף יותר על ידי צביעה שלו בגוון אפור בהיר או גוון שיחסית דוהה ביחס לצבעי האתר. כאשר אנו שומרים על ויזואליות ברמה של 70% לעומת גופי טקסט, אנו בדרך הנכונה.

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

כמובן שהדרך הטובה ביותר לדעת שאנו בדרך הנכונה היא לפתוח את הסמארטפון שלנו, של המשפחה ושל החברים שלנו ולגלוש לאתר. האם אהבנו את מה שראינו?
הדבר החשוב ביותר שאנו יכולים לעשות הוא תמיד לבחון כיצד הפונט נראה בכמה שיותר סמארטפונים, מאחר והתחושה שאתר משדר ממסך המחשב שונה שמיים וארץ מזו שאתר משדר ממסך המובייל.

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

אפשרות נוספת היא להשתמש באפליקציות כמו Sketch Mirror או Figma Mirror כדי לראות כיצד הפונטים שבחרנו מופיעים בסמארטפונים. לא משנה מה נבחר, הכי חשוב שבאמת נקדיש את הזמן ונוודא שהטקסטים אכן נעימים לעין גם בפלאפון. הלקוחות יודו לנו מקרב לב.

נכיר מקרוב את ההנחיות והסטנדרטים של Android ו- IOS

כשאנחנו יודעים מהן ההעדפות של החברות הטכנולוגיות הגדולות ביותר בעולם, נוצר בראש מעין ממוצע המאפשר לנו להבין מהם גדלי הפונטים הנפוצים ביותר, ולהגיע להחלטה הנכונה ביותר באשר לסוג ולגודל הגופן שלנו.
בעוד ש- Android היא המערכת המייצגת את העדפות הגודל והעיצוב של חברת Google על מסכי הסמארטפון, IOS מייצגת את ההעדפות של חברת Apple.

• Material Design – לפי ההנחיות של Google, ברירת המחדל של Android היא גודל גופן של px16 לגופי טקסט ו- px14 לטקסטים משניים.
• לפי ההנחיות של Apple, ברירת המחדל של IOS היא גודל פונט של px17 לגופי טקסט ו- px15 לטקסטים משניים.

שתי החברות גם בחרו סוגים שני שונים של פונטים: בעוד ש- Android ייצרה את הפונט Robota, סוג הגופן במערכת IOS הוא SF Pro.

כדאי לנו להשתמש בבחירות של חברות הענק הללו כבסיס להשוואה. אנחנו לא חייבים לבחור בגדלים ובפונטים שלהם, אך בהחלט כדאי לנו להישאר באותו האזור. אחרי הכול, הם הגיעו לפסגה משום שהצליחו לטפס אליה וגם לשמור על מקומם בראש הצמרת מאז ועד היום. ממש במקרה, זוהי גם בדיוק המטרה שלנו, ואין חכם יותר מללמוד מאנשים שכבר הצליחו להגשים אותה בעבר.

התאמת גודל הפונטים למחשב
אוקיי, אז ביססנו טוב-טוב כיצד כדאי לנו להתייחס לפונטים במובייל, אבל מה קורה כשאנחנו חוזרים למחשב האהוב והמהימן? איך נבחר את גודל הגופן הנכון ביותר למחשב?
האמת? פשוט להצליח ולמצוא את הפונט המושלם לאתר במחשב. כל שיש לעשות הוא להבין כי עיצובים של דפים במחשב מתחלקים לשתי קטגוריות עיקריות:

• דפים רוויי טקסט – דפים באתר המכילים מאמרים, מדריכים, חדשות וכדומה. ת'כלס? דפים ממש כמו הדף הזה. דפים באתר מסוג זה הם בעלי מטרה אחת מאוד ברורה – שהלקוחות יקראו את התוכן שרשום בהם. אין בדפים הללו הרבה אינטראקציות או פעולות, חוץ מתגובות או לחיצות על לינקים.
• דפים רוויי אינטראקציה – דפים באתר המכילים הרבה מאוד כפתורים שהלקוחות יכולים ללחוץ עליהם וליצור עמם אינטראקציה: לחפש מוצרים ותכנים, ליצור מידע ולערוך אותו וכדומה. כמובן שהדפים הראשונים שקופצים לראש הם של פייסבוק ואינסטגרם. דפים מסוג זה אולי יכילו כמות מסוימת של תוכן, אך היא תהיה הרבה פחות סיפורית, ובדרך כלל תסביר כיצד ליצור אינטראקציה בדף בצורה הטובה ביותר או תנסה למשוך את הלקוחות לגלות דפים נוספים.

כעת נעבור על ההנחיות עבור כל אחד מסוגי הדפים הללו. חשוב לעמוד על השוני בין כל דף ודף באתר שלנו ולהתאים את ההנחיות הנכונות לכל אחד מהם. לדוגמא, דפי "אודות" נחשבים גם הם לדפים רוויי טקסט, בעוד שדפי "צור קשר" נחשבים לדפים רוויי אינטראקציה.

דפים רוויי טקסט

דפים רוויי טקסט = גדלי פונט גדולים.

כן, זו הסכימה הכי קלה שנזכור בחיים שלנו. הגיע הזמן להפסיק לפחד מהגודל חברים, כי באופן לא מפתיע גם כאן הוא קובע. אם אנחנו רוצים שהלקוחות יצליחו לקרוא טקסטים ארוכים ומושקעים בכיף, חשוב שנספק להם את היכולת לעשות זאת, וטקסטים בעלי פונט גדול עושים את העבודה הזו ועושים אותה טוב.

בואו נהיה נחמדים ולא נאמץ ללקוחות את העיניים. במקום, נבחר עבורם את הגודל הנכון ביותר והנעים ביותר לעין. אז מהו הגודל הנכון?

• px16 – הגודל המינימלי לדפים רוויי טקסט.
• px18 – גודל שיחסית נוח להתחיל אתו בדפים רוויי טקסט. חשוב לזכור שלא מדובר כאן במסמך אחד, אלא בעולם של תוכן שאנחנו רוצים לפתות את הלקוחות לשוב ולהיחשף אליו שוב ושוב. נוחות הקריאה משפיעה מאוד על ההחלטה של הלקוח לשוב ולקרוא, לכן חשוב לוודא כי הגודל אינו קטן מדי לאתר שלנו ולשקול גם גדלים גדולים יותר.
• 20Px+ – תמיד כדאי לנסות ולהגדיל את הפונט לאורך הזמן, גם אם זה מרגיש מביך ולא נעים לעין בהתחלה. אם נאפשר לעין להתרגל, פעמים רבות נגלה שלפתע התוכן הוא הרבה יותר קריא, נעים לעין ואפילו מקל עליה.
  חשוב לקחת בחשבון שאתרים שעיקר הדפים בהם הם רוויי תוכן לרוב שומרים על גודל פונט של px21 בממוצע ולכן, אם הם משתמשים בגדלים כאלו ומצליחים, כדאי לנו ללמוד מהם הגדלים הללו ולשקול לשלב גם אותם באתר שלנו.

כאמור, ההמלצה הטובה ביותר היא לוודא כשאנחנו והלקוחות צופים בדף באתר, אנו מרגישים כאילו אנו קוראים ספר טוב ונוח לקריאה.

כדאי לנו לקחת ספר שאנחנו אוהבים ולהשוות את יכולת הקריאה שלנו ממרחק בינו ובין האתר במחשב שלנו. האם הצלחנו לקרוא היטב מאותם מרחקים? אולי כדאי לנסות להגדיל/להקטין את הפונט קצת שיהיה נוח יותר? אנחנו נשים לב שתיק-תק אנחנו כבר הולכים בכיוון הנכון ועושים את זה חכם.

דפים רוויי אינטראקציה לעומת דפים רוויי תוכן, דפים רוויי אינטראקציה דווקא מכילים טקסט בגודל קטן יותר. האמת? אם הדפים שלנו מכילים יחסית הרבה מידע, יתכן שאפילו גודל גופן של px18 ייתפס כגדול מדי ולא נוח.
כדאי לנו לקחת דוגמא מפלטפורמת המייל שלנו, מהרשתות החברתיות שלנו ומכל אפליקציה או אתר שבדרך-כלל מבקשים מאיתנו "לסרוק" את התוכן שאנו קוראים, לא לקרוא אותו.
לעומת אפליקציות רוויות תוכן שלרוב מציגות תכנים בגודל של px18 בממוצע, הנורמה של דפים רוויי אינטראקציה דווקא עומדת על בין px14 ל- px16 בממוצע.

ועם זאת, רוב הפעמים לא נבחר בגודל פונט אחיד. הסיכויים גבוהים שנשלב בדפים מסוג זה עד ל- 4 גדלים של פונטים שהולכים וקטנים, ככל שהמידע הכתוב הוא פחות ופחות חשוב או רלוונטי. התוצאה הסופית אמורה לשקף דף שבו כל הגדלים והתכנים משתלבים בצורה יפה וקוהרנטית.

כפי שאנו רואים, כל הגדלים משתלבים יפה יחד בלוח השנה. חשוב לשים לב לשינוי בגדלים: הוא אינו נקבע לפי היררכיית המיקומים של התכנים בטקסט כלומר, לא הולך וקטן מלמעלה למטה, אלא נקבע בהתאם להיררכיית הצרכים של הלקוחות; כאשר הפונט קטן יותר ויותר ככל שהמידע הוא שולי יותר ובהתאם לקורלציה שלו עם יתר התכנים בדף.

ננתח את לוח השנה של Google מכל כיוון הרבה מגדלי הפונטים ש- Google בחרה ללוח השנה שלה אינם מצויים בהנחיות שלהם, אך נבחרו בקפידה לאחר מחשבה רבה והתחשבות מעמיקה בחוויית המשתמש של הלקוחות.
לדוגמא, שמות האירועים הם בגודל פונט של px12, מה שלא מתאים להנחיות של Android כלל. ועם זאת, בהתחשב בעובדה שיש לדחוס בכל מסך של לוח שנה כ- 7 טורים של ימים, ובהם אינספור משימות המחולקות לפי שעות במסך בגודל של px1440 – מדובר בגודל הפונט המושלם, וניכר כי הושקעה בבחירה שלו מחשבה רבה.

גודל קטן יותר פוגע באיכות הראייה עבור הגולשים, בעוד שגודל גדול מדי עשוי לחצות חלק מהמידע של כל אירוע לעיתים תכופות מדי, ובעקבות זאת לאלץ את הגולש לעבור תהליך מייגע ולהיכנס לכל אירוע מחדש כדי להיזכר במה מדובר.

מה המסקנה מכל זה? שעיצוב הוא תהליך של מחשבה ופשרה, חברים: אם איננו יודעים מהי הפשרה שלנו, אנחנו ככל הנראה עושים משהו לא בסדר.

Google הבינו שאם יבחרו להטמיע את ההנחיות הרגילות שלהם בדף לוח השנה שלהם, ללקוחות לא יהיה נוח להשתמש בו והוא לא יזכה לאהדה. המחשבה היצירתית והפשרות שהביאו אותם לבחור את גודל הגופן הנוכחי, הם אלו שעלינו לסגל כדי להצליח ולהגיע לרמה שלהם.

דוגמא נוספת היא גודל הפונט של שעות היום והלילה בלוח השנה של Google/Android (12:00 בצהריים, 13:00 בצהריים…). הגודל יחסית קטן ועומד על 12px בלבד.

אם נציץ בהנחיות של Material Design, נשים לב די מהר שגודל הגופן הזה אינו מופיע בהן. ועם זאת, המרווח האופקי הופך את גודל הגופן הספציפי הזה למדויק. אחרי הכול, כל אירוע מתויג בהתאם לשעת ההתחלה שלו, לכן אפילו עולה השאלה למה לא? למה לא להפוך את הפונט לקטן יותר, כדי לאפשר ללקוח ליהנות מהתמונה הגדולה ולהתנהל בדף בכיף?

בניגוד לשמות האירועים ולשעות היום, דווקא התאריכים עצמם מקבלים גודל פונט של כבוד, העומד על 26px. שוב, גם גודל הגופן הזה לא יימצא בהנחיות העיצוב של Google.

ועם זאת, אי אפשר להתכחש לעובדה שהתאריכים של לוח השנה הם הפריט החשוב ביותר בדף, וכי רוב האנשים מתחילים את האינטראקציה שלהם עם הדף הזה כשהם מחפשים אחר התאריך הנכון ליצירת אירוע או תזכורת.

חשוב שנזכור! הלקוחות שלנו לא מתאכזבים כי גודל של פונט הוא גדול מדי או קטן מדי, אלא משום שהם לא מצליחים למצוא את מה שהם רוצים כי הפונט קטן מדי ואז הם הולכים לאיבוד באתר. לכן, כמו Google, חשוב לקחת את ההנחיות המומלצות לגדלי גופן בחשבון, אך בו-בזמן להיות יצירתיים, להסתכל על התמונה הגדולה, להתחשב בחוויית המשתמש ולהגיע לגודל פונט שנוח, נעים לעין ומשרת את הצרכים של הלקוחות בראש ובראשונה.

דף שבו ללקוחות יהיה נוח להתמצא ולהגיע ליעדם, הוא דף שאנחנו יכולים להיות בטוחים כי עיצבנו נכון ובחרנו בו גדלים טובים. אם כבר יש לנו דפים שזוכים להרבה התייחסות מצד הלקוחות, כדאי לנו לבחון אותם מקרוב יותר ולגלות מה בדיוק מושך אותם להשתמש דווקא בו, וכיצד נוכל לגרום ליתר הדפים באתר שלנו להוות מוקדי משיכה דומים.

נשתמש בכמה שפחות גדלי פונטים ההמלצה הרווחת היא להשתמש ב- 4 גדלים של פונטים בכל דף לכל היותר, גם כאשר מדובר בדף אינטראקציה רווי תוכן. כשאנו משתמשים ביותר גדלים של פונטים, אנו מסנוורים את הקורא ומקשים עליו להבין מה אנחנו רוצים ממנו. חשוב למקד את הלקוח במה שבאמת חשוב, ולסייע לו להבחין בקלות בין העיקר לתפל בכל דף גם כשהוא ב"מצב סריקה".

4 הגדלים מתחלקים ל- 4 קטגוריות

• גודל פונט לכותרות – זהו גודל הגופן הגדול ביותר בכל דף. נשתמש בו ליצירת כותרות ראשיות ותת-כותרות. אם אנו משתמשים בכותרות ובתת-כותרות לעיתים קרובות, כדאי לנו לבחור גודל פונט שונה לכל אחת מהן, כדי למנוע בלבול ולעשות סדר לקורא.
• גודל פונט כברירת מחדל – הפונט הזה יהיה לגודל הפונט הנפוץ ביותר באתר שלנו. הרבה מעצבים ובעלי עסקים טועים ובוחרים אינספור גדלים שונים של פונטים למרכיבים שונים באתר, כאשר דווקא מומלץ לאגד את כולם תחת גודל פונט אחיד, שמעניק לכל דף באתר מראה הרמוני ומזמין, שפשוט להבין ונוח להתנהל בו. כדי לשמור על האחידות הזו, נשתמש בגודל ברירת המחדל ואך ורק בו לגופי טקסט ולדפים בעלי גופי טקסט ארוכים, לכפתורים, תפריטים וכל סוג של תוכן שהוא בעל חזרתיות מסוימת באתר שלנו.
• גודל פונט לטקסטים משניים – גודל הפונט הזה לרוב יהיה קטן בשתי מידות, לעומת גודל ברירת המחדל שלנו. מטרתו להגדיר כי התוכן בגודל זה הוא פחות חשוב או רלוונטי: תגיות, אזכורים, הוראות פשוטות, מידע סטטיסטי וכדומה, כולם בדרך-כלל עונים לקטגוריה הזו.
• גודל פונט לתכנים נוספים – עיצובים רבים מצריכים גודל פונט רביעי לסוג נוסף של תכנים שהם פחות רלוונטיים, אך חשוב שייקחו חלק בדף האתר. כשבוחרים סוג פונט רביעי, מומלץ שיהיה עקבי וקטן בשתי מידות בממוצע מהגודל שבחרנו לטקסטים המשניים. טקסים מסוג זה אף אפשר לטשטש מעט על ידי בחירה של צבע ש"מסווה" את התוכן בתוך הדף.

בין אם נבחר להשתמש ב- 3 גדלי פונטים או 4, אין זה משנה. מה שבאמת חשוב שהוא שנדאג לקורלציה ברורה בין הגדלים, כך שכל עין תוכל לתפוס את מהות הטקסט בקלות וליהנות מחוויית קריאה נוחה.

מקווים שמכל המידע הזה תוכלו להפיק את הידע הנחוץ בבחירת פונט לאתר שלכם

במידה והסתבכתם – זה הזמן לפנות למקצוענים 🙂

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

בחירת הפונט הנכון לאתר שלכם היא החלטה חשובה המשפיעה רבות על המראה, התחושה והחוויה הכללית של הגולשים. פונט לא נכון עלול להרתיע גולשים ולפגוע ברושם הראשוני, בעוד שפונט נכון יכול לחזק את המיתוג שלכם, לשפר את חווית המשתמש ולהוביל ליותר המרות.

WebtheNet מציעה שירותי עיצוב אתרים מקצועיים, הכוללים בחירת פונטים מותאמים אישית לאתר שלכם. צוות המעצבים המנוסים שלנו יעבוד איתכם מקרוב כדי להבין את הצרכים שלכם ואת קהל היעד שלכם, ויבחר עבורכם פונטים שיתאימו בצורה מושלמת לאופי האתר, לתכנים ולמסרים שאתם רוצים להעביר.

אל תתפשרו על פחות מהטוב ביותר! צרו קשר עוד היום עם WebtheNet ותקבלו ייעוץ מקצועי ללא התחייבות בנוגע לבחירת הפונטים לאתר שלכם.

WebtheNet – כי גם הפרטים הקטנים עושים את כל ההבדל.