למה ואיך עורכים טיפוגרפיה לאתרי אינטרנט?

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

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

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

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

מה זו טיפוגרפיה לאתרי אינטרנט?

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

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

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

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

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

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

כשאנחנו צופים בגרפיקה על מסך המחשב הכל יכול לְהֵרָאוֹת נפלא, הצבע, הגודל, הצורה וכו'. בעוד שכאשר נדפיס את המוצר (בין אם מדובר במודעה, בספר, עיתון, אריזה וכו') הוא יראה שונה מהותית. הפונטים יהיו גדולים או קטנים מדי, הצבעים דהויים וכו'.

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

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

היא בעצם אחראית על חוויית הגולש. וכיוון שאנחנו מְצוּיִים בדיגיטל, זה בהחלט אומר שאין הזדמנות נוספת, והרושם הראשוני שעשינו על הגולש הוא ההזדמנות היחידה, ולדאבון הלב גם הקצרה ביותר שיש לנו. (פחות מ-3 שניות !)

אז למה לשים לב, ובמה כדאי להתמקד?

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

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

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

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

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

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

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

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

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

ואפשר גם באמצעות שימוש באלמנטים עיצוביים כמו: כפתורי הקריאה לפעולה ( C.T.A), לינקים, שימוש בעוגנים, קוים עדינים ואופציה להגדלת האלמנטים [magnified] ועוד.

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

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

בהצלחה רבה!

ואם יש לך צורך או עניין בעזרה, אפשר כמובן לפנות אלי (: