המדריך הטיפוגרפי העברי השלם – מאיר סדן

Written on 6 דצמבר, 2009

בוקר טוב לכולם.

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

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

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

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

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

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

2. לבחור פונט מתאים

תשע שנים אחרי שהמדריך המקורי נכתב, אריאל הוא עדיין הסטנדרט דה-פקטו בכל הקשור לפונט עברי המותאם למסך. במקינטוש תמצאו גם את Lucida, וברוב המחשבים גם את פונט טהומה של מיקרוסופט. על מערכות לינוקס קיימים וריאנטים נוספים, כמו DejaVu. גם Times New Roman מותאם למסך ומכיל נוסח כלשהו של פרנק ריהל, אך קשה לקרוא אותו בגדלים קטנים והוא פחות נעים למראה בגדלים גדולים יותר. בפונטים דוגמת אריאל, כדאי לשים לב ולהכיר את הניואנסים שבין גדלי הפונט השונים, שבכל אחד מהם הוא נראה שונה מאוד, בעיקר בגדלים שעד 16 פיקסלים.
השימוש בתמונות כתחליף לטקסט חי אינו מומלץ כשמדובר בטקסט רץ, בגלל שאי אפשר להדביק ולהעתיק חלקים מתוכו, הסיכוי שייקלט בתוצאות חיפוש הוא נמוך, וגם אין הבטחה שהטקסט יוצג כראוי על כל מסך, בגלל הבדלי רזולוציות וגדלי מסכים. בדרך כלל עבור כותרות וטקסטים קצרים יותר משתמשים בתמונות, ובמנגנון החלפת טקסט בתמונה.
שיטות חדשות להצגת פונטים שאינם מותקנים אצל המשתמש קיימות כיום בפיתוח. שיטה פופולארית היא sIFR, המשתמשת בקבצי פלאש כדי להחליף טקסט חי. שיטה נוספת היא Cufón, המבוססת על יכולות מתקדמות יותר של הדפדפן. בדפדפנים החדשים (Safari 4, FF 3.5) ניתן לקשר ישירות, באמצעות @font-face, לקבצי TTF, OTF ולעיתים גם WOFF – פורמט חדש המותאם במיוחד לווב. גם IE 6 ומעלה תומך בפורמט פונט אינטרנטי – EOT – שפותח ע“י מיקרוסופט. לאחרונה קמו פלטפורמות ייעודיות לתצוגת פונטים, הכוללות רכישה ורישוי – typekit ו-Fontdeck. יש לציין שכל הפיתוחים החדשים הללו מתמקדים בתצוגה באנגלית ובשפות לטיניות אחרות, אך באופן עקרוני ניתן לשלב פונטים בעברית בטכנולוגיות אלה.
הבלוג של עומר זיו משתמש בשני פונטים – נרקיס בלוק לכותרות, ואריאל לטקסט הרץ. הכותרות מוצגות בטכנולוגיית sIFR, המבוססת על פלאש, שהותאמה לעברית לצורך זה.
עומר זיו - שני פונטים

3. לא להעמיס בפונטים

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

המבזק הוא דף בית המשתמש בפונט אחד (באמצעות @font-face) כדי להציג את כותרות השעה בפורמט פשוט.
המבזק - פונט אחד

4. לבחור גדלים מתאימים

כדאי להגדיר מראש סט של גדלים, לפי צרכי הטקסט וההיררכיה. ב-HTML קיימות 6 רמות של כותרות (מ-H1 ועד H6), וניתן להבדיל טקסט רץ מציטוטים, רשימות ממוספרות ורשימות לא ממוספרות. ב-CSS קיימות שיטות שונות להגדרת גדלי האות.
שיטה פופולארית היא הגדרת גודל אות כללי – 16 פיקסלים, והגדרת כל הגדלים במסמך ביחס לגודל הזה, באחוזים או ב-em (מאה אחוזים = em אחד).

5. לרווח כמו שצריך

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

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

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

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

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

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

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

6. להשתמש בגריד

הגריד, כלי טיפוגרפי חיוני, לא שייך רק לעולם הפרינט. המסך הוא מטריצה של פיקסלים, וככזה ניתן לחלק אותו בקלות ליחידות שונות לפי הצורך.
טריק נחמד לחובבי inDesign – הגדירו עמוד ב-points במקום במילימטרים, ועבדו לפי 1 פיקסל = 1 פוינט. בסוף התהליך ניתן לייצא ב-72dpi. כך ניתן לנצל את כלי הגריד של אינדיזיין לטובת עיצוב אתרים.
שימו לב – הפרקטיקה של שימוש בטבלה ליצירת גריד ב-HTML יצאה משימוש לפני שנים רבות. כיום ניתן להשיג כל עימוד בשיטות CSS שאינן מצריכות טבלה. למשל, מערכת ה-960 היא גריד המותאם לאתרי אינטרנט ומשתמשת ברוחב הפופולארי 960 פיקסלים לחלוקה נוחה של עמודות.

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

