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

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

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

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

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

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

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

tnx

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

old

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

new

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

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

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

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

row-length

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

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

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

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

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

Matza

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

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

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

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

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

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

low-contrast

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

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

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

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

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

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

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

orphan

מילה יתומה קורית כשבסוף הפיסקה בשורה האחרונה מופיעה רק מילה אחת. ל-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. "ללמוד מההגדה של פסח" – יצירת הבדלה של תחילת הטקסט

Kaufmann_Haggadah_p_014

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

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

alaxon

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

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

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 או שימוש בהגדרות המובנות בתבנית שלכם. עברנו נקודתית על כמה שיפורים שתוכלו לעשות, אבל למעשה נושא הטיפוגרפיה הוא רחב בהרבה.

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

12 תגובות

  1. יונתן הגב

    מאמר מושקע ומאלף, ישר למועדפים.

    • Ben Pines הגב

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

  2. אור הגב

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

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

    חג שמח

    • Ben Pines הגב

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

  3. eyalpour הגב

    למדתי משהו, תודה רבה בן וחג שמח 🙂

  4. oribritman הגב

    נהניתי מאד!

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

    פוסט מעולה!

  5. אלעד הגב

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

    http://auctionrepair.com/pixels.html
    A pixel doesn't have a particular size. It is an abstract represention of a specific coordinate, like a point on a map.
    Pixel indicates only a point on a grid, not the size of the point.

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

    • Ben Pines הגב

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

  6. שי הגב

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

  7. קרן הגב

    תודה רבה! כתוב מצויין ועזר לי מאוד

  8. רון הגב

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

    נותן תחושה של רצון לעוד מאמרים כאלה.

    תודה רבה,
    רון

  9. גל הגב

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

השארת תגובה