לפני כמה שנים, כשבניתי אתרים, אני זוכר את עצמי כותב font-size: 18px בלי לחשוב פעמיים. כולנו עשינו את זה. אחר כך, כשהייתי צריך לטפל במובייל, הייתי כותב font-size: 14px ב-media query. ואז, כשגוגל הוציא את ה-Core Web Vitals וגיליתי ש-25% מהמשתמשים שלנו משתמשים בזום של הדפדפן או בהגדרות נגישות – הבנתי שאני בונה אתרים שלא עובדים טוב לרבע מהקהל. החלטתי לבדוק לעומק את הנושא, ומאז עברתי לעבוד עם REM כמעט בלעדית. במאמר הזה אני רוצה לספר למה עשיתי את המעבר, מה השינוי עשה בפועל, ואיך אתם יכולים לעשות את זה גם בפרויקטים שלכם.
מה זה REM ולמה זה שונה מ-PX
לפני שנדבר על למה, צריך להבין את ה-מה. PX זו יחידה אבסולוטית – 16px יהיה תמיד 16 פיקסלים, לא משנה מה. זה נשמע כמו יתרון, אבל זה בדיוק החיסרון. REM (Root EM) זו יחידה יחסית – היא מחושבת על בסיס גודל הפונט של אלמנט ה-html (השורש). כברירת מחדל, דפדפנים מגדירים את גודל הפונט של ה-html ל-16px, אז 1rem שווה ל-16px. נשמע מסובך? זה לא, וזו בדיוק הסיבה שזה כל כך חזק.
ההבדל המהותי הוא שכאשר משתמש משנה את גודל הפונט בהגדרות הדפדפן שלו (משהו ש-Chrome, Firefox, Safari וכל הדפדפנים מציעים), הוא בעצם משנה את גודל הפונט של ה-html. אם בניתם את האתר ב-PX – שום דבר לא ישתנה. אם בניתם ב-REM – הכל יגדל פרופורציונלית, בדיוק כפי שהמשתמש רצה. זה ההבדל בין אתר שמכבד את המשתמש לאתר שכופה עליו את ההגדרות שלכם.
חמש הסיבות שגרמו לי לעבור
1. נגישות (Accessibility) – הסיבה החשובה ביותר
זאת הסיבה הראשונה והחזקה ביותר. בישראל, חוק הנגישות מחייב אתרים להיות נגישים, ובעולם תקן ה-WCAG הוא הסטנדרט. אחת הדרישות המרכזיות היא שמשתמשים יוכלו להגדיל את הטקסט באתר עד פי 200% בלי לאבד תוכן או פונקציונליות. כשאתם משתמשים ב-PX, גם אם המשתמש מגדיל את הפונט בדפדפן – הטקסט נשאר קטן. זה לא רק חוסר נימוס, זו בעיית נגישות אמיתית שיכולה להוציא אתכם מהתקן ולחשוף אתכם לתביעות.
עברתי ל-REM ופתאום משתמשים שראייתם חלשה יכולים להגדיל את הטקסט בנוחות, וכל הלייאאוט מתאים את עצמו אוטומטית. זה לא דורש שום קוד נוסף – זה פשוט קורה.
2. רספונסיביות אוטומטית – שינוי אחד ששווה זהב
תארו לכם תרחיש: סיימתם לבנות אתר, הלקוח מסתכל ואומר "הכל נראה לי קצת קטן". עם PX, אתם צריכים לעבור על כל הקובץ ולשנות עשרות גדלים. עם REM? משנים שורה אחת ב-html { font-size: ... } וכל האתר גדל פרופורציונלית. זה כלי תחזוקה אדיר.
יותר מזה – במובייל אפשר להגדיר font-size קטן יותר ב-:root, וכל הטיפוגרפיה והרווחים יקטנו אוטומטית בהתאם. במקום לכתוב 50 media queries לגדלי טקסט שונים, אתם כותבים אחד.
3. זום של דפדפן עובד חלק יותר
כשמשתמש לוחץ Ctrl++, הדפדפן מבצע זום על האתר. עם PX, התוצאה לפעמים מוזרה – יש אלמנטים שמתנהגים אחרת מאחרים, יש אלמנטים שלא משתנים בכלל. עם REM הזום אחיד וצפוי – הכל גדל יחד, ביחסים נכונים, בלי שבירות לייאאוט.
4. תחזוקה ועקביות עיצובית
כשאני עובד על פרויקט אתר חדש, אני מתחיל בהגדרה של design system – גדלי גופן, מרווחים, רוחבי גבולות, וכל מה שצריך. כל זה ב-REM. התוצאה היא שיש קוהרנטיות מלאה – אם החלטתי שגודל גופן בסיסי הוא 1.6rem ומרווח בין פסקאות הוא 2.4rem, אני יודע שכל הקוד יישאר עקבי. כשיש 50 ערכי PX אקראיים בקובץ – אין שום עקביות. זה הופך את התחזוקה לסיוט.
5. ביצועים ו-Core Web Vitals
זה הרבה פחות מדובר אבל חשוב מאוד. גוגל מודד את CLS (Cumulative Layout Shift) – כמה הלייאאוט "קופץ" בזמן הטעינה. כשעובדים עם REM ועם design system עקבי, הסיכוי ל-CLS גבוה נמוך משמעותית כי המידות יחסיות וצפויות. גוגל אוהב את זה, וזה אחד הפרמטרים המשמעותיים ב-Core Web Vitals שמשפיעים על דירוג בגוגל.
הטריק של 62.5% – איך לעבוד עם REM בלי לחשב כל הזמן
"רגע, אבל אם 1rem = 16px, אז כל פעם שאני רוצה גודל 24px אני צריך לחשב 24/16 = 1.5rem? זה מעצבן." צודקים. אבל יש פתרון אלגנטי שכל המפתחים המתקדמים משתמשים בו:
html {
font-size: 62.5%; /* 16 * 0.625 = 10px */
}מה שקרה כאן הוא שגרמתי ל-1rem להיות שווה ל-10px. עכשיו, כשאני רוצה גודל גופן של 18px, אני פשוט כותב font-size: 1.8rem. רוצה padding של 24px? כותב padding: 2.4rem. החישוב הופך אינטואיטיבי כמו עם PX, אבל אתם מקבלים את כל היתרונות של REM.
חשוב להבין שזה לא שובר נגישות – אם המשתמש שינה את גודל הפונט בדפדפן ל-20px (במקום 16px), אז 1rem יהיה 12.5px (62.5% מ-20), והכל ימשיך לעבוד יחסית. זו השיטה המומלצת בקהילת הפרונטאנד הבכירה, ואני משתמש בה בכל הפרויקטים שלי.
מתי כן להשתמש ב-PX (כי לא הכל REM)
אני רוצה להיות הוגן – יש מקרים שבהם PX הוא הבחירה הנכונה. הנה כמה דוגמאות:
- גבולות (borders) של 1px – גבול דק שצריך להיות תמיד באותו עובי, לא משנה מה.
border: 1px solidזה תקין - shadows – הצללות לא חייבות להיות יחסיות לפונט
- אלמנטים גרפיים מדויקים – אייקון של 24×24, רוחב של פס דק, וכדומה
- media queries – הסיפור פה מורכב יותר ויש דעות לכאן ולכאן, אבל באופן אישי אני משתמש ב-rem גם שם
הכלל שלי הוא פשוט: טיפוגרפיה, מרווחים, ופדינגים תמיד ב-REM. כל מה שצריך להיות קבוע מבחינת מימדים פיזיים יכול להישאר ב-PX.
ההשפעה על SEO – למה גוגל אוהב את זה
בתור מי שמתעסק בקידום אתרים שנים, אני יכול לומר שהמעבר ל-REM לא רק שיפר את הנגישות שלי – הוא שיפר גם את הדירוג. גוגל הצהיר שוב ושוב שנגישות וחווית משתמש הם פרמטרים שמשפיעים על דירוג. אתר נגיש אמיתית מקבל יחס טוב יותר, במיוחד אחרי עדכון Page Experience. בעבודה היומיומית שלי על קידום אתרים אני רואה שאתרים שנבנו עם תקני נגישות אמיתיים מקבלים יותר תנועה אורגנית, פחות bounce rate, ויותר זמן באתר – כל הסימנים שגוגל מחפש.
יותר מזה – אתר ב-REM מוכן יותר לעתיד. כשגוגל יחזק עוד יותר את האותות של נגישות (וזה יקרה), אתרים ב-PX יישארו מאחור. אתרים שבניתי לפני 3 שנים עדיין רלוונטיים, מהירים, ונגישים – בזכות בחירה אחת שעשיתי בתחילת הדרך.
איך לעשות את המעבר במהירות
אם יש לכם פרויקט קיים ב-PX ואתם רוצים לעבור – הנה התהליך הנכון:
- הוסיפו
html { font-size: 62.5%; }בתחילת ה-CSS - השתמשו ב-Find & Replace בעורך – חפשו דפוסים כמו "16px" והחליפו ל-"1.6rem"
- בדקו את האתר במצב מובייל וגם בזום של הדפדפן
- בדקו עם כלי אוטומטי כמו Lighthouse – הציון של נגישות צריך לעלות
בפרויקטים חדשים – פשוט תתחילו ככה מהיום הראשון. זה הופך את החיים שלכם הרבה יותר קלים.
שאלות נפוצות
מה זה REM ב-CSS?
REM (Root EM) היא יחידת מידה יחסית ב-CSS שמחושבת על בסיס גודל הפונט של אלמנט ה-html (השורש של המסמך). כברירת מחדל, דפדפנים מגדירים את גודל הפונט של ה-html ל-16 פיקסלים, ולכן 1rem שווה ל-16px. בשונה מ-PX שהוא אבסולוטי, REM מאפשר שינוי פרופורציונלי של כל הגדלים באתר על ידי שינוי הגודל ב-html בלבד.
למה REM יותר טוב מ-PX לנגישות?
משתמשים בעלי מוגבלות ראייה משתמשים לעיתים קרובות בהגדלת טקסט בהגדרות הדפדפן. עם REM, כשמשתמש מגדיל את הטקסט בדפדפן – כל הטקסט באתר גדל פרופורציונלית, בלי שבירות לייאאוט. עם PX, הטקסט נשאר קבוע ולא משתנה גם אם המשתמש שינה את ההגדרות. זו דרישה של תקני נגישות בינלאומיים כמו WCAG ושל חוק הנגישות בישראל.
האם להשתמש ב-REM בכל מקום באתר?
לא בהכרח. הכלל הוא להשתמש ב-REM לכל מה שקשור לטיפוגרפיה (גודל גופן, מרווחי שורות), למרווחים (margin, padding), ולגדלי קונטיינרים. PX מתאים יותר לגבולות דקים (1px borders), לאייקונים שצריכים להיות בדיוק בגודל מסוים, ולאלמנטים גרפיים שלא קשורים לקריאות הטקסט.
מה זה הטריק של font-size: 62.5%?
הוספת הקוד html { font-size: 62.5%; } בתחילת ה-CSS גורמת ל-1rem להיות שווה ל-10 פיקסלים במקום 16. זה הופך את החישוב לאינטואיטיבי – אם רוצים גודל גופן של 18px כותבים 1.8rem, אם רוצים padding של 24px כותבים 2.4rem. השיטה הזו לא פוגעת בנגישות כי היא עדיין יחסית, רק נותנת בסיס חישובי נוח יותר.
האם REM משפיע על SEO?
כן, באופן עקיף אבל משמעותי. גוגל משתמש באותות של חווית משתמש ונגישות בדירוג שלו, במיוחד דרך מדדי Core Web Vitals ו-Page Experience. אתרים שנבנו ב-REM מציעים נגישות טובה יותר, יציבות לייאאוט גבוהה יותר (CLS נמוך), וחווית משתמש משופרת. כל אלה מתורגמים לאותות חיוביים שגוגל מתגמל עליהם בדירוג גבוה יותר.
לסיכום
המעבר מ-PX ל-REM היה אחת ההחלטות הטכניות הטובות שעשיתי בקריירה. זה לא רק שיפר את הנגישות של האתרים שאני בונה – זה גם הקל על התחזוקה, שיפר את הביצועים, ועזר לדירוג בגוגל. אם אתם בונים אתרים ב-2026, אין שום סיבה להישאר עם PX. הטכנולוגיה תומכת ב-REM באופן מלא בכל הדפדפנים, היתרונות ברורים, והעלות של המעבר נמוכה מאוד. הפעם הבאה שאתם מתחילים פרויקט חדש – תתחילו עם html { font-size: 62.5%; } ותנו לעצמכם את המתנה של עתיד פתוח, נגיש, וקל לתחזוקה.
