תיעוד CSS עם דוגמאות להרצה: גודל גופן

Q: איך משנים גודל גופן ב-CSS?

מגדירים את המאפיין font-size על האלמנט: p { font-size: 18px; }. הוא מקבל אורכים (px, rem, em), אחוזים ומילות מפתח כמו large.

Q: איך משנים גודל גופן ב-HTML?

עם CSS, בגיליון סגנונות או בתכונת style: . התגית הישנה מיושנת ב-HTML5, ואין להשתמש בה.

Q: להשתמש ב-px, ב-em או ב-rem לגודל גופן?

השתמשו ב-rem לרוב הטקסט: הוא משתנה עם הגדרת הגופן של הדפדפן של המשתמש ולא מצטבר. השתמשו ב-em כשגודל צריך לעקוב אחרי ההורה שלו, כמו אייקון בתוך כפתור. px לא עוקב אחרי גודל הגופן ברירת המחדל שהקורא הגדיר בדפדפן, אז הימנעו ממנו בטקסט רגיל.

Q: למה גודל הגופן שלי ב-em כל הזמן גדל?

כי em יחסי לגודל הגופן של ההורה, ולכן אלמנטים מקוננים מוכפלים: 1.2em בתוך 1.2em הוא פי 1.44 מהבסיס. עברו ל-rem, שתמיד יחסי לאלמנט השורש.

איך קובעים גודל גופן ב-CSS

המאפיין font-size קובע את גודל הטקסט. שימו אותו על כל אלמנט, וכל טקסט בתוכו יורש את הגודל, אלא אם ילד קובע גודל משלו.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .big { font-size: 1.5rem; }
    .huge { font-size: 48px; }
  </style>
</head>
<body>
  <p class="small">12px</p>
  <p class="normal">16px (the browser default)</p>
  <p class="big">1.5rem (24px)</p>
  <p class="huge">48px</p>
</body>
</html>

כדי לשנות גודל גופן ב-HTML, עדיין משתמשים ב-CSS. הוסיפו תכונת style () או כלל בגיליון סגנונות. התגית  משנות ה-90 מיושנת, ואין לה מקום בעמוד מודרני.

היחידות ש-font-size מקבל

ערך	דוגמה	ביחס למה
`px`	`16px`	לשום דבר: גודל קבוע
`rem`	`1.25rem`	גודל הגופן של אלמנט השורש `<html>` (16px כברירת מחדל)
`em`	`1.2em`	גודל הגופן של אלמנט ההורה
`%`	`120%`	גודל הגופן של ההורה, כמו `em` (`120%` הוא `1.2em`)
מילת מפתח	`large`	סקאלה מוגדרת מראש סביב ברירת המחדל `medium`
מילת מפתח יחסית	`smaller`, `larger`	צעד אחד מהגודל של ההורה
Viewport	`4vw`	רוחב ה-viewport (4% ממנו)
פונקציה	`clamp(1rem, 4vw, 2rem)`	גמיש בין מינימום למקסימום

הקלידו ערך וראו את הגודל שהדפדפן מחשב:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { border: 1px dashed #9ca3af; padding: 8px; margin: 12px 0; }
  </style>
</head>
<body>
  <label>font-size: <input id="val" value="1.5rem" size="20"></label>
  <p id="sample">The quick brown fox</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.fontSize = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).fontSize;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

נסו 20px, 2em, 150%, x-large, smaller ו-5vw. ערך לא תקין, כמו big, נזרק, והטקסט שומר על הגודל התקין האחרון שלו.

rem מול em: ההבדל שנוקש

