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

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

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

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

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

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

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

בעזרת הכלי WebFonter, שניתי את הפונט באתר סנטוריון מהפונטים המהודרים שהיו לו, לפונט משועשע בשם Comic Crazy. הנה התוצאה:

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

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

"נקיון פסח" לטיפוגרפיה באתר

1. בדיקה שאין שורות טקסט ארוכות מדי

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

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

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

בדיקת החמץ: עברו על כל עמודי האתר ובדקו שאורך השורה לא עולה על 12-15 מלים.

2. "מרווחים כמו במצה" – בדיקה שהשורות לא צפופות מדי

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

גובה שורה, באנגלית Leading, או line-height, מציין את המרחק בין כל שורת טקסט.

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

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

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

3. "כתוב שחור על גבי לבן" – בדיקת הצבעים באתר

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

אז הנה כמה כללים שתוכלו להיעזר בהם בעת הכנת האתר לפסח:

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

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

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

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

4. "לעזור ליתומים בפסח" – תיקון מילה יתומה באתר

מילה יתומה קורית כשבסוף הפיסקה בשורה האחרונה מופיעה רק מילה אחת. ל-HTML יש דרך לפתור את זה, באמצעות השימוש בתו " ". התו המיוחד הזה, שמורכב מראשי תיבות של Non Break Space, פועל באופן דומה לתו הרווח, רק שהוא לא מאפשר למילה שבאה אחריו לרדת שורה. כך במקום שהמילה האחרונה תופיעה בשורה נפרדת, הוא מוצמדת למילה שלפניה.

אפשר להשתמש בפונקציה אוטומטית  של jQuery שתמנע אפשרות שתהיה מילה יתומה.

אופציה אחרת היא להשתמש בתוסף טיפוגרפיה לוורדפרס.

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

5. "ביעור אריאל" – לבחור מבין מגוון פונטים

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

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

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

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

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

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

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

• Alef Hebrew
• Open Sans Hebrew
• Open Sans Condensed Hebrew
• Noto Sans Hebrew
• Carmela
• Carmelit
• Tahoma
• Arial

כאמור, נסו להימנע מאריאל.

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

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

בדיקת החמץ: האם האתר שלכם הוא כולו באריאל? נסו לשלב במקומות שונים (בסליידרים, בכותרות וכו') פונטים אחרים. לכבוד פסח, תוכלו ליהנות ממבצע של 60% הנחה על כל הפונטים באתר אאא. עוד פרטים על המבצע כאן.

6. "ללמוד מההגדה של פסח" – יצירת הבדלה של תחילת הטקסט

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

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

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

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

7. להשתמש ב-EM או REM במקום PX

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

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

כדי להסביר את הבעיה אסביר על ההבדל בין פיקסל, EM ו-REM.

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

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

משום כך אפשר להשתמש ב-EM, או ב-REM. אסביר את המושגים והשימוש שלהם בפשטות.

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

EM הוא יחידת מידה משורשרת. כלומר אם אני מגדיר DIV כ-1.2, והוא נמצא בתוך Div נוסף שגם מוגדר כ-1.2, שוב עם בסיס של 10px, התוצאה היא שה-Div הפנימי יהיה מחושב כך: 1.2X1.2X10px.

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

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

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

סיכום

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

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