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

Q: איך מדגישים טקסט ב-CSS?

משתמשים ב-font-weight: bold; או במספר המקביל font-weight: 700; על האלמנט. כדי להסיר הדגשה מכותרת או מ- , הגדירו font-weight: normal; (400).

Q: האם font-weight bold זהה ל-700?

כן. bold מחושב ל-700 ו-normal מחושב ל-400, כך ששתי הצורות נראות זהות.

Q: להשתמש ב-font-weight של CSS או בתגית ?

השתמשו ב- כשהמילים חשובות, ב- לטקסט שרק מעוצב אחרת, וב-font-weight לעיצוב חזותי כמו כפתורים, תוויות וכותרות. לתגיות יש משמעות; המאפיין הוא רק מראה.

CSS Font Weight: טקסט מודגש, מספרים מ-100 עד 900 ודוגמאות

המאפיין font-weight הופך טקסט למודגש, לדק או לכל דבר שביניהם. למדו את הסקאלה המספרית מ-100 עד 900, את normal ו-bold, את bolder ו-lighter היחסיים, ולמה לפעמים עובי לא משנה כלום.

בדף הזה יש עורכים שאפשר להריץ - לערוך, להריץ ולראות את הפלט מיד.

מאת Kevin Spektor, מייסד שותף ו-CTO

פורסם ב-Sep 24, 2026

איך מדגישים טקסט ב-CSS

font-weight קובע כמה עבות האותיות. bold (זהה ל-700) הופך טקסט למודגש, ו-normal (זהה ל-400) הוא טקסט רגיל.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font weight</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 6px 0; }
    .normal { font-weight: normal; }
    .bold { font-weight: bold; }
    .heavy { font-weight: 900; }
    h2.plain { font-weight: normal; }
  </style>
</head>
<body>
  <p class="normal">font-weight: normal (400)</p>
  <p class="bold">font-weight: bold (700)</p>
  <p class="heavy">font-weight: 900</p>
  <h2 class="plain">A heading with font-weight: normal</h2>
</body>
</html>

כותרות, <th>,  ו- מודגשים כברירת מחדל בגלל גיליון הסגנונות של הדפדפן עצמו, ולכן font-weight: normal הוא הדרך להוריד הדגשה. מתי להשתמש ב- או ב- ב-HTML עצמו, ראו הדגשה ב-HTML.

הסקאלה המספרית: מ-100 עד 900

למספרים יש שמות סטנדרטיים שמשפחות גופנים עוקבות אחריהם:

ערך	שם נפוץ
`100`	Thin
`200`	Extra Light
`300`	Light
`400`	Normal (Regular)
`500`	Medium
`600`	Semi Bold
`700`	Bold
`800`	Extra Bold
`900`	Black (Heavy)

כל מספר מ-1 עד 1000 תקין, כך שגם 450 ו-650 מותרים. אם תראו הבדל תלוי בגופן: הדפדפן יכול לצייר רק משקלים שבאמת קיימים בגופן.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Weight scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-weight: 100;">100 Thin</p>
  <p style="font-weight: 200;">200 Extra Light</p>
  <p style="font-weight: 300;">300 Light</p>
  <p style="font-weight: 400;">400 Normal</p>
  <p style="font-weight: 500;">500 Medium</p>
  <p style="font-weight: 600;">600 Semi Bold</p>
  <p style="font-weight: 700;">700 Bold</p>
  <p style="font-weight: 800;">800 Extra Bold</p>
  <p style="font-weight: 900;">900 Black</p>
</body>
</html>

system-ui הוא גופן הממשק של מערכת ההפעלה, שבדרך כלל מגיע עם הרבה משקלים. אם כל שורה למעלה נראית כמו אחד משני משקלים, לגופן המערכת שלכם יש רק רגיל ומודגש.

למה עובי לא משנה כלום

גופן הוא אוסף קבצים, לרוב קובץ אחד לכל משקל. כשהמשקל המדויק חסר, הדפדפן בוחר את הקרוב ביותר שיש לו:

עבור 500, הוא מנסה 500, אחר כך משקלים קלים יותר, ואחר כך כבדים יותר.
עבור 600 ומעלה, הוא מנסה קודם משקלים כבדים יותר, ואחר כך קלים יותר.
אם אין בכלל קובץ מודגש, רוב הדפדפנים מזייפים אחד על ידי עיבוי האותיות הרגילות (bold סינתטי).