פרויקט untitled - ריבועים נוחים לצפיה

7. לטפל נכון בקישורים

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

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

8. לטפל בדימויים

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

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

9. להיות סמנטי

HTML מספק תגים רבים הנבדלים זה מזה כדי לייצר תוכן נכון סמנטית, כלומר האפשרות להגדיר סוגי תכנים שונים (רשימות, טבלאות, כותרות, ציטוטים…) כדי להבדיל אותם זה מזה עבור הוראות העיצוב וגם עבור גורמים חיצוניים, כמו מנועי חיפוש וקוראי מסך, המפרשים את הדף.
דוגמה לשימוש ב-HTML סמנטי: תג <abbr> לציון ראשי תיבות וקיצורים; תגי <em> ו-<strong> לציון הדגשה (בניגוד ל-<b>, <i> – הדגשות סגנוניות); שימוש במאפיין title לציון כותרות של תמונות וקישורים, וכו'.
htmldog הוא אתר ללימוד עצמי של HTML ו-CSS ומכיל דוגמאות רבות ל-HTML סמנטי ותקין.

כל מתכון בבלוג הבישול בצק אלים מכיל יחידת תוכן המרכזת את המרכיבים, זמן ההכנה ועלות המצרכים – היחידה אמנם נראית כטבלה, אך אינה מוגדרת כטבלה בקוד ה-HTML: רשימת המצרכים מוגדרת ע“י תג רשימה <ul>, ושני הפרמטרים מצד שמאל מוגדרים ע“י <div>ים בעלי מזהה ייחודי המאפשר להוראות העיצוב, ה-CSS, להורות שיתיישרו לשמאל רשימת המצרכים.
בצק אלים - אוכל מעוצב

10. לתת גירסת הדפסה

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

11. חוקים נועדו שישברו אותם

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

מקורות מידע נוספים:

A List Apart – מאמרים בנושא עיצוב ופיתוח אתרים, מכל הבחינות ומכל התחומים – תוכן, קוד, עיצוב, שיווק ועוד.

The Elements of Typographic Style applied to the web – ניסיון מתמשך לשדך את ספרו של ברינגהרסט לשדה עיצוב האתרים.

I Love Typography – בלוג עשיר במידע ומקורות השראה בכל מה שקשור בטיפוגרפיה. מומלץ לבדוק את רשימת המאמרים הפופולאריים לפני שצוללים עמוק יותר.

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

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


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

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

2. לבחור פונט מתאים
תשע שנים אחרי שהמדריך המקורי נכתב, אריאל הוא עדיין הסטנדרט דה-פקטו בכל הקשור לפונט עברי המותאם למסך. במקינטוש תמצאו גם את Lucida, וברוב המחשבים גם את פונט טהומה של מיקרוסופט. על מערכות לינוקס קיימים וריאנטים נוספים, כמו DejaVu. גם Times New Roman מותאם למסך ומכיל נוסח כלשהו של פרנק ריהל, אך קשה לקרוא אותו בגדלים קטנים והוא פחות נעים למראה בגדלים גדולים יותר. בפונטים דוגמת אריאל, כדאי לשים לב ולהכיר את הניואנסים שבין גדלי הפונט השונים, שבכל אחד מהם הוא נראה שונה מאוד, בעיקר בגדלים שעד 16 פיקסלים.
השימוש בתמונות כתחליף לטקסט חי אינו מומלץ כשמדובר בטקסט רץ, בגלל שאי אפשר להדביק ולהעתיק חלקים מתוכו, הסיכוי שייקלט בתוצאות חיפוש הוא נמוך, וגם אין הבטחה שהטקסט יוצג כראוי על כל מסך, בגלל הבדלי רזולוציות וגדלי מסכים. בדרך כלל עבור כותרות וטקסטים קצרים יותר משתמשים בתמונות, ובמנגנון החלפת טקסט בתמונה.
שיטות חדשות להצגת פונטים שאינם מותקנים אצל המשתמש קיימות כיום בפיתוח. שיטה פופולארית היא sIFR, המשתמשת בקבצי פלאש כדי להחליף טקסט חי. שיטה נוספת היא Cufón, המבוססת על יכולות מתקדמות יותר של הדפדפן. בדפדפנים החדשים (Safari 4, FF 3.5) ניתן לקשר ישירות, באמצעות @font-face, לקבצי TTF, OTF ולעיתים גם WOFF – פורמט חדש המותאם במיוחד לווב. גם IE 6 ומעלה תומך בפורמט פונט אינטרנטי – EOT – שפותח ע“י מיקרוסופט. לאחרונה קמו פלטפורמות ייעודיות לתצוגת פונטים, הכוללות רכישה ורישוי – typekit ו-Fontdeck. יש לציין שכל הפיתוחים החדשים הללו מתמקדים בתצוגה באנגלית ובשפות לטיניות אחרות, אך באופן עקרוני ניתן לשלב פונטים בעברית בטכנולוגיות אלה.
הבלוג של עומר זיו משתמש בשני פונטים – נרקיס בלוק לכותרות, ואריאל לטקסט הרץ. הכותרות מוצגות בטכנולוגיית sIFR, המבוססת על פלאש, שהותאמה לעברית לצורך זה.

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

