קצת על טיפוגרפיה

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

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

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

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

PT – את יחידת ה PT תמצאו בדרך כלל כשתנסו להמיר קובץ PSD שהעביר לכם המעצב לעיצוב חי. ה PT או ה point (נקודה) היא יחידת מידע של דפוס. בניגוד למסכים בהם גודל הפיקסל נקבע על פי המסך הרי שהגודל של הנקודה הוא קבוע (1/72") ללא קשר באיזו מדפסת אתם מדפיסים או בגודל הנייר. היות והפוטושופ פותחה ככלי ששימש גם (שלא לאמר בעיקר) לדפוס הרי שהשימוש העיקרי בה הוא ביחידות של PT וכך גם יגיע אליכם הקובץ.

EM – ה EM היא יחידה יחסית וגודלה נקבע על ידי גודל הפונט של המסמך עצמו (מוגדר לרוב בתגית ה body ולמעשה מגיע גם בהגדרות ברירת המחדל של הדפדפן בהנחה שלא השתמשתם ב reset.css). כלומר, אם עבור תגית ה body הוגדר כי גודל הפונט הוא 12 פיקסלים הרי ש 1em = 12px.
כאשר בודקים את נושא הריווח של הטקסט הרי ש 1em הוא הרוחב של האות M גדולה (משם גם נגזרת המילה).
יחידות ה EM, עובדות די בדומה לשימוש באחוזים וניתנות להכפלה. כך למשל 2em משמען 24px ו 1.5em פירושם 18px.

אז במה להשתמש

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

לדרג את הפוסט
0

Comments

7 תגובות על “קצת על טיפוגרפיה”

  1. תמונת פרופיל של בירנית גורן
    בירנית גורן

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

    כמעט בכל הדפדפנים, ה-base font size הוא שווה ערך לגודל 16 פיקסל – ובעקרון יחסית גדול. לפיכך, אני מצהירה ל-body גודל פונט של 62.5%. לדוגמה:

    body {font: normal 62.5%/1 Arial,Helvetica,Sans-Serif;}

    62.5% מ-16 זה 10 פיקסל, מה שמקל מאד מאותו רגע ואילך להגדיר גדלי פונט לאלמנטים שונים בהכפלות פשוטות. לדוגמה:

    p (פיסקה רגילה): 1.4em
    h1 (כותרת גדולה): 2.4em

    וכו'.

    1. באותה מידה את יכולה להגדיר אותו ישירות כ 10px אבל כן, זה בדיוק העיקרון. כפולות של 10 זה מאוד נוח לחישוב.
      אגב, גם כשמשתמשים בגריד קבוע, כגון 960.gs למשל מאוד נוח לעבוד עם הכפולות הללו.

  2. ניצן, תודה על שיתוף המידע.

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

    ואם ניקח בחשבון את מה שאמרה בירנית, אם מוגדר ברירת מחדל 16px, זה יוצג שונה ברזולוציה 1024×768 וברזולוציה 1920×1080. שכן מדובר בפיקסלים (px) ולא ביחס (em).

  3. תמונת פרופיל של גיל
    גיל

    בעבר היה נהוג להשתמש בEMs, כיום רצוי להשתמש בpx כיחידת מידה עבור font size. בעבר היה נוח להשתמש בEms כדי להשתמודד עם חוסר היכולת של IE 6 לא להגדיל טקסט מבוסס px.
    כיום כל הדפדפנים הגדולים (כולל IE7,8) תומכים בשינוי גודל טקסט בהתאם לפיקסלים או שינוי רמת הזום של גוף הדף.
    בנוסף המנעות בline-height כי היא לא יורשת את האחוז מהאב שלה. במקום זאת, היא מתבססת על font-size

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

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

  4. תמונת פרופיל של חניתה אילן
    חניתה אילן

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

    1. היי חניתה

      בגדול, em היא יחידת מידה שמשמשת (בעיקר) דפוס. הדיעות באמת חלוקות לגבי איך היא מוגדת בפיקסלים, כאשר ההסבר הנפוץ הוא היחידה מוגדרת לפי גובה השורה, או גובה האותיות בהן את עושה שימוש. כלומר, אם את משתמשת בפונט 14, למשל, הרי ש em שווה ל 14 פיקסלים. אם את משתמשת בפונט 24 אזי em הוא 24 פיקסלים.
      ישנה טענה אחרת, שגורסת שמה שמגדיר את הגודל של em זה בעצם הרוחב של האות האנגלית אם גדולה (M), כאשר בתוך יחידה בגודל 1x1em תיכנס האות M עם הריווח הנדרש לה.

      את מוזמנת לקרוא קצת פה:
      https://css-tricks.com/css-font-size/#article-header-id-2

      או דיון מעניין ב StackOverflow כאן – https://stackoverflow.com/questions/4474107/what-is-em-font-size-how-much-is-it-in-pixels

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *