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