rem תמיד מסתכל על אלמנט השורש, ולכן 1.2rem הוא אותו גודל בכל מקום שבו הוא מופיע. em מסתכל על ההורה, ולכן גדלים מוכפלים כשאלמנטים מקוננים:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em compounds</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .em { font-size: 1.2em; }
    .rem { font-size: 1.2rem; }
    div { border-inline-start: 3px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">1.2em
    <div class="em">1.2em inside
      <div class="em" id="deep-em">1.2em inside again</div>
    </div>
  </div>
  <div class="rem">1.2rem
    <div class="rem">1.2rem inside
      <div class="rem" id="deep-rem">1.2rem inside again</div>
    </div>
  </div>
</body>
</html>

תיבת ה-em הפנימית ביותר היא 16 × 1.2 × 1.2 × 1.2 = 27.648px. תיבת ה-rem הפנימית ביותר היא עדיין 19.2px. ההצטברות הזאת שימושית ברכיב שהחלקים שלו צריכים לגדול יחד, ומפתיעה בכל מקום אחר. עמוד היחידות משווה את כל יחידות האורך.

מילות מפתח: מ-xx-small עד xx-large

מילות המפתח המוחלטות ממופות לסקאלה קבועה סביב medium, ששווה לגודל ברירת המחדל של המשתמש (16px אלא אם הוא שינה אותו):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size keywords</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-size: xx-small;">xx-small</p>
  <p style="font-size: x-small;">x-small</p>
  <p style="font-size: small;">small</p>
  <p style="font-size: medium;">medium</p>
  <p style="font-size: large;">large</p>
  <p style="font-size: x-large;">x-large</p>
  <p style="font-size: xx-large;">xx-large</p>
  <script>
    document.querySelectorAll('p').forEach((p) => {
      p.textContent += ': ' + getComputedStyle(p).fontSize;
    });
  </script>
</body>
</html>

עם ברירת המחדל של 16px, small הוא 13px, large הוא 18px, x-large הוא 24px ו-xx-large הוא 32px. מילות מפתח מתאימות לעבודה מהירה, אבל מערכת עיצוב בדרך כלל רוצה סקאלה משלה ב-rem.

גודל גופן גמיש עם clamp()

כותרת שצריכה לגדול עם המסך אבל אף פעם לא להיות קטנה מדי או גדולה מדי היא קריאה אחת ל-clamp(): המינימום, גודל מועדף שמשתנה, והמקסימום.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid heading</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 {
      /* never below 1.5rem, never above 3rem, 5vw in between */
      font-size: clamp(1.5rem, 5vw, 3rem);
      margin: 0;
    }
  </style>
</head>
<body>
  <h1 id="title">Fluid heading</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'computed: ' + getComputedStyle(document.getElementById('title')).fontSize;
  </script>
</body>
</html>

בתצוגה מקדימה ברוחב 800px, 5vw הוא 40px, שנמצא בין 24px ל-48px, ולכן הוא מנצח. עמוד ה-clamp מסביר טיפוגרפיה גמישה לעומק.

קביעת גודל בסיס לכל העמוד

קבעו את הגודל פעם אחת על body (או על html), וקבעו את כל השאר ביחס אליו:

html { font-size: 100%; }  /* respects the user's setting, usually 16px */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }
small, .caption { font-size: 0.875rem; }

הימנעו מטריקים כמו html { font-size: 62.5%; } אלא אם כל גודל בעמוד נקבע אחר כך ב-rem, ולעולם אל תקבעו גודל px קבוע על html: הוא דורס את גודל הגופן שהקורא בחר בדפדפן שלו, ויש אנשים שבלי זה לא יכולים לקרוא בכלל.

הערות נגישות

טקסט רגיל של 16px ומעלה הוא רצפה טובה לקריאה על מסכים.
גדלים ב-rem וב-em עוקבים אחרי הגדרת הגופן ברירת המחדל של המשתמש. גדלים ב-px עוקבים אחרי זום של העמוד, אבל לא אחרי ההגדרה הזאת.
באייפון, Safari מגדיל את העמוד כשמתמקדים בשדה קלט שגודל הגופן שלו מתחת ל-16px. תנו לשדות טופס font-size: 1rem או יותר כדי להימנע מזה.

טעויות נפוצות

שימוש בתגית . היא מיושנת. השתמשו במאפיין font-size.
גדלי em מקוננים שגדלים או מתכווצים בלי שליטה. השתמשו ב-rem אלא אם אתם רוצים הצטברות.
גודל px קבוע על html. הוא דורס את הגדרת הגופן של הקורא עצמו.
שכחה שלכותרות כבר יש גודל. <h1> הוא 2em כברירת מחדל, ולכן צריך h1 { font-size: 1em; } אם רוצים שיהיה בגודל של טקסט רגיל.
יחידות viewport לבד. font-size: 3vw הופך לבלתי קריא בטלפון וענק במסך רחב. עטפו אותו ב-clamp().

שאלות נפוצות

איך משנים גודל גופן ב-CSS?

מגדירים את המאפיין font-size על האלמנט: p { font-size: 18px; }. הוא מקבל אורכים (px, rem, em), אחוזים ומילות מפתח כמו large.

איך משנים גודל גופן ב-HTML?

עם CSS, בגיליון סגנונות או בתכונת style: . התגית הישנה  מיושנת ב-HTML5, ואין להשתמש בה.

מה גודל הגופן ברירת המחדל בדפדפנים?

16px לטקסט רגיל, אלא אם המשתמש שינה אותו בהגדרות הדפדפן. לערך הזה שווים 1rem ומילת המפתח medium כברירת מחדל.

להשתמש ב-px, ב-em או ב-rem לגודל גופן?

השתמשו ב-rem לרוב הטקסט: הוא משתנה עם הגדרת הגופן של הדפדפן של המשתמש ולא מצטבר. השתמשו ב-em כשגודל צריך לעקוב אחרי ההורה שלו, כמו אייקון בתוך כפתור. px לא עוקב אחרי גודל הגופן ברירת המחדל שהקורא הגדיר בדפדפן, אז הימנעו ממנו בטקסט רגיל.

למה גודל הגופן שלי ב-em כל הזמן גדל?

כי em יחסי לגודל הגופן של ההורה, ולכן אלמנטים מקוננים מוכפלים: 1.2em בתוך 1.2em הוא פי 1.44 מהבסיס. עברו ל-rem, שתמיד יחסי לאלמנט השורש.

מושגים קשורים