באיזה פונטים מומלץ להשתמש באתר אינטרנט?

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

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

הפונטים הם רכיבים גרפיים עם חשיבות פסיכולוגית וריגשית עלינו.

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

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

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

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

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

אני בטוחה שלא. לי זה גורם אי נוחות.

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

לרושם הראשוני אין הזדמנות שניה

גם בעולם הפיזי אנחנו מתנהלים ומתנהגים בהתאם להתרשמות הראשונית שלנו מאנשים. הרושם הראשוני מעורר אצלנו רגשות [חיוביים או שליליים כלפי אדם מסויים] וגורם לנו להתנהג באופן שונה לאדם העומד מולנו.

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

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

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

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

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

יש אחרים שאין להם מושג. הם מתפלאים ולא מבינים מה ההבדל בין פונט מסוג אלמוני [Almoni[ לפונט מסוג אסיסטנט [[Assistant] ולמה בכלל צריך להתעכב על בחירת הפונט לאתר.

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

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

חשוב לזכור שאתר. כל אתר. מורכב בסופו של דבר, בממוצע, מ-60 – 70 אחוז טקסט. פָּלֶטַת הפונטים בה נעשה שימוש תכיל לא יותר משני סוגי פונט באתר. עדיף כמובן לבחור רק פונט מסוג אחד, אבל ... מותר שניים. לא יותר.

למה רק שניים לכל היותר?

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

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

אתר הוא הבבואה של העסק שלנו ברשת.

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

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

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

הגופן לא רק חורץ [לטוב ולרע] את הַנִּרְאוּת של האתר שלנו. הוא מייצר ומעצב חוויה ריגשית. וככזה הוא משפיע על השהות של הגולשים באתר שלנו, ועל פעילותם בו.

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

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

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

כדאי בשלב הראשון לעבור על פָּלֶטַת הפונטים הקיימת במערכת ולבדוק לאילו מהפונטים יש מעבר למשקל הרגיל גם משקל כבד [Bold] וקל {Light], גופנים בעלי "סגולות" אלה הם על-פי רב גופנים נהדרים. [נכון שתמיד נוכל לעצב את הגופן ב-Bold, אבל עדיף שהתכונה הזו הוטמעה במערכת ה-D.N.A.שלו מרגע היווצרו]. אחרי שמצאנו 3 – 4 פונטים מהסוג הזה, כדאי לבדוק כיצד הם נראים על המסך. מה הגודל ההגיוני שכדאי שנשתמש בו. ולא פחות חשוב הגוון.

הגודל כן קובע

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

אותיות קטנות מדי או גדולות מדי מכבידות על הקריאה.

למשל, כותרת עבה וגדולה במיוחד [100 – 80 פיקסל] מתאימה אולי ללוח המודעות הניצב במרכזה של עיר, אבל היא בהחלט לא מתאימה לאתר, שהוא בתכליתו מעין מִנְשָׁר - אגרת אישית אינדבידואלית.

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

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

כאשר משתמשים בגופן מסוג Almoni או Assistant בעיצוב הדסקטופ רצוי להסתפק בכותרות בגודל של 20 – 35 פיקסל ובפסקאות בגודל של 16 – 20 פיקסל.

בעיצוב שאנו עושים למובייל כדאי מאד להשתמש בפונטים tkv בגדלים של 15 – 18 פיקסל, הניתנים להגדלה.

לאוורר את הטקסט

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

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

שׂוּמָה עלינו להקפיד על ריווח נכון בין האותיות, המילים, המשפטים והפסקאות. להפריד כותרות ראשיות וכותרות משניות, להוסיף פסיק ונקודה במקומות הנכונים. [אגב – על סימן קריאה אפשר בהחלט לוותר. במיוחד כשהוא מופיע יותר מפעם אחת בפיסקה]. אם חשוב לנו להדגיש מילה, עדיף להדגיש אותה בבולד. ובשום אופן לא נדגיש אותה בצבע שונה.

[הפעמים היחידות בהן "נצבע" פונטים, יעשה רק במילים / משפטים קליקביליים].

אז .... באיזה פונטים מומלץ להשתמש באתר אינטרנט?

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

• מה השפה המדוברת באתר שלנו?

• האם הגופן קריא [כלומר – נח לקריאה ללא מאמץ?].

• האם הוא "מדבר" ומתכתב עם השפה העיצובית שלנו?

• האם הוא נגיש לבעלי מוגבלויות?

הדבר הראשון אליו נתייחס הוא שפת האתר.

האם האתר ישראלי ופונה לדוברי עברית? או שאולי מדובר באתר דו או תלת או רב לשוני?

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

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

[תמונת התפריט הדו-לשוני השגוי לקוחה מאחד האתרים ברשת, לצורך הדגמה איך לא מקימים אתר דו לשוני].

לא כל הפונטים "דוברי שפות". יש לא מעט פונטים [למעשה – רובם הגדול והמכריע] שאינם טובים [בלשון המעטה] לכתיבה בעברית ובה בעת בשפה זרה נוספת.

כדי לדעת אילו פונטים מתאימים לשפות השונות – צריך כמובן לנסות את הפונטים.

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

בעיני אגב – לטוב...

למה זה טוב בעיני?

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

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

בעברית יש מספר מצומצם של פונטים בהם נוכל להשתמש באתר שלנו –: Almoni, או Assistant, או Alef, או Helvetica. ואולי עוד אחד או שניים שזרחו מפרחוני כרגע.

אגב, מניסיון שלי פונט Almoni נהדר לשימוש באתרים רב שפתיים, העושים שימוש בעברית, אנגלית, ספרדית ו/או צרפתית ןפונטים מסוג Helvetica טובים לשימוש בשפה האנגלית.

האם הגופן קריא?

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

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

פונטים בסגנון "כתב יד" מסוג Gulash או Adler ו-Galit ודומיהם ישמשו אותנו לכל היותר לחתימה, אבל לא נעשה בהם שימוש בפיסקאות או בכותרות, כיוון שהם מאד לא קריאים. [כנ"ל לגבי פונטים בסגנון "כתב יד" בשלל שפות אחרות].

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

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

אם יש לנו עסק "רציני", "מכופתר" ו"מעונב" – משרד רציני, מרפאה, קליניקה טיפולית [למשל – משרד עו"ד, רו"ח, פסיכולוגים, רופאים, הסטוריונים, סופרים וכד'] אנחנו בוודאי לא נשתמש בגופנים מצועצעים. אלא בגופנים סולידיים, נעימים לקריאה, מסוגננים, קלאסיים, ועל פי רב - רכים. כאלה שיתרמו לזרימה נעימה וטובה של הקריאה ע"י הגולשים.

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

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

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

כדאי לבדוק במה עוסק האתר. מה המטרות שלו?

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

איזה מין אנשים אנחנו?

האם אנחנו אנשים רציניים? יש לנו חוש הומור? אנחנו אוהבים לכתוב? מה הסגנון שלנו?

מי הקהל שלנו?

האם הגולשים והלקוחות הפוטנציאלים שלנו מבינים צחוקים ודאחקות? האם הומור עובר אצלם? האם הם אוהבים לקרוא?

בני כמה הם?

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

האם הקהל שלנו מורכב מאנשים צעירים [כאלה שראייתם חדה ויוכלו להתמודד עם טקסט חיוור או זעיר?], או שאנחנו פונים לאזרחים ותיקים, שראייתם נחלשה והם זקוקים לפונטים ברורים וחדים?

וגם ... האם הקהל שלנו חרדי? יליד הארץ? האם הקהל שלנו אוהב לקרוא? ועוד ועוד

יש משמעות עמוקה לכל אחד מהמאפיינים.

האם לגופן יש השפעה על ה-SEO באתר שלנו?

כן. לגמרי!

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

[הצילום אגב לקוח מאחד האתרים ברשת, מחקתי ממנה את המילים ש"מסגירות" את בעליה].

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

צילום מסך מתוך אתר - טקסט לא קריא

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

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

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

ולכן יש משמעות לאוורור של גושי טקסט גדולים. חלוקה למקטעים. לפסקאות. לכותרות ראשיות ולכותרות משנה. [ואם אפשר אז גם גיוון - "שיבוץ" תמונות ואיורים].

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

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

בעברית אני ממליצה מאד על פונטים מסוג: Almoni, או Heebo' או Assistant, וגם על Alef.ו- Helvetica. [ועוד כמה שזרחו מפירחוני...] הפונטים האלה מצויינים גם לכתיבה באנגלית.

הגוון של הפונטים וצבע הרקע

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

כותרת – אדומה, פסקה - ירוקה, מילים מודגשות בבולד ובסגול. משיכות צבע צהובות. וכו'...

אז ... לא !! ממש ממש ממש לא!!

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

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

כך גם פונטים בגוון אפור פחמי או אפור בהיר על רקע לבן או בהיר.

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

טקסטים על גבי תמונות:

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

הטקסט חייב לקבל מרחב משל עצמו על רקע חלק בגוון בהיר. רצוי צח ולבן.

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

גם בצילום מסך זה טושטשו פרטי העסק

ולסיום:

ענקית הרשת גוגל מאפשרת לנו שימוש ובחירה חינמיים של פונטים במגוון שפות מתוך גוגל פונט

את איכות הנגישות של הטקסט (עד כמה הוא קריא) ניתן לבדוק חינם באמצעות אתר Juucy Stud

בהצלחה