בעשור האחרון עלתה הרבה פעמים השאלה באיזו יחידת מידה כדאי להשתמש כדי להגדיר את גודל הפונטים באתר. התשובה הכמעט מוחצת היא "לא פיקסל" אבל אין תשובה חד משמעית מה כן. יחד עם זאת, אפשר לראות שרוב התעשייה עברה להשתמש ביחידת המידה REM
על מנת להגדיר את גודל הפונטים, ובחלק מהמקרים גם לשימוש בהגדרות מאפיינים אחרים כמו רוחב, padding
ו- margin
.
גם אני כבר שנים משתמשת ב-REM
לטיפוגרפיה ומעדיפה אותו משמעותית על פני ה-EM
, במיוחד בגלל העובדה ש-EM
הוא יחידה שמשתנה ע"פ ההגדרה של גודל הפונט של הקונטיינר, ואילו REM
נשאר קבוע בכל מקום באתר. מצד שני, ל-EM
יש יתרונות משלו, ולכן האידיאלי בימינו הוא שילוב בין כל האפשרויות: פיקסלים, REM
ו- EM
.
בפוסט הזה אני לא אפרט מה עדיף ולמה, כי רבים וטובים עשו זאת קודם, כמו למשל:
- Font Size Idea: px at the Root, rem for Components, em for Text Elements
- Use `rem` for Global Sizing; Use `em` for Local Sizing
- EM vs REM vs PX – Why you shouldn't “just use pixels”
- There’s more to the CSS rem unit than font sizing
אז מה כן יהיה בפוסט?
גודל פונט דיפולטיבי של הדפדפנים הוא 16 פיקסלים, ולכן גם אם בחרנו להשתמש ביחדת המידה REM
, עדיין יש כמה דרכים להגדיר אותו ולכל דרך יש היתרונות והחסרונות שלה.
יחס של 1:1
איפוס של ה-REM
שיהיה שווה ליחידות של פיקסל וכך יתנהג כמו פיקסלים מבחינת החישוב. כלומר: 1 REM = 1px
לקריאה מורחבת: Update your font-size to REM units
איך?
html {font-size:1px;} or with percent it's the same: html {font-size:6.25%;} body {font-size:16rem} /* =16px */ h1 {font-size:24rem;} /* =24px */
הטוב: לא צריך לחשב כלום, הערך של ה-REM
מקביל לערכים שיש בפוטושופ/ פיגמה /סקטצ'.
הרע: אם משתמשים בפרויקט בספריות חיצוניות שמשתמשות גם הן ב-REM
, ההגדרה על HTML משפיעה גם עליהם וזה יכול לגרום לאלמנטים להיות ממש קטנים, או, אם מסדרים את זה – לדרוס הרבה מאפיינים (במיוחד אם יש שימוש ב-REM
גם למאפיינים אחרים מלבד פונטים).
יחס של 1:0.1
איפוס של ה-REM
ליחידת מידה עשרונית, דומה לחישוב של פיקסל אבל חלקי עשר, כלומר: 0.1 REM = 1px
.
לקריאה מורחבת: Rem in CSS: Understanding and Using rem Units
איך?
html {font-size:62.5%;} /* =10px */ body {font-size:1.6rem} /* =16px */ h1 {font-size:2.4rem;} /* =24px */
הטוב: כמעט ולא צריך לחשב כלום, הערך של ה-REM
מקביל לערכים שיש בפוטושופ/ פיגמה /סקטצ', צריך רק להוסיף נקודה לפניו.
הרע: אותו חסרון כמו בשיטה של 1:1.
יחס של 1:16
מה יש לומר? שימוש ביחידת המידה REM
כמות שהיא מבחינת היחס שלה לעומת פיקסלים.
איך?
body {font-size:1rem} /* =16px */ h1 {font-size:1.5rem;} /* =24px */
הטוב: אנחנו לא דורסים את ההגדרות הדיפולטיביות של גודל פונט של הדפדפן, וכך מאפשרים אינטגרציה עם ספריות שונות.
הרע: החישוב מציק. אני מניחה שאפשר להתרגל למידות במשך הזמן, אבל זה לא אינטואטיבי. איך אפשר לעקוף את זה? שימוש בספריות CSS, כמו למשל Tailwind, מאפשר שימוש ב- REM
אבל בלי החישוב אלא על ידי הגדרה של קפיצות קבועות ואז צריך רק לזכור את הקפיצות.
אז מה עדיף?
אין לי תשובה חד משמעית – יצא לי לעבוד עם כל אחת מהשיטות, והבחירה באמת תלויה באופי הפרויקט. יש לכם.ן מה להוסיף? שיטה אחרת שלא הכרתי? אשמח לשמוע 🙂
עדכון לפוסט (05.2022)
תוספת לגבי שימוש ביחידות REM בהקשר של נגישות – למה לא טוב להשתמש בהם לכל המאפיינים:
The Surprising Truth About Pixels and Accessibilityעדכון לפוסט 2# (11.2023)
למה ומתי כן כדי להשתמש בפיקסלים:
Why You Should Use px Units for margin, padding, & Other Spacing Techniquesעדכון לפוסט 3# (02.2024)
לא רק REM אבל סקירה טובה של איך כל יחידת מידה משפיעה על בחירה בה עבור גודל פונט:
https://techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/relative-length-units-based-on-fontעדכון לפוסט #4 (04.2024)
מתי כן כדאי להשתמש בפיקסלים:
https://techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/absolute-length-units
נ.ב.
כל התמונות בפוסט צולמו בסדריה, מוזיאון היסטוריית הדפוס, סדנת הדפסה עתיקה וכריכה קשה. ביקור שם מומלץ בחום!