המבזק הוא דף בית המשתמש בפונט אחד (באמצעות @font-face) כדי להציג את כותרות השעה בפורמט פשוט.

4. לבחור גדלים מתאימים
כדאי להגדיר מראש סט של גדלים, לפי צרכי הטקסט וההיררכיה. ב-HTML קיימות 6 רמות של כותרות (מ-H1 ועד H6), וניתן להבדיל טקסט רץ מציטוטים, רשימות ממוספרות ורשימות לא ממוספרות. ב-CSS קיימות שיטות שונות להגדרת גדלי האות.
שיטה פופולארית היא הגדרת גודל אות כללי – 16 פיקסלים, והגדרת כל הגדלים במסמך ביחס לגודל הזה, באחוזים או ב-em (מאה אחוזים = em אחד).

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

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

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

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

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

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

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

6. להשתמש בגריד
הגריד, כלי טיפוגרפי חיוני, לא שייך רק לעולם הפרינט. המסך הוא מטריצה של פיקסלים, וככזה ניתן לחלק אותו בקלות ליחידות שונות לפי הצורך.
טריק נחמד לחובבי inDesign – הגדירו עמוד ב-points במקום במילימטרים, ועבדו לפי 1 פיקסל = 1 פוינט. בסוף התהליך ניתן לייצא ב-72dpi. כך ניתן לנצל את כלי הגריד של אינדיזיין לטובת עיצוב אתרים.
שימו לב – הפרקטיקה של שימוש בטבלה ליצירת גריד ב-HTML יצאה משימוש לפני שנים רבות. כיום ניתן להשיג כל עימוד בשיטות CSS שאינן מצריכות טבלה. למשל, מערכת ה-960 היא גריד המותאם לאתרי אינטרנט ומשתמשת ברוחב הפופולארי 960 פיקסלים לחלוקה נוחה של עמודות.

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

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

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

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

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

9. להיות סמנטי
HTML מספק תגים רבים הנבדלים זה מזה כדי לייצר תוכן נכון סמנטית, כלומר האפשרות להגדיר סוגי תכנים שונים (רשימות, טבלאות, כותרות, ציטוטים…) כדי להבדיל אותם זה מזה עבור הוראות העיצוב וגם עבור גורמים חיצוניים, כמו מנועי חיפוש וקוראי מסך, המפרשים את הדף.
דוגמה לשימוש ב-HTML סמנטי: תג <abbr> לציון ראשי תיבות וקיצורים; תגי <em> ו-<strong> לציון הדגשה (בניגוד ל-<b>, <i> – הדגשות סגנוניות); שימוש במאפיין title לציון כותרות של תמונות וקישורים, וכו'.
htmldog הוא אתר ללימוד עצמי של HTML ו-CSS ומכיל דוגמאות רבות ל-HTML סמנטי ותקין.

כל מתכון בבלוג הבישול בצק אלים מכיל יחידת תוכן המרכזת את המרכיבים, זמן ההכנה ועלות המצרכים – היחידה אמנם נראית כטבלה, אך אינה מוגדרת כטבלה בקוד ה-HTML: רשימת המצרכים מוגדרת ע“י תג רשימה <ul>, ושני הפרמטרים מצד שמאל מוגדרים ע“י <div>ים בעלי מזהה ייחודי המאפשר להוראות העיצוב, ה-CSS, להורות שיתיישרו לשמאל רשימת המצרכים.

