Bird
Raised Fist0
CSSmarkup~8 mins

Font weight in CSS - Performance & Optimization

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Performance: Font weight
MEDIUM IMPACT
Font weight affects how text is painted and can influence rendering speed and layout stability.
Applying font weight styles for text emphasis
CSS
body { font-weight: 400; }
h1 { font-weight: 700; }
p { font-weight: 400; }
Using fewer font weights reduces font file size and minimizes layout shifts.
📈 Performance Gainsaves 100-300kb in font files, reduces CLS
Applying font weight styles for text emphasis
CSS
body { font-weight: 100; }
h1 { font-weight: 900; }
p { font-weight: 700; }
Loading multiple font weights increases font file size and can cause layout shifts when fonts load asynchronously.
📉 Performance Costadds 100-300kb to font files, triggers layout shifts causing CLS
Performance Comparison
PatternDOM OperationsReflowsPaint CostVerdict
Many font weightsNo extra DOM nodesMultiple reflows on font loadHigh paint cost due to font rendering[X] Bad
Few font weightsNo extra DOM nodesSingle reflow on font loadLower paint cost[OK] Good
Rendering Pipeline
Font weight affects style calculation and paint stages. Multiple weights increase font file size, delaying font loading and causing layout shifts.
→Style Calculation
→Layout
→Paint
⚠️ BottleneckLayout due to font loading causing reflows and CLS
Core Web Vital Affected
CLS
Font weight affects how text is painted and can influence rendering speed and layout stability.
Optimization Tips
1Limit the number of font weights to reduce font file size.
2Preload critical font weights to avoid layout shifts.
3Avoid switching font weights dynamically after page load.
Performance Quiz - 3 Questions
Test your performance knowledge
How does using many different font weights affect page performance?
AReduces font file size and speeds up rendering
BIncreases font file size and causes layout shifts
CHas no impact on performance
DImproves text input responsiveness
DevTools: Performance
How to check: Record a page load and look for layout shifts and font loading times in the flame chart.
What to look for: Look for layout shift events and long font load durations indicating multiple font weights.

Practice

(1/5)
1. What does the CSS property font-weight control in text?
easy
A. How thick or thin the text appears
B. The color of the text
C. The size of the text
D. The font family used

Solution

  1. Step 1: Understand the role of font-weight

    The font-weight property changes the thickness of the text, making it look bolder or lighter.

  2. Step 2: Compare with other text properties

    Color changes text color, size changes text size, and font family changes the font style, not thickness.

  3. Final Answer:

    How thick or thin the text appears -> Option A

  4. Quick Check:

    font-weight controls thickness [OK]
Hint: Remember: weight means thickness of letters [OK]
Common Mistakes:
  • Confusing font-weight with font-size
  • Thinking font-weight changes color
  • Mixing font-weight with font-family
2. Which of the following is the correct CSS syntax to make text bold using font-weight?
easy
A. font-weight: bold;
B. font-weight: 1000;
C. font-weight: heavy;
D. font-weight: strong;

Solution

  1. Step 1: Recall valid font-weight values

    Valid values include keywords like normal, bold, or numbers 100 to 900 in steps of 100.

  2. Step 2: Check each option

    font-weight: bold; uses bold which is correct. font-weight: 1000; uses 1000 which is invalid. Options A and D use invalid keywords.

  3. Final Answer:

    font-weight: bold; -> Option A

  4. Quick Check:

    Use 'bold' keyword for bold text [OK]
Hint: Use 'bold' keyword or 700 for bold text [OK]
Common Mistakes:
  • Using numbers outside 100-900 range
  • Using invalid keywords like 'heavy' or 'strong'
  • Missing semicolon at end
3. What will be the visual difference between these two CSS rules?
p.normal { font-weight: 400; }
p.bold { font-weight: 700; }
medium
A. Text with class 'bold' is italicized
B. Both texts look exactly the same
C. Text with class 'normal' is bolder than 'bold'
D. Text with class 'normal' is thinner than text with class 'bold'

Solution

  1. Step 1: Understand numeric font-weight values

    400 is the normal weight, and 700 is the bold weight, so 700 is thicker text.

  2. Step 2: Compare the two classes visually

    Text with class 'normal' will appear thinner than text with class 'bold'. Italic style is unrelated to font-weight.

  3. Final Answer:

    Text with class 'normal' is thinner than text with class 'bold' -> Option D

  4. Quick Check:

    400 < 700 means thinner < bolder [OK]
Hint: Higher number means thicker text [OK]
Common Mistakes:
  • Thinking 400 is bolder than 700
  • Confusing font-weight with font-style
  • Assuming no difference between 400 and 700
4. Identify the error in this CSS snippet:
h1 { font-weight: 950; }
medium
A. Missing units after 950
B. 950 is not a valid font-weight value
C. font-weight cannot be used on h1
D. Should use font-style instead of font-weight

Solution

  1. Step 1: Check valid font-weight numeric values

    Valid numeric values are multiples of 100 from 100 to 900 only.

  2. Step 2: Validate the given value

    950 is outside the valid range, so it is invalid and will be ignored by browsers.

  3. Final Answer:

    950 is not a valid font-weight value -> Option B

  4. Quick Check:

    font-weight numbers must be 100-900 [OK]
Hint: Use multiples of 100 between 100 and 900 [OK]
Common Mistakes:
  • Using numbers outside 100-900
  • Adding units like px or em to font-weight
  • Confusing font-weight with font-style
5. You want to highlight a warning message by making its text thicker but not fully bold. Which font-weight value is best to use?
hard
A. font-weight: 300;
B. font-weight: 900;
C. font-weight: 600;
D. font-weight: normal;

Solution

  1. Step 1: Understand font-weight scale

    Lower numbers like 300 are light, 400 is normal, 700 is bold, and 900 is very bold.

  2. Step 2: Choose a weight thicker than normal but less than bold

    600 is between normal (400) and bold (700), so it makes text thicker but not fully bold.

  3. Final Answer:

    font-weight: 600; -> Option C

  4. Quick Check:

    600 is semi-bold, perfect for emphasis [OK]
Hint: Use 600 for semi-bold emphasis [OK]
Common Mistakes:
  • Using 300 which is lighter than normal
  • Using 900 which is too bold
  • Using 'normal' which is not thicker