השוו גופן עם הרבה משקלים ל-serif, שברוב המערכות יש לו רק רגיל ומודגש:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Missing weights</title>
  <style>
    body { font-size: 22px; color: #111827; }
    .col { display: inline-block; vertical-align: top; margin-inline-end: 32px; }
    .sans { font-family: system-ui, sans-serif; }
    .serif { font-family: Georgia, serif; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <div class="col sans">
    <p style="font-weight: 300;">300 sans</p>
    <p style="font-weight: 500;">500 sans</p>
    <p style="font-weight: 600;">600 sans</p>
  </div>
  <div class="col serif">
    <p style="font-weight: 300;">300 serif</p>
    <p style="font-weight: 500;">500 serif</p>
    <p style="font-weight: 600;">600 serif</p>
  </div>
</body>
</html>

בעמודת ה-serif, 300 ו-500 בדרך כלל נופלים לפנים הרגילות ו-600 לפנים המודגשות. זו התשובה לרוב השאלות על "font-weight לא עובד": ה-CSS בסדר, לגופן חסר המשקל. גופן משתנה (קובץ אחד עם ציר משקל) מצייר כל ערך בטווח המשקלים שלו בצורה חלקה.

bolder ו-lighter

bolder ו-lighter יחסיים למשקל שהאלמנט יורש. הם קופצים לקבוצת המשקל הבאה במקום להוסיף כמות קבועה:

משקל ההורה	`bolder` נותן	`lighter` נותן
100 עד 349	400	100
350 עד 549	700	100
550 עד 749	900	400
750 עד 900	900	700

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bolder and lighter</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    .bolder { font-weight: bolder; }
    .lighter { font-weight: lighter; }
  </style>
</head>
<body>
  <p style="font-weight: 400;">400 with <span class="bolder" id="a">bolder</span> and <span class="lighter" id="b">lighter</span></p>
  <p style="font-weight: 700;">700 with <span class="bolder" id="c">bolder</span> and <span class="lighter" id="d">lighter</span></p>
  <p id="out"></p>
  <script>
    const w = (id) => getComputedStyle(document.getElementById(id)).fontWeight;
    document.getElementById('out').textContent =
      'computed: ' + w('a') + ', ' + w('b') + ', ' + w('c') + ', ' + w('d');
  </script>
</body>
</html>

דפוס מהעולם האמיתי: סקאלת משקלים במשתנים

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

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
}
body   { font-weight: var(--weight-regular); }
button { font-weight: var(--weight-medium); }
h1, h2 { font-weight: var(--weight-bold); }

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

ציפייה שכל מספר ייראה שונה. רק משקלים שהגופן מכיל מוצגים באופן נבדל.
שימוש ב- לתווית של כפתור. עצבו את הכפתור עם font-weight; שמרו את  ו- לטקסט.
מספר במירכאות. font-weight: "700" לא תקין ונזרק. כתבו font-weight: 700.
הדגשה בכל מקום. כשהכול מודגש, שום דבר לא בולט. השאירו טקסט רגיל ב-400.
משקלים דקים לטקסט קטן. 100 עד 300 בגדלים קטנים קשה לקריאה, במיוחד על רקעים עם ניגודיות נמוכה.

שאלות נפוצות

איך מדגישים טקסט ב-CSS?

משתמשים ב-font-weight: bold; או במספר המקביל font-weight: 700; על האלמנט. כדי להסיר הדגשה מכותרת או מ-, הגדירו font-weight: normal; (400).

מה הערכים של font-weight?

מספרים מ-1 עד 1000, שבדרך כלל נכתבים במאות: 100 thin, 200 extra light, 300 light, 400 normal, 500 medium, 600 semibold, 700 bold, 800 extra bold, 900 black. מילות המפתח normal ו-bold הן 400 ו-700, ו-bolder ו-lighter יחסיות להורה.

האם font-weight bold זהה ל-700?

כן. bold מחושב ל-700 ו-normal מחושב ל-400, כך ששתי הצורות נראות זהות.

למה font-weight 500 או 600 נראה כמו normal או bold?

לגופן אין את העובי הזה. כשגופן מגיע רק עם 400 ו-700, הדפדפן בוחר את הקובץ הקרוב ביותר שזמין, ולכן 500 מוצג כמו 400 ו-600 כמו 700. טענו גופן עם יותר משקלים או גופן משתנה.

להשתמש ב-font-weight של CSS או בתגית ?

השתמשו ב- כשהמילים חשובות, ב- לטקסט שרק מעוצב אחרת, וב-font-weight לעיצוב חזותי כמו כפתורים, תוויות וכותרות. לתגיות יש משמעות; המאפיין הוא רק מראה.

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