שנים כתבתי font-size: 18px בלי לחשוב פעמיים, ובמובייל הוספתי media query עם font-size: 14px. זה עבד, עד שהתחלתי לבדוק אתרים שלי עם גודל גופן מוגדל בהגדרות הדפדפן, כמו שמשתמשים עם ראייה חלשה עושים. הטקסט נשאר בדיוק באותו גודל. האתר פשוט התעלם מהבקשה של המשתמש.
מאז עברתי מ-PX ל-REM בכמעט כל מה שקשור לטיפוגרפיה ולמרווחים. במאמר הזה אני מסביר מה ההבדל בין היחידות, למה עברתי, איך עובד הטריק המפורסם של 62.5% ומה החסרונות שלו, מתי PX עדיין נכון, ומה ההשפעה האמיתית על SEO.
מה ההבדל בין PX ל-REM?
PX היא יחידת מידה קבועה ב-CSS, ו-REM (Root EM) היא יחידה יחסית שמחושבת לפי גודל הגופן של אלמנט השורש html. כשמשתמש מגדיל את גודל הגופן בהגדרות הדפדפן, כל מה שמוגדר ב-REM גדל איתו, ומה שמוגדר ב-PX נשאר באותו גודל. ברירת המחדל בדפדפנים היא 16px, ולכן 1rem שווה בדרך כלל ל-16px.
| יחידה | יחסית למה | מתי אני משתמש בה |
|---|---|---|
| PX | קבועה | גבולות דקים, צללים, פרטים גרפיים קטנים |
| REM | גודל הגופן של html | גודל טקסט, מרווחים, רוחב קונטיינרים |
| EM | גודל הגופן של האלמנט עצמו או של ההורה | ריווח פנימי שצריך לגדול עם הטקסט של רכיב מסוים |
| % | האלמנט ההורה | רוחבים יחסיים בתוך פריסה |
| VW / VH | גודל המסך | אלמנטים שצריכים להתאים לחלון, כמו באנר ראשי |
1. איך המעבר מ-PX ל-REM משנה את התנהגות האתר
1.1 החישוב
במצב ברירת מחדל 1rem שווה 16px, ולכן מחלקים ב-16: גופן של 18px הוא 1.125rem, מרווח של 24px הוא 1.5rem, וכותרת של 32px היא 2rem. אם המשתמש הגדיר בדפדפן גופן בסיס של 20px, אותו 1.5rem הופך ל-30px, וכל העמוד שומר על אותם יחסים.
1.2 הגדרת גופן מול זום: הנקודה שרוב המדריכים מפספסים
יש שתי דרכים להגדיל טקסט בדפדפן, והן מתנהגות אחרת:
- זום (Ctrl ופלוס): מגדיל את כל העמוד, כולל מה שמוגדר ב-PX. כאן אין הבדל גדול בין היחידות.
- גודל גופן בהגדרות הדפדפן: משנה רק את גודל הגופן הבסיסי. כאן כל ההבדל: טקסט ב-REM גדל, וטקסט שנכתב ב-PX נשאר כמו שהיה.
משתמשים שצריכים טקסט גדול באופן קבוע מעדיפים לעתים קרובות את הדרך השנייה, כי היא חלה על כל האתרים בלי להגדיל גם תמונות ופריסה. אתר שכתוב ב-PX פשוט לא מגיב להם.
2. חמש הסיבות שעברתי מ-PX ל-REM
2.1 נגישות אמיתית, לא רק תוסף נגישות
קריטריון 1.4.4 ב-WCAG דורש שניתן יהיה להגדיל טקסט עד 200% בלי לאבד תוכן או פונקציונליות (ההסבר ב-W3C). התקן הישראלי לנגישות אתרים, ת"י 5568, מבוסס על WCAG. נכון שזום של הדפדפן מספיק כדי לעמוד בדרישה הזו, אבל REM מכבד גם את ההעדפה שהמשתמש כבר הגדיר, בלי שיצטרך לעשות שום דבר באתר שלכם.
תוסף נגישות עם כפתור הגדלת טקסט לא מחליף את זה. ברוב המקרים הוא עצמו משנה את גודל הגופן של html, ואז הוא עובד טוב בדיוק באתרים שכתובים ב-REM, וחלקית באתרים שכתובים ב-PX.
2.2 שינוי סקאלה בשורה אחת
הלקוח מסתכל על האתר המוכן ואומר שהכל קצת קטן. עם PX עוברים על עשרות ערכים. עם REM משנים שורה אחת ב-html, וכל הטיפוגרפיה והמרווחים גדלים יחד באותם יחסים.
2.3 מובייל עם פחות קוד
במקום להגדיר מחדש כל גודל טקסט במובייל, אפשר לשנות את הבסיס בנקודת שבירה אחת ולתת לכל השאר להתאים את עצמו. קובץ CSS קצר יותר, פחות מקומות לטעות.
2.4 מערכת עיצוב עקבית
כשאני עובד על פרויקט אתר חדש, אני מתחיל מסקאלה קבועה של גדלי גופן ומרווחים, כולם ב-REM, ושומר אותם כמשתני CSS. כשכל ערך באתר מגיע מאותה רשימה, העיצוב נשאר עקבי גם אחרי שנה של עדכונים:
:root {
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--text-base: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.75rem;
}2.5 עבודה נוחה עם אלמנטור ועם תבניות מודרניות
באלמנטור אפשר לבחור ביחידת REM בשדות הטיפוגרפיה והמרווחים, והעורך המובנה של וורדפרס תומך ביחידות יחסיות בהגדרות הטיפוגרפיה של תבניות בלוקים. מה שחשוב הוא להחליט על היחידה בהגדרות האתר הגלובליות ולא לערבב יחידות מערכה לערכה.
3. הטריק של 62.5% במעבר מ-PX ל-REM
3.1 איך זה עובד
כדי לא לחלק ב-16 כל הזמן, הרבה מפתחים מגדירים את גודל הגופן של html ל-62.5%:
html {
font-size: 62.5%; /* 16 כפול 0.625 = 10px */
}
body {
font-size: 1.6rem; /* מחזיר את טקסט הגוף ל-16px */
}עכשיו 1rem שווה 10px, והחישוב פשוט: 18px הוא 1.8rem ו-24px הוא 2.4rem. מכיוון שההגדרה היא באחוזים, היא עדיין מכבדת את ההגדרה של המשתמש: אם הוא קבע 20px, 1rem יהיה 12.5px והכל יגדל בהתאם. חשוב לא להגדיר בסיס של 10px בפיקסלים, כי אז ההעדפה של המשתמש נדרסת.
3.2 החסרונות שלא מספרים עליהם
- תוספים ורכיבים חיצוניים מתכווצים. תוסף שהסגנון שלו נכתב ב-REM מתוך הנחה ש-1rem הוא 16px יופיע קטן ב-37.5%. זה קורה עם טפסים, חלונות קופצים וווידג'טים.
- אתר קיים נשבר. באתר שכבר יש בו ערכי REM שנכתבו לפי 16px, שינוי הבסיס מקטין את כולם.
- צריך לזכור להגדיר את body. בלי השורה של body, כל טקסט בלי גודל מוגדר יופיע ב-10px.
3.3 החלופה שאני מעדיף באתרי וורדפרס
באתרי וורדפרס, שכמעט תמיד יש בהם תוספים של אחרים, אני משאיר את הבסיס על ברירת המחדל של 16px ועובד עם משתני CSS, כמו בדוגמה בסעיף 2.4. החישוב נעשה פעם אחת, בהגדרת המשתנים, ואחר כך משתמשים בשמות ולא במספרים. כך אין צורך בטריק, ואין סיכון לתוספים.
4. מתי לא לעבור מ-PX ל-REM
REM הוא לא תשובה לכל ערך. הכלל שלי: מה שקשור לקריאות ב-REM, ומה שצריך להישאר קבוע פיזית יכול להישאר ב-PX.
- גבולות של 1px. קו דק צריך להישאר דק.
- צללים. אין סיבה שיגדלו עם הטקסט.
- פרטים גרפיים קטנים שלא קשורים לקריאות.
- אייקונים ליד טקסט דווקא כן כדאי להגדיר ב-REM או EM, כדי שיגדלו יחד עם הטקסט שלידם.
5. REM ב-media queries: ההפתעה הקטנה
בתוך media query, יחידות REM ו-EM מחושבות לפי גודל הגופן ההתחלתי של הדפדפן ולא לפי מה שהגדרתם ב-html. כלומר, גם אם השתמשתם בטריק של 62.5%, בתוך media query הערך 1rem עדיין שווה 16px בברירת המחדל:
/* נקודת שבירה ב-768px, גם כש-html מוגדר ל-62.5% */
@media (min-width: 48rem) {
.container { padding-inline: 2rem; }
}היתרון של נקודות שבירה ב-REM או EM: כשמשתמש מגדיל את גודל הגופן הבסיסי, הפריסה עוברת לתצוגת מובייל מוקדם יותר, במקום לדחוס טקסט גדול לעמודות צרות. זו בחירה, לא חובה, ואפשר להשאיר נקודות שבירה ב-PX אם זה מה שהתבנית עושה.
6. איך עוברים מ-PX ל-REM באתר קיים
- מגבים את קובץ ה-CSS או את האתר כולו.
- מחליטים על הבסיס: ברירת מחדל של 16px (מומלץ באתר עם הרבה תוספים) או 62.5%.
- ממירים קודם את הטיפוגרפיה: גודל גופן של הגוף ושל הכותרות. זה החלק שנותן את רוב הערך.
- ממירים מרווחים (margin, padding, gap) בשלב שני.
- משאירים ב-PX גבולות, צללים ופרטים גרפיים. לא עושים חיפוש והחלפה עיוור על כל הקובץ.
- בודקים במובייל, בזום של 200%, ועם גודל גופן מוגדל בהגדרות הדפדפן. בכרום ההגדרה נמצאת תחת Settings, בחלק Appearance.
7. המעבר מ-PX ל-REM ו-SEO: מה נכון ומה לא
בגרסה הקודמת של המאמר כתבתי שהמעבר שיפר דירוג. צריך לדייק: גוגל לא בודקת באיזו יחידת CSS כתבתם, והמעבר לא משפר את הציון ב-Core Web Vitals כשלעצמו. מה שכן נכון:
| טענה | האם נכון |
|---|---|
| REM משפר דירוג באופן ישיר | לא |
| REM מוריד CLS | לא. CLS נובע מתמונות בלי מידות, פונטים ותוכן שנטען מאוחר, לא מהיחידה |
| REM משפר נגישות וקריאות | כן |
| קריאות טובה משפיעה על התנהגות הגולשים | כן, וזו ההשפעה העקיפה על האתר |
את מדדי המהירות והיציבות עצמם פירטתי במאמר על Core Web Vitals. הסיבה לעבור ל-REM היא הגולשים, לא האלגוריתם.
טעויות נפוצות במעבר מ-PX ל-REM
- להגדיר בסיס בפיקסלים.
html { font-size: 10px; }מבטל את כל היתרון, כי הוא דורס את ההגדרה של המשתמש. - 62.5% באתר מלא תוספים. טפסים וווידג'טים של אחרים מתכווצים פתאום.
- חיפוש והחלפה עיוור. גם גבולות של 1px הופכים ל-0.1rem, ובחלק מהמסכים הם נעלמים.
- ערבוב יחידות. חצי אתר ב-REM וחצי ב-PX נותן את הרע משני העולמות: חלק גדל וחלק לא.
- לבדוק רק זום. זום גדל גם ב-PX. הבדיקה שמגלה בעיות היא שינוי גודל הגופן בהגדרות הדפדפן.
- גובה קבוע לקופסאות טקסט. כשהטקסט גדל והקופסה לא, הטקסט נחתך או יוצא החוצה. עדיף min-height או גובה אוטומטי.
סיכום: למה המעבר מ-PX ל-REM שווה את זה
המעבר ל-REM לא הפך את האתרים שלי למהירים יותר ולא הקפיץ אותם בגוגל. מה שהוא כן עשה: אתרים שמכבדים את ההגדרות של מי שקורא אותם, קוד עקבי שקל לתחזק, ושינויי עיצוב שלוקחים דקות במקום שעות. באתר וורדפרס אני ממליץ להשאיר בסיס של 16px, לעבוד עם משתני CSS, ולשמור את PX לגבולות ולפרטים קטנים.
אם אתם מתכננים אתר חדש ורוצים שייבנה נכון כבר מהשורה הראשונה של ה-CSS, דברו איתי.
שאלות נפוצות על המעבר מ-PX ל-REM
מה זה REM ב-CSS?
REM (Root EM) היא יחידת מידה יחסית שמחושבת לפי גודל הגופן של אלמנט השורש html. בברירת מחדל הוא 16px, ולכן 1rem שווה 16px. כשהמשתמש משנה את גודל הגופן בדפדפן, כל הערכים ב-REM משתנים בהתאם.
מה ההבדל בין REM ל-EM?
REM מחושב תמיד לפי אלמנט השורש html, ולכן הוא צפוי בכל מקום בדף. EM מחושב לפי גודל הגופן של האלמנט עצמו או של ההורה, ובקינון עמוק הוא עלול להצטבר ולהפתיע. אני משתמש ב-REM כברירת מחדל וב-EM רק כשאני רוצה שרכיב יגדל יחד עם הטקסט שלו.
למה REM עדיף מ-PX לנגישות?
כי משתמשים רבים מגדילים את גודל הגופן הבסיסי בהגדרות הדפדפן. טקסט ב-REM גדל בהתאם, וטקסט ב-PX נשאר באותו גודל. זום של הדפדפן מגדיל את שתי היחידות, אבל הגדרת הגופן משפיעה רק על יחידות יחסיות.
מה זה הטריק של font-size 62.5%?
הגדרת גודל הגופן של html ל-62.5% הופכת את 1rem ל-10px במקום 16px, ומקלה על החישוב. היא עדיין מכבדת את הגדרת המשתמש, אבל מקטינה תוספים שנכתבו לפי בסיס של 16px, ודורשת להגדיר מחדש את הטקסט של body.
האם להשתמש בטריק של 62.5% בוורדפרס?
באתר עם הרבה תוספים אני לא ממליץ. טפסים, חלונות קופצים וווידג'טים שכתובים ב-REM יתכווצו. עדיף להשאיר בסיס של 16px ולהגדיר משתני CSS עם הערכים שבהם משתמשים בכל האתר.
מתי עדיין כדאי להשתמש ב-PX?
לגבולות דקים של 1px, לצללים ולפרטים גרפיים קטנים שלא קשורים לקריאות. כל מה שקשור לטקסט ולמרווחים סביבו עדיף ב-REM.
האם המעבר מ-PX ל-REM משפר SEO?
לא באופן ישיר. גוגל לא בודקת איזו יחידת CSS באתר, והמעבר לא משפר את מדדי Core Web Vitals כשלעצמו. הרווח הוא עקיף: אתר קריא ונגיש יותר משפר את החוויה של הגולשים.
איך בודקים שהמעבר ל-REM עובד?
משנים את גודל הגופן בהגדרות הדפדפן לגדול מאוד, טוענים מחדש את האתר ובודקים שהטקסט גדל, שהפריסה לא נשברת ושאין טקסט שנחתך. אחר כך בודקים גם זום של 200% ותצוגת מובייל.
