תקציר המאמר:
מהי טיפוגרפיה וכיצד בוחרים גופנים המתאימים לשימוש באינטרנט? מאמר זה סוקר את הנושא ונותן מידע בחמישה נושאים עיקריים:
|
|
מהי טיפוגרפיה? הגדרה; מטרתה של טיפוגרפיה; מהי טיפוגרפיה טובה
|
|
|
טיפוגרפיה לרשת ולצג מול טיפוגרפיה לדפוס רזולוציית הגופן; גופן משתנה; קריאות ואורך שורה
|
|
|
כללים לבחירת גופנים באתרים גופני סריף, סאנס-סריף וגופני כתב יד; שימוש בגופן Arial באתרים בעברית; בחירת הגופן עבור הגולשים; שימוש באות פשוטה בכותרת;
|
|
|
כיצד יש להדגיש טקסטים באתרי אינטרנט? הדגשה באמצעות צבע, Bold, קו תחתון והטיה
|
|
|
עקביות בשימוש בגופנים באתרי אינטרנט
|
|
|
|
|
מהי טיפוגרפיה?
|
|
|
טיפוגרפיה: אומנות סידור הדף - צורת האות, גודל הכתב והצורה בה הוא מסודר על פני העמוד.
|
|
|
מטרת הטיפוגרפיה היא לקחת את הטקסט ולהניב את התוצאה הטובה והנוחה ביותר לקריאה.
|
|
|
מהי טיפוגרפיה טובה? כזו היוצרת היררכיה חזותית על הדף באמצעות פיסוק חזותי וביטוי גרפי שעוזר לקוראים להבין את היחס בין טקסט לתמונות ובין כותרות לגוף הטקסט.
|
|
|
|
|
טיפוגרפיה לרשת ולצג מול טיפוגרפיה לדפוס
|
|
הכללים היסודיים של טיפוגרפיה דומים לגבי דפים ברשת ולגבי מסמכים מודפסים, אף על פי שאותיות המופיעות על המסך ואותיות המודפסות על נייר שונות באופן מכריע בשלושה גורמים:
|
|
|
- רזולוציית הגופן: במסך המחשב הגופנים מוצגים ברזולוציה נמוכה בהרבה מזו שבספרים, מגזינים ואפילו בפלט של דפים ממדפסות זולות.
- גופן משתנה: מאפיין בולט נוסף של טיפוגרפיה ברשת הוא ההשתנות שלה, דפים ברשת נבנים במהירות בכל פעם שהם מוטענים לתוך דפדפן. כל שורת טקסט, כל כותרת וכל גופן, נוצרים על ידי פעולת גומלין מסובכת של הדפדפן, השרת ומערכת ההפעלה הקיימת במחשב של הקורא. במהלך תהליך זה עלולות להתרחש תקלות בלתי-צפויות: גופן חסר במחשב הגולש, דפדפן מיושן או סדר עדיפויות להצגת גופנים שהוגדר על ידי הקורא בדפדפן שלו משנים את כל התמונה שעיצב המעצב הגרפי.
- קריאות (עד כמה הדף ברור וקריא) ואורך שורה מתאים לרשת: טיפוגרפיה טובה תלויה בניגוד החזותי הנוצר בין גופן אחד למשנהו, בין גושי טקסט לכותרות ובין כלל הטקסט לשוליים הלבנים המקיפים את העמוד. הדבר המושך ביותר את עין הקורא הוא קונטרסט חזק ותבניות מסודרות.
כאשר התוכן הוא בעיקר טקסט, טיפוגרפיה היא הכלי בו משתמשים על מנת "לצבוע" תבניות ולארגן אותן על גבי הדף. הדבר הראשון אותו רואה הקורא הוא לא הכותרת או פרטים אחרים על הדף, אלא את התבנית הכוללת והניגודים שעל הדף.
טיפוגרפיה לא אחידה מקשה על המשתמש לראות תבניות. טקסט על מסך המחשב קשה לקריאה לא רק בשל הרזולוציה הנמוכה של מסכי המחשב אלא גם בשל המבנה של רוב הדפים ברשת, מבנה שמפר כלל יסודי של טיפוגרפיה בספרים ומגזינים: שורות הטקסט ברוב הדפים ברשת ארוכים מדי לקריאה. טורים במגזינים וספרים צרים מסיבות פיזיולוגיות: במצב קריאה נורמלי המרחב שהעין רואה הוא רק 3 אינטשים, לכן מעצבים מנסים לשמור על טקסט בטורים לא רחבים בהרבה מהגודל הזה. שורות ארוכות של טקסט דורשות מהקוראים להזיז את ראשם ולאמץ את שרירי עיניהם כדי לעקוב אחרי השורות הארוכות.
|
|
|
|
כללים לבחירת גופנים באתרים
|
|
השתמשו בגופני סאנס-סריף
|
|
ישנן שתי משפחות של גופנים. גופנים סריפיים וסאנס-סריפיים. באתרי אינטרנט יש להשתמש בגופנים מסוג סאנס-סריף.
|
|
|
|
הסריף הוא אותו "קישוט", פסיק או תג המאפיין גופני דפוס, כמו David, Rod או Narkisim.
הסריף נמצא בדרך כלל במקום המדגיש את הייחוד של האות ועל ידי כך הופך את הגופן לקריא יותר.
גופנים לא סריפיים הם תולדה מאוחרת יחסית, ולכן גם נתפסים מודרניים יותר.
|
|
|
קבוצה נוספת של גופנים היא גופני כתב היד המאוד פופולאריים בתרבות הישראלית. אלה נותנים לכאורה תחושה אישית יותר אך הם מאוד לא מתאימים לטקסט רץ על מסכים, משום שבטקסט רץ מתבלטת אחידות האותיות הזהות, ואילו בכתב יד אמיתי, כל אות שונה. כך מורגשת המלאכותית של הגופן ומעוררת תחושת חוסר אמינות.
למי שבכל זאת רוצים כתב יד, כדאי פשוט לכתוב ולסרוק. פעולת הקריאה היא פעולה של צילום מילים שלמות. שימוש בגופן מתחכם עשוי להקשות את הקישור בין המילה הכתובה לבין תוכנה
|
|
|
|
בעברית השתמשו בגופן Arial לטקסט הרץ
|
|
כשכותבים אתר בעברית יש להשתמש בגופן Arial, זהו הגופן היחיד שנראה טוב על המסך או הצג. באנגלית יש היצע גדול יותר והגופנים בסגנון Times הם הנוחים ביותר לקריאת טקסטים על מסך המחשב.
|
|
|
|
בחרו את הגופן שיופיע לגולשים
|
|
לכל גופן ייחוד משלו שאמור ליצור התאמה הרמונית בין זרימה חזותית ומילולית ובין התוכן. בגרסאות הראשונות של HTML, לא הייתה שליטה על הגופנים והם נקבעו על ידי הדפדפן. לכן דפים נצפו בכל פעם בגופן שהמשתמש הגדיר בדפדפן שלו. לעומת זאת, הגרסאות החדשות של HTML ו- CSS מאפשרות למעצבים להגדיר את הגופן גם למשתמשים. קביעת הגופן לגולש היא שימושית גם מבחינות אסתטיות וגם בשל הגדלים השונים של הגופנים אצל הגולש. מבנה שנבנה בקפידה עבור גופן מסוים עלול להראות רע בשימוש בגופן אחר.
|
|
|
|
בכותרות השתמשו באות פשוטה
|
|
כאשר בוחרים גופנים לכותרות, כדאי לקחת בחשבון שהשימוש באות "פשוטה" יכול לעיתים להועיל בהרבה מאשר שימוש בגופנים יותר "חריגים". כמו כן, שימוש ביותר מגופן אחד יכול להסיח את הדעת ולעייף את העין. יוצאים מהכלל הם לוגואים וכותרות.
|
|
|
חלק מהגופנים יותר נוחים לקריאה על המסך מגופנים אחרים.
Times Roman – גופן לא מותאם
הגופן המסורתי Times Roman נחשב לאחד הנוחים לקריאה על נייר, אבל ברזולוציה של מסכים הגודל שלו קטן מדי והצורה שלו מעוותת.
|
|
|
Times New Roman – גופן מותאם
Times New Roman מהווה דוגמה טובה לגופן מסורתי שהותאם לשימוש על מסך המחשב. גופן זה הוא בררת המחדל ברוב הדפדפנים. הגופן הוא ממוצע מבחינת קריאות על מסך המחשב.
Times New Roman הוא גופן המתאים לשימוש במסמכים כבדים של טקסט שכנראה יודפסו על ידי הקוראים.
|
|
|
Georgia – גופן המעוצב עבור מסך
גופנים מסוימים, כגון Georgia עוצבו במיוחד לקריאות על מסך המחשב; הגופנים האלה מאפשרים קריאות מצוינת לדפים שאמורים להיקרא ישירות מהמסך. אף על פי כן, גופנים אלה אינם נראים טוב כאשר הם מודפסים על נייר.
|
|
|
גופנים נוספים שמותאמים לקריאה על גבי צג המחשב
Helvetica, Courier New, Courier, Geneva
|
|
|
הדגשה
|
תצוגה נכונה יוצרת מבנה של מידע ומוסיפה מגוון חזותי המושך את עין הקורא לתוך החומר. המפתח לתצוגה יעילה הוא השימוש החסכוני והזהיר בהדגשה. יש אפשרויות רבות בשביל להוסיף דגש לגוש טקסט, אבל השימוש בהם צריך להיות מצומצם. אם הכל מודגש, אזי שום דבר לא יבלוט לעין והטקסט יראה מאיים.
כלל חשוב נוסף הוא להוסיף דגש באמצעות פרמטר אחד בכל פעם. אם רוצים למשוך תשומת לב לכותרת במסמך, אין לקבוע, אות גדולה + מודגשת + קו תחתון.
|
|
|
|
הדגשה באמצעות הגדלה
|
באופן עקרוני ההמלצה היא להגדיל את הגופן במידה אחת בלבד כשאתם משתמשים בכלי זה לצורך הדגשה.
יש לזכור כי הגדרת גודל הגופן היא נושא שנתון לויכוח. הרשת אמורה להיות מדיום עולמי שבה למשתמשים מכל סוגים יש גישה שווה למידע. בניגוד למדיום מודפס, שבו המבנה והסוג קבועים, דפים ברשת צריכים להתאים לצרכים של כולם, כך שלמשל, משתמשים בעלי ראיה מוגבלת יוכלו לקבוע את הגופן של המסמכים ברשת לגודל שהם מוצאים כנוח לקריאה.
|
|
|
|
הדגשה באמצעות Bold
|
|
אם מעדיפים להדגיש באמצעות Bold, יש להשאיר את הגופן בגודל הזהה לטקסט הרץ.
|
|
|
|
הדגשה באמצעות צבע
|
|
במידה ובוחרים להדגיש טקסט באמצעות צביעת חלקים ממנו בצבע אחר, יש להביא בחשבון עיוורי צבעים ולהתחשב במגבלתם. בנוסף, יש להביא בחשבון שכיום חלק גדול מהטקסטים הצבועים בצבע אחר הם קישורים והגולשים מכירים את הכלל הזה ורגילים לחפש טקסט צבוע ולנסות להקליק עליו. לכן יש לבחור בגוונים כהים של צבע, ולהימנע משימוש בצבע קרוב לצבע ברירת המחדל של קישור - כחול וסגול. נקודה נוספת היא שלא כדאי לשים טקסט מעל רקע שבו יותר מצבע אחד.
|
|
|
|
הדגשה באמצעות קו תחתון
|
|
טקסט עם קו תחתון הוא זכר לימים של מכונת הכתיבה, כאשר אופציות כמו טקסט נטוי ומודגש לא היו. בנוסף לליקויים האסתטיים שלו (יותר מדי כבד, מפריע לצורות של אותיות), לקו תחתון יש משמעות מיוחדת במסמכים ברשת – קו תחתון משמעו – קישור. לכן ברשת רצוי מאוד לא להדגיש טקסט באמצעות קו תחתון.
|
|
|
|
הדגשה באמצעות הטיה בכותרות גרפיות בלבד
|
ראשית – בטקסט הרץ של האתר, אל תשתמשו באות נטויה.
ניתן להשתמש בטקסט נטוי בכותרות גרפיות בלבד. טקסט נטוי מושך את העין כי הוא שונה בצורתו משאר הטקסט. משתמשים בהטיה בתוך טקסט כדי להדגיש מילים זרות או ביטויים. צריך להימנע מגושים גדולים של טקסט נטוי כי הקריאות של טקסט כזה, במיוחד ברזולוציית מסך, נמוכה יחסית.
|
|
|
|
עקביות
|
|
כמו בדפוס, אתרים ברשת משתדלים לשמור על עקביות סגנונית של הטקסט בכל האתר. עקביות נותנת ליטוש לאתר ומעודדת מבקרים להישאר, על ידי יצירת ציפייה למבנה הטקסט. אם הפורמט מרושל ולא עקבי, הוא יבלבל את הגולשים והם עלולים לא לחזור.
|
|
|
|
לכן בעבודה על אתרי אינטרנט קבעו בתחילת העבודה
|
|
|
סוג גופן לטקסט
|
|
|
סוג גופן לכותרות
|
|
|
אופן הדגשה
|
|
|
קישורים
|
|
|
|
|
מקורות מידע
|
|
יסודות עיצוב המדיה: http://www.etsem.co.il/study/info/graphics/graphics-3.asp
|
|
|
|
קונספציה – שיעור קצר בנושא טיפוגרפיה מעשית: http://www.exego.net/academy/type/index.html
|
|
|
|
המדריך לבניית אתרים – טיפוגרפיה: http://vlib.eitan.ac.il/styleguide/typographi_.html
|
|
|