10. לתת גירסת הדפסה
אנשים רבים מדפיסים אתרי אינטרנט המכילים מאמרים ארוכים לקריאה נוחה יותר. אנשים ידפיסו אתרי אינטרנט גם לצרכים אחרים, למשל, כרפרנס בעבודה אקדמית או תכנית עסקית. כדאי להגדיר תבנית עיצוב אלטרנטיבית (ניתן לעשות זאת באמצעות CSS בלבד) לצורך הדפסה.
בדרך כלל, גירסה להדפסה תהיה צנועה יותר מבחינה גרפית מהעיצוב המקורי, לא תכיל דימויים עתירי צבע או כהים מדי שיבזבזו דיו יקר, ותנצל את כל רוחב ההדפסה כדי לא לבזבז יותר מדי נייר.
זכרו שקישורים על נייר אינם לחיצים, ולכן כדאי לספק רפרנס כלשהו – במינימום את כתובת האתר ממנו הודפס הדף, ובמקסימום אפשר אפילו לציין את כל כתובות האינטרנט של הקישורים המופיעים בדף.
מאמר ב-A List Apart על גירסאות הדפסה.

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

מקורות מידע נוספים:

A List Apart – מאמרים בנושא עיצוב ופיתוח אתרים, מכל הבחינות ומכל התחומים – תוכן, קוד, עיצוב, שיווק ועוד.

The Elements of Typographic Style applied to the web – ניסיון מתמשך לשדך את ספרו של ברינגהרסט לשדה עיצוב האתרים.

I Love Typography – בלוג עשיר במידע ומקורות השראה בכל מה שקשור בטיפוגרפיה. מומלץ לבדוק את רשימת המאמרים הפופולאריים לפני שצוללים עמוק יותר.

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

15 תגובות

כתיבת תגובה - TrackBack - RSS Comments

  1. נכתב על ידי ליאת פנקס:

    מרתק!

    6 דצמבר, 2009 @ 10:52
  2. נכתב על ידי אברהם:

    מקסים, מחכים וכיף לקרוא.. כמה ידע יש לך מאיר.

    6 דצמבר, 2009 @ 11:44
  3. נכתב על ידי israeliDude:

    כל הכבוד ותודה רבה רבה על המאמר המקיף והקישורים.

    6 דצמבר, 2009 @ 12:17
  4. נכתב על ידי אור:

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

    6 דצמבר, 2009 @ 13:27
  5. נכתב על ידי איציק רנרט:

    מאיר עיניים,חכם ופשוט .

    6 דצמבר, 2009 @ 20:33
  6. נכתב על ידי אורן אלבז:

    תודה, כמו תמיד יעיל ונכון,

    9 דצמבר, 2009 @ 16:44
  7. נכתב על ידי rich text editor:

    מדריך מקיף ומצוין. הסעיף החשוב בו, כמובן, הוא הדיסקליימר שבסעיף האחרון.
    תודה רבה.

    9 דצמבר, 2009 @ 18:55
  8. Pingback from עדכוני תוכן אינטרנט – 9 בדצמבר, 2009 « Rich Text Editor – תוכן אינטרנט:

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

    9 דצמבר, 2009 @ 22:38
  9. נכתב על ידי דן קשאני:

    מקיף ועם זאת תמציתי ולעניין, תודה.

    11 דצמבר, 2009 @ 1:35
  10. נכתב על ידי רן יניב הרטשטיין:

    איזה כיף, פעמיים באותו מאמר 🙂

    20 דצמבר, 2009 @ 10:05
  11. Pingback from אל תפספסו – סיכום דצמבר 2009 ב reDesign:

    […] המדריך הטיפוגרפי העברי השלם: מאיר סדן כותב במזלג על טיפוגרפיה נכונה ברשת No Logo: רשת מודי משיקה קולקציית אמבטיות קוריאן מעוצבות […]

    31 דצמבר, 2009 @ 10:16
  12. נכתב על ידי רן:

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

    8 ינואר, 2010 @ 12:39
  13. נכתב על ידי Phlegmatos:

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

    מצטרפת לקודמי בהערה על גודל הטקסט הרץ. פלוס קונטרול פלוס 🙂

    10 אפריל, 2010 @ 20:38
  14. נכתב על ידי Berliner Ronen:

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

    11 אפריל, 2010 @ 8:09
  15. נכתב על ידי Rayford Lofaro:

    you are in point of fact a excellent webmaster. The site loading velocity is amazing. It sort of feels that you're doing any distinctive trick. In addition, The contents are masterwork. you've performed a magnificent activity on this subject!

    16 אפריל, 2011 @ 3:11
נא לרשום תגובה