יחידת REM בדפדפן ואיך להשתמש בה

משך זמן קריאה: 3 דקות

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

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

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

אז מה כן יהיה בפוסט?

גודל פונט דיפולטיבי של הדפדפנים הוא 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

נ.ב.

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

כתיבת תגובה

האימייל לא יוצג באתר.