Controlling Attention

1. Measurement Units: px vs rem

• px (pixels): Rigid size. If user increases text scale in system settings, your pixels might stay small.
• rem (root em): Relative size. 1rem usually equals 16px. This is the accessibility standard.

2. Font Weight

This is the thickness of letter lines.

• 400: regular (normal).
• 700: bold.
• Variable Fonts: Modern fonts allow smoothly changing weight from 1 to 1000.

h1 {
  font-size: 2.5rem; /* ~40px */
  font-weight: 800;   /* Very expressive heading */
}