font-family, font-size, font-weight — typography
Change the typeface, size, and boldness. Use system fonts for instant loading.
style.css
v3.1
style.css — the CSS rules
index.html — the HTML structure (what the CSS targets)
Live preview
updates as you type
🧠 How it works
font-family takes a list — the browser uses the first one installed. Common stacks: 'Georgia, serif' (classic), 'Arial, sans-serif' (modern), 'Courier New, monospace' (code). font-size: 16px is the browser default. Use rem for relative sizing (1rem = root font size). font-weight: 400 = normal, 700 = bold. line-height: 1.6 means 1.6x the font size — improves readability.
✏️ Try these changes
-
Change 'Georgia', serif to 'Arial', sans-serif→ modern sans-serif look -
Change font-size to 24px→ text becomes larger -
Change font-weight to 700→ text becomes bold -
Change line-height to 1.2→ lines get closer together (worse readability) -
Change line-height to 2.0→ lines get further apart (better readability)